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

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

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

2 - خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات

3 - قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)

</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:#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>

ضف الكود التالي :

<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>

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

<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://kalam-blogger2.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://kalam-blogger2.blogspot.com/ برابط مدونتك

وبالاخير قم بحفظ القالب والف مبروووك عليك الاضافه

1:18 م