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

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

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

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

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

معاينة الكود

الكود :

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

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

معاينة الكود

من لوحة تحكم بلوجر اختر قالب ثم 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>
<div id='recentpostbreaking'>
جاري التحميل  ...</div>

</div>

<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/ الى رابط مدونتك ثم احفظ القالب

اقرأ ايضا :