اضافة شريط متحرك يضم اخر اخبار المدونه بالوان احترافيه

بسم الله الرحمن الرحيم ... السلام عليكم ورحمة الله وبركاته

اقدم لكم اليوم اضافة حصرية وجميلة للبلوجر فقط على مدونة مدون

اضافة اخر الاخبار نصى متوفرة بأكثر من لون تصلح لكافة المدونات والقوالب فقط عليك بـ إختيار اللون الذى يناسب قالبك وشرح التركيب خطو بخطوة فقط إتبع الشرح الآتى

1- من لوحة التحكم --قالب --تحرير html

2-البحث عن الكود التالى 

  <head/>

واضافة هذا الكود قبله 

كود اللون الازرق

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
#beakingnews{width:980px;margin:0 auto;line-height:37px;;overflow:hidden; margin-bottom: 20px; max-height: 37px; overflow: hidden;
background: #fff;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
background-clip: padding-box;border-left: none;max-height: 37px;}
#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#21b8ff;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;font-size: 14px;
line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;
text-transform: uppercase;}
#recentpostbreaking{float:right;padding-right: 15px;}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
#recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
</style></b:if></b:if>

كود اللون الاخضر

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>#beakingnews{width:980px;margin:0 auto;
line-height:37px;;overflow:hidden; margin-bottom: 20px;
max-height: 37px; overflow: hidden;
background: #fff;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
background-clip: padding-box;
border-left: none;
max-height: 37px;}
#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#29BD9E;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;font-size: 14px;
line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;
text-transform: uppercase;}
#recentpostbreaking{float:right;padding-right: 15px;}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
#recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
</style></b:if></b:if>

كود اللون الاحمر

 

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>#beakingnews{width:980px;margin:0 auto;line-height:37px;;overflow:hidden; margin-bottom: 20px; max-height: 37px; overflow: hidden;
background: #fff;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
background-clip: padding-box;
border-left: none;
max-height: 37px;}
#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#CC1B1B;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;
font-size: 14px;line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;text-transform: uppercase;}
#recentpostbreaking{float:right;padding-right: 15px;}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
#recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
</style></b:if></b:if>

الان بعد ان ضفت احد الاكواد السابقة تبقت لنا خطوة واحدة وهى اضافة الاضافة تحت الهيدر
ملاحظة - ان كود الهيدر يختلف من قالب لاخر ولكن انا ساعطيك الكود الشهير
سنقوم بالبحث عن الكود التالى

          <div class='main-outer'>

ونلصق قبله تماما هذا الكود

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='beakingnews'><span class='tulisbreaking'>أحدث الأخبار</span><!-- tag pembuka tempat Breaking News-->
<div id='recentpostbreaking'>Loading...</div><!-- tag tempat daftar Breaking News ditampilkan-->
</div><!-- tag penutup tempat Breaking News-->
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://mdwanblog.blogspot.com/', // alamat blogmu contoh http://mkr-site.blogspot.com
numpostx     = 10; // Jumlah artikel yang di tampilkan
$.ajax({
url: '' + url_blog + '/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',    type: 'get',    dataType: "jsonp", success: function(data) {        var posturl, posttitle, skeleton = '', entry = data.feed.entry; if (entry !== undefined) {skeleton = "<ul>";for (var i = 0; i < entry.length; i++) { for (var j=0; j < entry[i].link.length; j++)  { if (entry[i].link[j].rel == "alternate"){ posturl = entry[i].link[j].href;  break;  }              }            
posttitle = entry[i].title.$t;
skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
        }
skeleton += '</ul>';
$('#recentpostbreaking').html(skeleton);
// kode untuk efek pada breaking news
function tick(){
$('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); }); }
setInterval(function(){ tick () }, 5000); } else {
$('#recentpostbreaking').html('<span>No result!</span>');
        }  }, error: function() {
$('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>');
       } }); });
//]]>
</script>
</b:if></b:if>

الان قم باستبدال الرابط التالى http://mdwanblog.blogspot.com/ برابط مدونتك

