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

السلام عليكم ورحمة الله وبركاتة 

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

الطريقة الأولي ( شريط أحدث المواضيع متحرك وإحترفي جداً ) 

صورة لتوضيح شكل شريط أحدث المواضيع + و شريط التنويه.

طريقة التركيب : 

1- اذهب الى لوحة تحكم المدونة ثم التخطيط ثم إضافة أداة جديدة 

2- إختر JavaScript 

3- قم بلصق الكود التالي : 

<style>.rssticker { position: relative!important; width: calc((100% - 100px) / .3); height: 40px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 0 0 10px; color: #fff; background: #fff; font-size: 14px; line-height: 40px; display: -webkit-inline-box; } .encabezado { display: inline-block; margin: 0 1px; padding: 0 10px; line-height: 40px; background: #4d4dff; float: right; box-sizing: border-box; border-radius: 3px; font-weight: 500; } .rssticker a { color: #333; background: #fff; border-radius: 5px; margin: 0 10px; padding: 0 10px; float: right; text-decoration: none; font-size: 17px; font-weight: 400; } .rssticker a:hover { text-decoration: underline; color: #3560ab; } </style> <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>

4- إضغط حفظ وسوف يظهر معك الشريط إن شآء الله .. فقط هذا كل شيئ.

الطريقة الثانية ( شريط كتابة متحركة مع صورة كـ تنويه للمدونة )

طريقة التركيب : 

1- اذهب الى لوحة تحكم المدونة ثم التخطيط ثم إضافة أداة جديدة

2- إختر JavaScript

3- قم بلصق الكود التالي :

<marquee direction="right" style=" padding: 10px; background: #fff; color: #ff424d; font-size: 15px; font-weight: 500; width: 100%; height: auto; "> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinq8Y8VcofsIHhgcPm-gJRrUSJnaehKXCdeEF3ORsaS1ILJOZoeGl6_Ln8nhv8yLS_DX3dBZ10od0_E1RWSaVKSKgd0pYCY4EyrVuJ0zcn1CzcyvoVZONOSh_Cdnwhq6DH7yw0bsDVYkA/s1600/new.gif" style="padding: 0;margin: 0;height: auto;width: auto;" /> إمسح هذا الكلام وإستبدله هنا بالكلام أو التنويه المراد عرضه </marquee>

4- إضغط حفظ وسوف يظهر معك الشريط إن شآء الله .. فقط هذا كل شيئ.

الطريقة القديمة لـ إضافة شريط أحدث المواضيع متحرك

تنويه : 

( ربما لا تعمل ولكن قمنا بعدم حذف الكود للتجارب فقط ).

الخطوات : 

1- اذهب الى لوحة تحكم المدونة ثم التخطيط ثم اضافة اداة جديدة 

2- إختر JavaScript

3- قم بلصق الكود التالي :

<script type="text/javascript"> var w2bWidth="100"; var w2bScrollAmount="0.5"; var w2bScrollDelay="50"; var w2bDirection="right"; var w2btargetlink="yes"; var w2bnumPosts="5"; var w2bBulletchar =">>>"; var w2bimagebullet="yes"; var w2bimgurl="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinq8Y8VcofsIHhgcPm-gJRrUSJnaehKXCdeEF3ORsaS1ILJOZoeGl6_Ln8nhv8yLS_DX3dBZ10od0_E1RWSaVKSKgd0pYCY4EyrVuJ0zcn1CzcyvoVZONOSh_Cdnwhq6DH7yw0bsDVYkA/s1600/new.gif"; var w2bfontsize="16"; var w2bbgcolor="FFFFFF"; var w2blinkcolor="0033CC"; var w2blinkhovercolor="6600FF"; </script> <script src="http://sites.google.com/site/javacodehtml/recent-posts-comments-Scrolling-text.js" type="text/javascript"></script><script type="text/javascript" src="https://arab-hasry.blogspot.com/feeds/posts/default?alt=json-in-script&callback=w2bAdvRecentPostsScrollerv3&max-results=10"></script>

4- إضغط حفظ وسوف يظهر معك الشريط إن شآء الله .. فقط هذا كل شيئ.

شرح التعديل على الكود السابق :

عدد المواضيع التي تظهر في الشريط

var w2bnumPosts="5";

لون خلفية الشريط

var w2bbgcolor="FFFFFF";

عدد دورات الشريط

 var w2bScrollDelay="50";

 السرعة (كلما قلت القيمة زادت السرعة)

 var w2bScrollAmount="7";

 جهة الحركة

 var w2bDirection="right"; 

 اظهار صورة الفاصل

var w2bimagebullet="yes";

حجم الخط

var w2bfontsize="16";

 لون الرابط

var w2blinkcolor="0033CC"; 

 لون التأشير على الرابط

 var w2blinkhovercolor="6600FF"; 

 قم بتغيير رابط مدونتي برابط مدونتك وهو فى الكود

https://arab-hasry.blogspot.com