العودة   منتديات عميد التعريب > >

الملاحظات

قوالب مدونات بلوجر Blogger و WordPress قوالب WordPress و Blogger و سكريبتات متنوعة



إضافة رد
 
أدوات الموضوع انواع عرض الموضوع

قديم 2017-09-02, 03:32 PM   رقم المشاركة :1
معلومات العضو
عميد
إضافة سلايدر شو تلقائي في السايدبار
إحصائية العضو




معدل تقييم المستوى: 9
سنفوري is on a distinguished road
المنتدى : قوالب مدونات بلوجر Blogger و WordPress
إضافة سلايدر شو تلقائي في السايدبار


منتديات عميد التعريب - المصدر الأول لتعريب البرامج و التطبيقات للعالم العربي




إضافة سلايدر شو تلقائي في السايدبار - في دروس سابقة لنا قمنا بالتعرف على أكثر من شكل للسلايدرات وأخرها كان

اضافة سلايدر شو تلقائي في بلوجر، اليوم سوف نقوم بإضافة سلايدر عامودي يقوم بعرض أحدث المقالات التي تم إضافتها للمدونة مؤخرًا بشكل تلقائي، ويتُم إضافته في السايدبار (الشريط الجانبي)، والمُميز أيضًا بهذه الإضافة أنّه يُمكنك عرض المواضيع حسب التسمية بمعنى (عرض مواضيع قسم مُعين)، والتحُكم بالإضافة بشكل كامل.


إضافة سلايدر شو تلقائي في السايدبار
  • ندخل لوحة تحكم بلوجر
  • نقوم بالأنتقال إلى قسم تخطيط
  • نضغط على إضافة أداة HTML/JavaScript
  • نقوم بلصق الكود التالي في الأداة
  • ثم نقوم بالحفظ

ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box }ul.rcentside{font-size:11px}ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative }ul.rcentside{width:100%;height:500px }ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none }ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block }ul.rcentside img{border:0;width:100%;height:auto}ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0 }ul.rcentside li:nth-child(2){left:0;top:50% }ul.rcentside li:nth-child(3){left:50.5%;top:50% }ul.rcentside li:nth-child(4){width:100%;left:0;top:75% }ul.rcentside .overlayx,ul.rcentside li{transition:all .4s ease-in-out }ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH...d-position:50% 50%;background-repeat:repeat-x }ul.rcentside .overlayx,ul.rcentside img{margin:3px}ul.rcentside li:nth-child(1).overlayx{background-position:50% 25% }ul.rcentside .overlayx:hover{opacity:.1 }ul.rcentside h4{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3s}ul.rcentside li:hover h4{bottom:30px}ul.rcentside li:nth-child(1)h4,ul.rcentside li:nth-child(4)h4{font-size:150% }ul.rcentside .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}ul.rcentside li:hover .label_text{bottom:20px;opacity:1}ul.rcentside li:nth-child(2).autname,ul.rcentside li:nth-child(3).autname{display:none }.buttons{margin:5px 0 0 }.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative }.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50% }.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px }



تعديلات الكود

blogURL: قم باسبتدال رابط الموضوع التالية http://www.aegygeek.com برابط مدونتك.
MaxPost: 8: هذا الوسم هو المسؤول عن عدد المواضيع التي سوف يتم عرضها.
ImageSize: 300: المسؤول عن حجم وأبعاد الصورة بالبكسل.
interval: 5000: الفاصل الزمني بين التنقل في المواضيع.
autoplay: وهو المسؤول عن عرض المواضيع بشكل تلقائي ولإيقافها قم باستبدال true بالكلمة التالية false.
tagName: وهو المسؤول عن عرض المواضيع حسب التسمية بحيث يجب عليك تغيير كلمة false باسم القسم الخاص بك.

أتمنى أنّ تكون الإضافة أعجبتكم بالتوفيق


سنفوري غير متواجد حالياً   رد مع اقتباس
إضافة رد

مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)
ul.rcentside, إضافة, السايدبار, المسؤول, المواضيع, تلقائي, سلايدر, شو, عرض, في

أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة



الساعة الآن 12:42 AM


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, vBulletin Solutions Inc.
Search Engine Optimisation provided by DragonByte SEO (Pro) - vBulletin Mods & Addons Copyright © 2019 DragonByte Technologies Ltd.
منتديات عميد التعريب 2010 - 2019