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

اضافة شريط آخر الأخبار لمدونة بلوجر

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

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

الطريقة الأولى لأضافة شريط اخبار المدونه التلقائي بإصافة اداه جافا سكربت 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 = 20; //عدد المواضيع المرغوب ظهورها في الشريط
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://abaqrinoblog.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://abaqrinoblog.blogspot.com/ الى رابط مدونتك ثم احفظ القالب


Unknown

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