الطريقة الصحيحة لإضافة شريط آخر الأخبار متحرك لمدونة بلوجر

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

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

الطريقة الأولى لأضافة شريط اخبار المدونه التلقائي بإصافة اداه جافا سكربت java script :

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

معاينة الكود

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