ستجده باللون الاحمر 

واذا كان لديك اى استفسار لا تترد فى طرحه

صفحتى على الفيس بوك

اقرء المزيد

قائمة css فى قمة الأناقة لمدونات بلوجر

بسم الله الرحمن الرحيم

أقدم لكم من مدونة مدون فقط قائمة css فى قمة الإحترافية بالوان رائعة جداً ومناسبة لجميع القوالب يمكنك تركيبها فى أداة جديدة جافاسكريبت ويمكنك إستبدالها بالقائمة القديمة فى قالبك .

لوحة التحكم / التخطيط / إختار المكان المناسب / أداة جافاسكريبت وضع بها الكود التالى بها

     <style>  

    /* by.mdwanblog.blogspot.com */

    #cssmenu {

      padding: 0;

      margin: 0;

      border: 0; }

    #cssmenu ul, #cssmenu li {

      list-style: none;

      margin: 0;

      padding: 0; }

    #cssmenu ul {

      position: relative;

      z-index: 597; }

    #cssmenu ul li {

      float: right;

      min-height: 1px;

      vertical-align: middle; }

    #cssmenu ul li.hover,

    #cssmenu ul li:hover {

      position: relative;

      z-index: 599;

      cursor: default; }

    #cssmenu ul ul {

      visibility: hidden;

      position: absolute;

      top: 100%;

      left: 0;

      z-index: 598;

      width: 100%; }

    #cssmenu ul ul li {

      float: none; }

    #cssmenu ul ul ul {

      top: 0;

      left: auto;

      right: -99.5%; }

    #cssmenu ul li:hover > ul {

      visibility: visible; }

    #cssmenu ul ul {

      bottom: 0;

      left: 0; }

    #cssmenu ul ul {

      margin-top: 0; }

    #cssmenu ul ul li {

      font-weight: normal; }

    #cssmenu a {

      display: block;

      line-height: 1em;

      text-decoration: none; }

    /* by.mdwanblog.blogspot.com */

    #cssmenu {

      background: #333;

      border-bottom: 4px solid #1b9bff;

      font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;

      font-size: 12px; }

      #cssmenu > ul {

        *display: inline-block; }

      #cssmenu:after, #cssmenu ul:after {

        content: '';

        display: block;

        clear: both; }

      #cssmenu ul {

        text-transform: uppercase; }

        #cssmenu ul ul {

          border-top: 4px solid #1b9bff;

          text-transform: none;

          min-width: 190px; }

          #cssmenu ul ul a {

            background: #1b9bff;

            color: #FFF;

            border: 1px solid #0082e7;

            border-top: 0 none;

            line-height: 150%;

            padding: 16px 20px; }

          #cssmenu ul ul ul {

            border-top: 0 none; }

          #cssmenu ul ul li {

            position: relative; }

            #cssmenu ul ul li:first-child > a {

              border-top: 1px solid #0082e7; }

            #cssmenu ul ul li:hover > a {

              background: #35a6ff; }

            #cssmenu ul ul li:last-child > a {

              -moz-border-radius: 0 0 3px 3px;

              -webkit-border-radius: 0 0 3px 3px;

              border-radius: 0 0 3px 3px;

              -moz-background-clip: padding;

              -webkit-background-clip: padding-box;

              background-clip: padding-box;

              -moz-box-shadow: 0 1px 0 #1b9bff;

              -webkit-box-shadow: 0 1px 0 #1b9bff;

              box-shadow: 0 1px 0 #1b9bff; }

            #cssmenu ul ul li:last-child:hover > a {

              -moz-border-radius: 0 0 0 3px;

              -webkit-border-radius: 0 0 0 3px;

              border-radius: 0 0 0 3px;

              -moz-background-clip: padding;

              -webkit-background-clip: padding-box;

              background-clip: padding-box; }

            #cssmenu ul ul li.has-sub > a:after {

              content: '+';

              position: absolute;

              top: 50%;

              right: 15px;

              margin-top: -8px; }

        #cssmenu ul li:hover > a, #cssmenu ul li.active > a {

          background: #1b9bff;

          color: #FFF; }

        #cssmenu ul li.has-sub > a:after {

          content: '+';

          margin-left: 5px; }

        #cssmenu ul li.last ul {

          left: auto;

          right: 0; }

          #cssmenu ul li.last ul ul {

            left: auto;

            right: 99.5%; }

      #cssmenu a {

        background: #333;

        color: #CBCBCB;

        padding: 0 20px; }

      #cssmenu > ul > li > a {

        line-height: 48px; }

