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

السلام عليكم

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

صورة عن الأداة

 مميزات الأداة:

- التحكم في سرعة الحركة

- التحكم في إتجاه حركة الأداة

- التحكم في عدد آخر المواضيع التي يتم عرضها

- إيقاف الحركة بمجرد تمرير مؤشر الماوس

- إمكانية وضع صورة (شعار المدونة) بين كل موضوع

- التحكم في الألوان

طريقة التثبيت

أولا قم بنسخ الكود التالي

<script type="text/javascript">
        var w2bWidth="100";
        var w2bScrollAmount="14";
        var w2bScrollDelay="50";
        var w2bDirection="right";
        var w2btargetlink="yes";
        var w2bnumPosts="10";
        var w2bBulletchar =">>>";
        var w2bimagebullet="yes";
        var w2bimgurl="http://im76.gulfup.com/y97UbL.png";
        var w2bfontsize="11";
        var w2bbgcolor="FFFFFF";
        var w2blinkcolor="444444";
        var w2blinkhovercolor="E34429";
    </script>
    <script src="http://sites.google.com/site/javacodehtml/recent-posts-comments-Scrolling-text.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://astu-tech.blogspot.com/feeds/posts/default?alt=json-in-script&callback=w2bAdvRecentPostsScrollerv3&max-results=10">
</script>

ما تستطيع تغييره في الأداة
قم بالتعديل في الكود كما يلي (أترك مالا تريد تغييره كما هو)

أولا قم بتغيير رابط مدونتنا (بالأحمر) إلى رابط مدونتك

w2bScrollAmount: سرعة الحركة

w2bScrollDelay:
  المدة الفاصلة قبل إعادة عرض المواضيع من جديد

w2bDirection:
  إتجاه الحركة، اكتب right إذا كانت مدونتك بالعربية و left إن كانت بلغة أجنبية

w2btargetlink:
  yes لفتح الموضوع في نافذة جديدة

w2bnumPosts:
  عدد آخر المواضيع التي يتم عرضها

w2bBulletchar:
  شكل الفاصلة، التي تفصل بين المواضيع ( الأولوية لإظهار الصورة، أي أنك إذا قمت بإختيار صورة كفاصلة فستظهر الصورة)

w2bimagebullet:
  yes لإظهار الفواصل و no لإخفائها

w2bimagebullet:
  الصورة الفاصلة، يمكنك صنع صورة من شعار مدونتك بالمقاس 35x15 px، ثم قم برفعها على أحد مواقع رفع الصور (gulfup مثلا) ثم قم بنسخ رابط الصورة و ضعه هنا
أو قم بحذف الرابط إذا أردت إظهار فواصل w2bBulletchar

w2bfontsize: حجم الخط

w2bbgcolor: لون الخلفية

w2blinkcolor: لون الخط

w2blinkhovercolor: لون الخط عند تمرير مؤشر الماوس

بعد هذه التغييرات على الكود، قم بنسخه و توجه إلى لوحة تحكم البلوجر الخاصة بمدونتك، ثم توجه إلى "تخطيط" أو Layout ثم قم بإضافة أداة

ثم HTML/ JavaScripte

ثم قم بلصق الكود، و من الأحسن ترك خانة العنوان فارغة، ثم قم بحفظ الأداة

ملاحظة: من الأحسن وضع الأداة تحت الهيدر.

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

• غرد
• شاركه
• شاركه
• شاركه
• شاركه

عن الكاتب - مصطفى محمد

موقع المحترف لشروحات البرامج هو عبار عن مدونة تقنية في عالم الانترنت العربي تحتوي على العديد من الدروس التعليمية التقتية و انظمة التشغيل اي او اس واندرويد على وجة الخصوص. مدير و مؤسس الموقع مصطفى محمد مبرمج تطبيقات اندرويد