عرب حصرى

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

جدول محتوى المقال

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

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

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

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

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

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/AVvXsEh9gQejtUt7va2EM1eLxx9kM_CobXnZmodEE_Bmx65ReRgvBO0nsSC2e8N0tlWnfr36d6nrM8ZpLAjqAWpEfue-oGYOoR5ip8IcdBk6pGDDbsaavYYQ0kMRezcEMo_mBze2OgFcx7qWlsU/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/AVvXsEh9gQejtUt7va2EM1eLxx9kM_CobXnZmodEE_Bmx65ReRgvBO0nsSC2e8N0tlWnfr36d6nrM8ZpLAjqAWpEfue-oGYOoR5ip8IcdBk6pGDDbsaavYYQ0kMRezcEMo_mBze2OgFcx7qWlsU/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

الكاتب

Mohsen Abdo

الإنشاء

11 أبريل 2016

آخر تحديث

المشاهدات