</style>

<!--by.mdwanblog.blogspot.com-->

    <div id='cssmenu'>

    <ul>

       <li class='active'><a href='#'><span>الرئيسية</span></a></li>

       <li class='has-sub'><a href='#'><span>منسدلة</span></a>

          <ul>

             <li class='has-sub'><a href='#'><span>رابط</span></a>

                <ul>

                   <li><a href='#'><span>رابط</span></a></li>

                   <li class='last'><a href='#'><span>مدونة مدون</span></a></li>

                </ul>

             </li>

             <li class='has-sub'><a href='#'><span>منسدلة اخرى</span></a>

                <ul>

                   <li><a href='#'><span>جديد</span></a></li>

                   <li class='last'><a href='#'><span>هاكات بلوجر</span></a></li>

                </ul>

             </li>

          </ul>

       </li>

       <li><a href='#'><span>عن مدوّن</span></a></li>

       <li class='last'><a href='#'><span>بلوجر</span></a></li>

    </ul>

    </div>

    <!--by.mdwanblog.blogspot.com-->

فى النهاية أتمنى إنها تنال إعجابكم دمتم بخير

اقرء المزيد

قائمة css فى قمة الإحترافية (صورة ، عنوان ، وصف)

بسم الله الرحمن الرحيم

أشكال وأنواع وأفكار القوائم مع css لا تنتهي. درس جديد يشرح طريقة لعمل أحد أشكال القوائم، وهي قائمة كثيرة المعلومات! تجد كل البيانات التى يمكن أن يحتاجها الزائر، عنوان للوصلة مع وصف مختصر لها وأيضا أيقونة يمكن أن تكون شعار للموقع أو صورة مصغرة، ويمكن أستخدام القائمة في قوالب المدونات، للمواقع الصديقة والروابط، وأيضا يمكن ان تستغل لروابط الأقسام الرئيسية في المواقع وغيرها...

تركيب القائمة بالنسبة لمدونات بلوجر كالعادة من التخطيط / إختار أداة جافاسكريبت وضع بها الكود التالى

<style>
#menu {
 background: white;
 width: 280px;
 padding:10px;
}
#menu ul {
 margin:0;
 padding:0;
 list-style: none;
}
#menu ul li {
 margin: 0;
 padding: 5px 0 10px;
 border-bottom: 1px dashed #EAEAEA;
}
#menu ul li img {
 float: right;
 padding: 3px 0 0 10px;
}
#menu ul li a {
 font: normal 18px 'Droid Arabic Kufi', tahoma ,arial;
 color: #007195;
 text-decoration:none;
}
#menu ul li a:hover {
 color:#CC3332;
}
#menu ul li span {
 font: normal 13px 'Droid Arabic Kufi', tahoma ,arial;
 color:#7D7D7D;
}
#menu li span:hover {
 color: #494949;
}
</style>
<div id="menu">
 <ul>
