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

حسنا انها اضافة جميلة جدا و احترافية و لطالما سألني متابعين المدونة عن طريقة اضافة شريط الدي يضم اخر أخبار المدونة

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

و لاضافة الشريط ما عليك سوى القيام بخطوات بسيطة

ابحث عن

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

هدا الشريط لونه أزرق لكن ان أردت تغيير اللون #21b8ff ابحث عن هدا لكود و هو يعتبر لون بلغة برمجة المواقع لهدا عليك الدهاب الى هدا الموقع

اضغط هنا

و اختيار اللون الدي تريده و أخد الكود الخاص به و تغيير الكود السابق بعد اختيار اللون الدي يعجبك أو ترك اللون كما هو سنضع الشريط تحت الهيدر لأنه أنسب مكان له سوف نقوم بالبحث عن الكود التالي <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://www.dzprofessionale.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://www.dzprofessionale.blogspot.com/ برابط موقعك