كود بلوجر شريط آخر الأخبار متحرك بطريقتين

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

كود شريط اخبار بلوجر 

الطريقة الأولى

انصحكم بهذه الطريقة وهي طريقة سهلة لأضافة آخر اخبار المدونة او شريط الأخبار بشكل تلقائي وذلك بنسخ الكود التالي واضافته في اداة جافا سكربت من تخطيط وسحب الأداه ووضعها فوق رسائل المدونه .

معاينة الكود

 

الكود :

<script style='text/javascript'> function rssticker(t){for(var a=0;a<numeroposts;a++){entradas=t.feed.entry[a],titulosposts[a]=entradas.title.$t;for(var e=0;e<entradas.link.length;e++)if("alternate"==entradas.link[e].rel){enlaceposts[a]=entradas.link[e].href;break}}startrssticker()}function startrssticker(){postactual=-1,largoactual=0,enlaces=document.getElementById("enlace"),runticker()}function runticker(){var t;0==largoactual&&(postactual++,postactual%=numeroposts,titulo=titulosposts[postactual].replace(/"/g,'"'),enlace=enlaceposts[postactual],enlaces.href=enlace),enlaces.innerHTML=titulo.substring(0,largoactual),largoactual!=titulo.length?(largoactual++,t=retardocaracter):(largoactual=0,t=retardopost),setTimeout("runticker()",t)} var numeroposts = 6; //عدد المواضيع المرغوب ظهورها في الشريط var retardocaracter = 30; //عدد الأحرف var retardopost = 4000; //التحكم بالسرعة var titulosposts = new Array(); var enlaceposts = new Array(); var entradas = ""; </script> <div class='rssticker'> <span class="encabezado">أحدث المواضيع</span> <a id='enlace'></a> <!-- مدونة الكلباني --> <script src='/feeds/posts/default?alt=json-in-script&callback=rssticker' style='text/javascript'></script> </div> <style> .rssticker{position:relative!important;width:100%;height:40px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;margin:10px auto;color:#fff;background:#fff;font-size:14px;float:right; font-family: 'Droid Arabic Kufi'line-height:40px;} .encabezado{display:inline-block;margin:0 10px 0 0;padding:0 10px;line-height:40px;background:#CD2122;float:right;box-sizing:border-box;} .rssticker a{color:#333;margin:0;padding:3px;float:right;text-decoration:none;} .rssticker a:hover{text-decoration:none;color:#08ffff;} </style>

الطريقة الثانية 

لأضافة شريط اخبار المدونة التلقائي :

معاينة الكود

من لوحة تحكم بلوجر اختر قالب ثم html ولا تنسى أخذ نسخة احتياطية للقالب :
ابحث عن </head>  والصق قبله الكود التالي :

<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <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 != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <div id='beakingnews'> <span class='tulisbreaking'>جديد الأخبار</span><!-- tag pembuka tempat Breaking News--> <div id='recentpostbreaking'> جاري التحميل ...</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://alnaje7oon.blogspot.com/', // alamat blogmu contoh 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://alnaje7oon.blogspot.com/ الى رابط مدونتك ثم احفظ القالب

اقرأ ايضا : 

كود شريط آخر الأخبار من جوجل لمدونات بلوجر