<!--design:mdwanblog.blogspot.com-->
 <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBfkTcUtwdiOB06bg83oGkKZP8dpp-a1T4Tjsafx1hgThIQj44TxAgXI_VNdXObs6f59XPIZf66ptz1pLOnbcP9nYSJwFnpJ6fPYwCQ5JmTXMbqJrX1Pme8XUyJO66m-1RM8BoKGTogD0/s1600/232.png" border="0" alt="" /><a href="#">موقع جديد!<br />
 <span>وصف مختصر</span></a></li>
 <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjtre1POSWoU6VJixUaAVeEUnKa8nCHmTapirLa6F-8Cwy_mP-X3tkPyPAtBIZNLnO18q8y_lNUTXCaU0CtkKZTuMxonlcZ-y0KPBHROttMckw3zutdxhQHkcpXPZXaGHm242hisLGCpo/s1600/155.png" border="0" alt="" /><a href="#">موقع جديد!<br />
 <span>وصف مختصر</span></a></li>
 <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj44LENoT_f_mR4VZ31q6fRolEWQxmBqjLatETQR48gKd7NFczTevIDMItvAeAtGez7iEk6aalpKpF-bZNGrw4jI_U1jRaxghaXwHqV1RC2PXw9yg772XRBAKR_ge4qUv3OJT9TI3JJDA4/s1600/178.png" border="0" alt="" /><a href="#">موقع جديد!<br />
 <span>وصف مختصر</span></a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Ts9qCROYVAsNLLQJoi8ibMHA_N1a9J-Ufn70rmJ2-30oqSg-IfrSWiKyvmslY7thumE5JmKB4LI5Zk1RpNY8EwElOjv1SUailyF3hgK6e1wJA3YZYN-VjH19q9fU945r_hCGkq2kLWc/s1600/185.png" border="0" alt="" /><a href="#">موقع جديد!<br />
 <span>وصف مختصر</span></a></li>
<!--design:mdwanblog.blogspot.com-->
 </ul>
</div>

أتمنى إنها تنال إعجابكم 

اقرء المزيد

كود الإعلانات النصية الإحترافى مثل المواقع

بسم الله الرحمن الرحيم 

السلام عليكم ورحمة الله وبركاتة ....  كود إعلانات نصية إحترافى مثل المواقع والمنتديات css من تطوير مدونة مدوّن ربما بحثت عليه كثيراً ولن تجده ولكن مدونة مدوّن اليوم تقدمة لك ويحتاج فقط لتعديل الروابط  الخاصه بك .

معاينة الكود بالكامل 

اولاً هذا الكود خاص بجزء الـ html فقط

<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet'
<div class="simoelmaachi">
<div class="footerbg">
<div class="footerright">
<div class="footerleft">
<div id="textlinks">
<div class="textcontainer" id="rightspace">
<ul>

  <li class="texttitle" style="background-image:
url('http://img706.imageshack.us/img706/7030/53800244.png');
background-position: right; background-repeat: no-repeat">الاعلانات
النصية</li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
</ul>
</div>
<div class="textcontainer" id="rightspace">
<ul>

  <li class="texttitle" style="background-image:
url('http://img706.imageshack.us/img706/7030/53800244.png');
background-position: right; background-repeat: no-repeat">الاعلانات
النصية</li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
</ul>
</div>
<div class="textcontainer" id="rightspace">
<ul>

  <li class="texttitle" style="background-image:
url('http://img706.imageshack.us/img706/7030/53800244.png');
background-position: right; background-repeat: no-repeat">الاعلانات
النصية</li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
</ul>
</div>
<div class="textcontainer" id="rightspace">
<ul>

  <li class="texttitle" style="background-image:
url('http://img706.imageshack.us/img706/7030/53800244.png');
background-position: right; background-repeat: no-repeat">الاعلانات
النصية</li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
</ul>
</div>
<div class="textcontainer" id="rightspace">
<ul>

  <li class="texttitle" style="background-image:
url('http://img706.imageshack.us/img706/7030/53800244.png');
background-position: right; background-repeat: no-repeat">الاعلانات
النصية</li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
</ul>
</div>
<div class="textcontainer" id="rightspace">
<ul>

  <li class="texttitle" style="background-image:
url('http://img706.imageshack.us/img706/7030/53800244.png');
background-position: right; background-repeat: no-repeat">الاعلانات
النصية</li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

ثانياً الجزء الخاص بـ css

<style type="text/css">
html
{
scrollbar-base-color: #3F93AF;
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #DFDEDF;
}

.footerbg {
    height: 147px;
}

#textlinks ul  {
  padding: 0;
  margin: 0;
  direction: rtl;
  list-style-type: none;
font-family:'Droid Arabic Kufi', tahoma ,arial;
  font-size: 11px;
}
#textlinks li {
  background-position: bottom;
  text-align: right;

}
#textlinks li a {
  background-position: right;
  display: block;
  text-decoration: none;
  padding-right: 20px;
 font-family:'Droid Arabic Kufi', tahoma ,arial;
  font-size: 15px;
  font-weight: normal;
  color: FFCC00;
  background-image: url('http://img526.imageshack.us/img526/7194/linkie.png');
  background-repeat: no-repeat;
  line-height: 20px;
  height: 20px;
}
#textlinks li a:hover {
  text-decoration: none;

  color: FF9900;
}
#textlinks {
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.textcontainer {
  float: right;
  display: inline;
  width: 160px;
  padding-top: 20px;
  margin-left: 20px;
}
#rightspace {
  margin-right: 35px;
}
.texttitle {
font-family:'Droid Arabic Kufi', tahoma ,arial;
  font-size: 13px;
  font-weight: bold;
  color: #FF9900;
  padding-right: 20px;
}
</style>

تركيب الكود إختر إضافة اداة جافاسكريبت وضع بها الكود الـ html وأسفلها مباشرة ضع الكود الـ css

اقرء المزيد

أزرار المتابعة بشكل جديد إحترافى لمدونتك

بسم الله الرحمن الرحيم 

كود إضافة أزرار المتابعة بشكل إحترافى وجديد ولن تجدة إلا هنا فقط فى مدونة مدوّن

أزرار المتابعة لمدونات بلوجر تعطى شكل أنيق لمدونتك وتظهرها إحترافية أكثر الكود يضم

أزرار متابعه المواقع الإجتماعية 5 مواقع فقط والآن مع شرح التركيب.

للمعاينة المباشرة| هنا

لوحة التحكم - القالب - إستخدم f3 وإبحث عن هذا الكود

]]></b:skin>

وضع الكود التالى قبلة مباشرة 

.socialw {
 width: 236px;
 margin-top: 100px;
 margin-left: auto;
 margin-right: auto;
 overflow: auto;
 height: 100%;
}
#social1 {
 border: 1px solid #292929;
 width: 37px;
 height: 62px;
 margin-left: 1px;
 float: left;
 overflow: hidden;
}
#social2,#social3,#social4,#social5 {
 border: 1px solid #292929;
 width: 37px;
 height: 62px;
 float: left;
 margin-left: 10px;
 overflow: hidden;
}
/*    ANIMATIONS   */
.animate {
 -webkit-animation-duration: 1s;
 -moz-animation-duration: 1s;
 -o-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-fill-mode: both;
 -moz-animation-fill-mode: both;
 -o-animation-fill-mode: both;
 animation-fill-mode: both;
}
.animate.queue {
 -webkit-animation-delay: 1s;
 -moz-animation-delay: 1s;
 -o-animation-delay: 1s;
 animation-delay: 1s;
}
.animate.queue2s {
 -webkit-animation-delay: 2s;
 -moz-animation-delay: 2s;
 -o-animation-delay: 2s;
 animation-delay: 2s;
}
.animate.queue3s {
 -webkit-animation-delay: 3s;
 -moz-animation-delay: 3s;
 -o-animation-delay: 3s;
 animation-delay: 3s;
}
.animate.queue4s {
 -webkit-animation-delay: 4s;
 -moz-animation-delay: 4s;
 -o-animation-delay: 4s;
 animation-delay: 4s;
}
/* Fade In Down */
@-webkit-keyframes fadeInDown {
 0% {
 opacity: 0;
 -webkit-transform: translateY(-100px);
 }
 100% {
 opacity: 1;
 -webkit-transform: translateY(0);
 }
}
@-moz-keyframes fadeInDown {
 0% {
 opacity: 0;
 -moz-transform: translateY(-100px);
 }
 100% {
 opacity: 1;
 -moz-transform: translateY(0);
 }
}
@-o-keyframes fadeInDown {
 0% {
 opacity: 0;
 -o-transform: translateY(-100px);
 }
 100% {
 opacity: 1;
 -o-transform: translateY(0);
 }
}
@keyframes fadeInDown {
 0% {
 opacity: 0;
 transform: translateY(-100px);
 }
 100% {
 opacity: 1;
 transform: translateY(0);
 }
}
.fadeInDown {
 -webkit-animation-name: fadeInDown;
 -moz-animation-name: fadeInDown;
 -o-animation-name: fadeInDown;
 animation-name: fadeInDown;
}
/* Fade In Down */
/* Social 1 Animation */
#social1 {position:relative;}
#social1 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social1:hover img{
margin-top:-62px;
}
#social1 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 2 Animation */
#social2 {position:relative;}
#social2 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social2:hover img{
margin-top:-62px;
}
#social2 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 3 Animation */
#social3 {position:relative;}
#social3 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social3:hover img{
margin-top:-62px;
}
#social3 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 4 Animation */
#social4 {position:relative;}
#social4 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social4:hover img{
margin-top:-62px;
}
#social4 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 5 Animation */
#social5 {position:relative;}
#social5 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social5:hover img{
margin-top:-62px;
}
#social5 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}    

الخطوة الثانية والأخيرة

من التخطيط وإختر إضافة اداة جافاسكريبت وضع بها الكود التالى

<!-- http://mdwanblog.blogspot.com/ !-->
 <div>
 <!-- Dribbble !-->
 <a href="http://dribbble.com/إسم الحساب" target="_blank">
 <div id="social1"> <img src="http://i.imgur.com/64r2jAv.png" /> </div>
 </a>
 <!-- Dribbble !-->
 <!-- Behance !-->
 <a href="http://behance.com/ إسم الحساب " target="_blank">
 <div id="social2"> <img src="http://i.imgur.com/fkuhUov.png" /> </div>
 </a>
 <!-- Behance !-->
 <!-- Facebook !-->
 <a href="http://facebook.com/ إسم الحساب " target="_blank">
 <div id="social3"> <img src="http://i.imgur.com/PY2EPRW.png" /> </div>
 </a>
 <!-- Facebook !-->
 <!-- Twitter !-->
 <a href="http://twitter.com/إسم الحساب" target="_blank">
 <div id="social4"> <img src="http://i.imgur.com/ny0pyqt.png" /> </div>
 </a>
 <!-- Twitter !-->
 <!-- Intagram !-->
 <a href="http://instagram.com/ إسم الحساب " target="_blank">
 <div id="social5"> <img src="http://i.imgur.com/tZZG2zQ.png" /> </div>
 </a>
 <!-- Instagram !-->
 </div>
<!-- http://mdwanblog.blogspot.com/ !-->

مع تغيير اللون الأحمر بروابط حساباتك

اقرء المزيد

إضافة يمكنك عمل مركز رفع صور بسيط

بسم الله الرحمن الرحيم

هذة إضافة بسيطة وهى عبارة عن مركز رفع صور فى مدونتك بسيط 

لتسهيل رفع الصور عليك وعلى الزوار الكرام الإضافة 

ليست من تصميمى أو معدل أى شئ بها أنا كنت أتصفح بعض المواقع 

 ووجدتها فحبيت إنى أشارككم بها أتمنى إنها تعجبكم وأى إستفسار

لا تترددو إخوانى فـ أنا فى الخدمة دائما إن شاء الله .

الكود لا يحتاج لتعديل فقط أضف أداة جديدة ثم ضع فيها هذا الكود 

 

تأكد من نسخ الأكواد التى بداخل الأطار كاملة

<table style="text-align: left; margin-left: auto; margin-right: auto;" border="1" cellpadding="1" cellspacing="1" width="70%"><tbody><tr><td style="text-align: center;"><center><div id="form_upload">
            <form action="http://www.servimg.com/fa_upload.php" enctype="multipart/form-data" method="post" name="upload">
                <p class="champ" style="text-align: center;">
                    <input onclick="switchuploadaddress(true);" checked name="uploadtype" style="border: 0pt none;" type="radio" /><label>اختيار صورة</label><span id="upfile"><input name="pic_file" size="25" style="width: 220px;" type="file" /></span></p>
                <p style="text-align: center;">
                    <span id="upurl" style="display: none;"><input name="pic_url" size="35" style="width: 200px; direction: ltr;" type="text" /></span><input name="cat_id" value="0" type="hidden" /><input name="email" value="goboy1000@gmail.com" type="hidden" /><input name="password" value="aa5c0a95aa1045a565c96df47c9f66" type="hidden" />"إن الله بما تعملون بصير"</p>
                <p class="submit_button" style="text-align: center;">
                    <input name="submit" value="تحميل / رفع" type="submit" /></p>
            </form>
        </div><center>
</center></center></td></tr></tbody></table>

المصدر|منتديات معهد خبراء بلوجر 

كاتب التدوينة الأصلى| أخى chhibo

 

اقرء المزيد

لوحة الأشتراك فى القائمة البريدية بشكل لطيف ولن تجدة إلا هنا فقط

بسم الله الرحمن الرحيم 

الجواب باين من عنوانة هذة التدوينة جئت بها اليكم بها بعد تطويرها حيث أنها تاخد شكل لطيف 

لهذة اللوحة وهى تضم فيس بوك،تويتر،rss، ايضاً القائمة البريدية شكل لطيف

ورائع وإحترافى لن تجدة إلى فى مدونة مدون فقط .

لوحة تحكم الرئيسية لبلوجر - التخطيط - إضافة أداة جافاسكريبت

<html>
<head>

<style>

</style>
</head>
<body>

<!--تم تطوير الإضافة بواسطة مدونة مدون-->
<!--http://mdwanblog.blogspot.com/-->
<div class="widget-content">
<div class="lefts">
    <h1><strong>تابعنا ليصلك كل ما هو <b>جديد</b><b></strong></h1>
    <div class="social">
    <a rel="nofollow" target="_blank" href="1111"><img src="http://img829.imageshack.us/img829/9886/rssiconrw.png"></a>

    <a rel="nofollow" target="_blank" href="2222"><img src="http://img221.imageshack.us/img221/8408/twittericonf.png"></a>

    <a rel="nofollow" target="_blank" href="3333"><img src="http://img16.imageshack.us/img16/8030/facebookicona.png"></a>

    </div>

    <div class="ins">
        <center>
        <div id="sleek-subscribe">
        <form action="4444" method="post" rel="nofollow" target="_new">
    
        <input class="txt2" name="email" onblur="if (this.value == '') {this.value = 'ضع اميلك هنا ليصلك كل جديد';}" onfocus="if (this.value == 'ضع اميلك هنا ليصلك كل جديد') {this.value = '';}" value="ضع اميلك هنا ليصلك كل جديد">
    
        <input class="btn2" type="submit" value=" ">
        </form>
        </div>
        </center>
    </div>

</div>
<!--تم تطوير الإضافة بواسطة مدونة مدون-->
<!--http://mdwanblog.blogspot.com/-->
<style>
.lefts{
width:300px;
height:182px;
background:url(http://img266.imageshack.us/img266/3515/leftyb.png);
}

.lefts h1{
color:#000000;
margin:0;
text-align:center;
font:17px  'DroidKufi-Bold';
padding:10px;
padding-top:20px;
}

.lefts b{
font:18px Arial, Helvetica, sans-serif;
color:green;
}

.lefts .social{
margin-right:50px;

}


.lefts .social a img{
float:right;
margin-right:10px;
margin-top:8px;

}



.lefts .ins{
width:300px;
height:40px;
float:right;
margin-top:1px;
}

.lefts .ins .txt2{
border:1px solid #e1e1e1;
background:#fff;
border-radius:5px;
font:12px Tahoma, Geneva, sans-serif;
color:red;
padding:6px 7px 7px 7px;
margin:0px;
float:right;
margin:0 20px 0 5px;
text-align:right;
    width: 175px;
}


.lefts .ins .btn2{
background:url(http://img217.imageshack.us/img217/870/subo.png);
float:right;
border:none;
width:64px;
height:28px;
cursor:pointer;
}




</style>
</div>
</body>

</html>

الآن ناتى إلى التغيرات الواجب تغيرها لتناسبك

1. اللون      غيرة برابط التغذية 
2. اللون      يمثل رابط صفحتك على تويتر
3. اللون      يمثل رابط صفحتك على فيس بوك
4. اللون      يمثل الإشتراك فى قائمتك البريدية

تنبية| رجاء رجاء رجاء عدم حزف الحقوق من الكود

اقرء المزيد

قائمة فى قمة الإحترافية بالوان رائعه css

أهلا بكم إخوانى اليوم هو كود لإضافة قائمة روعة واحترافية لمدونتك طريقة التركيب

سهلة جدا القائمة الوانها داكنة تصميمها فى غاية البساطة والروعه لن تجدها إلى على

مدونتك مدونة مدون فقط والآن أسيبكم مع شرح تركيب القائمة .

أو خطوة هى - إذهب إلى لوحة التحكم الرئيسية - قم تحرير html

إبحث عن هذا الوسم

<style>

وضع أسفلة هذا الكود

#cssmenu{ height:37px; display:block; padding:0; margin: 0; border:1px solid; border-radius:5px; } #cssmenu > ul {list-style:inside none; padding:0; margin:0;} #cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:right; display:block; position:relative;} #cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } #cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;} #cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; } #cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;} #cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; } #cssmenu > ul > li.has-sub:hover > a:before{top:19px;} #cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } #cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;} #cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;} #cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; } #cssmenu ul li > ul{width:200px;} #cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} #cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); } #cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#333333; background:-moz-linear-gradient(top, #333333 0%, #222222 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#222222)); background:-webkit-linear-gradient(top, #333333 0%,#222222 100%); background:-o-linear-gradient(top, #333333 0%,#222222 100%); background:-ms-linear-gradient(top, #333333 0%,#222222 100%); background:linear-gradient(top, #333333 0%,#222222 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#222222',GradientType=0 ); } #cssmenu{border-color:#000;} #cssmenu > ul > li > a{border-right:1px solid #000; color:#fff;} #cssmenu > ul > li > a:after{border-color:#444;} #cssmenu > ul > li > a:hover{background:#111;}

الخطوة الثانية والأخيرة إختار اضافة اداة جافاسكريبت ويمكن وضعها فى أى مكان بمدونتك

وضع الكود التالى

<!--تم برمجة الكود بواسطة مدونة مدون--> <div id='cssmenu'> <ul> <li class='active'><a href='index.html'><span>الرئيسية</span></a></li> <li class='has-sub'><a href='#'><span>مدونة مدون</span></a> <ul> <li><a href='#'><span>قوالب بلوجر</span></a></li> <li class='last'><a href='#'><span>اضافات بلوجر</span></a></li> </ul> </li> <li><a href='#'><span>عن المدون</span></a></li> <li class='last'><a href='#'><span>فوتوشوب</span></a></li> </ul>

التغييرات

1. مكان اللون     قم بوضع الرابط الخاص بك
2. مكان اللون     قم بتغيير إسم القوائم كما يناسبك

يمكنك أيضا زيادة هذا العدد وهو تكرار هذا الكود عند الحاجة

<li class='last'><a href='#'><span>فوتوشوب</span></a></li>

قم بنسخة وضع قبل هذا الوسم </ul>

 

 

أتمنى إنى أكود قد أفدتكم

اقرء المزيد