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

الملاحظات

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



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

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




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


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

<div dir="rtl" style="text-align: right;" trbidi="on">







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



معاينة

كيفية اضافة سلايدر شو تلقائي في بلوجر

  • ادخل لوحة تحكم بلوجر.
  • انقر على تبويب قالب.
  • ثم اضغط على زر تحرير HTML.
ابحث عن الوسم ]]> و اضف الكود التالي فوقه
/* Slider *
.blog_featured_posts {display: inline-block;width: 100%;margin-top: 0px;margin-bottom: 4px;}
.blog_featured_post {display: block;position: relative;float: right;overflow: hidden;height:334px;}
.blog_featured_post.first {width: 43%;margin-left: 9px;}
.blog_featured_post.second {width: 20.79%;margin-left: 9px;}
.blog_featured_post.third, .blog_featured_post.fourth {width: 34.126%;height:163px;}
.blog_featured_post.third {margin-bottom: 9px;}
.blog_featured_post a {display: block;color: rgb(255, 255, 255);text-shadow: rgba(0, 0, 0, 0.498039) 0px 1px 1px;position: relative;vertical-align: bottom;z-index: 1;height:100%;}
.blog_featured_post a:hover:before {opacity: 0.6;box-shadow: inset 0px -3px 200px 5px #000;}
.blog_featured_post a:before {display: block;position: absolute;content: '';right: 0px;top: 0px;width: 100%;height: 100%;box-shadow: inset 0px -3px 300px 5px #000;opacity: 0.5;-webkit-transition: all 0.2s;transition: all 0.2s;}
.blog_featured_post a .blog_contents {display: block;position: absolute;z-index: 5;bottom: 30px;right: 30px;left: 30px;font-weight:bold;text-transform: uppercase;line-height: 120%;-webkit-transition: all 0.2s;transition: all 0.2s;font-family: droid arabic kufi, sans-serif;}
.blog_contents span {font-style: normal;display: block;position: absolute;bottom: 100%;padding: 5px 10px;letter-spacing: 0px;font-size: 11px;line-height: 1;text-shadow: none;margin-bottom: 10px;background: #f58220;}
.blog_contents span:after {content: "";border-style: solid;border-width: 21px 7px 21px;border-color: transparent;border-bottom-color: #f58220;left: -7px;bottom: 0;position: absolute;}
.blog_contents span:before {content: "";border-style: solid;border-width: 21px 7px 21px;border-color: transparent;border-top-color: #f58220;right: -7px;top: 0;position: absolute;}
.blog_featured_post a .blog_contents h3 {text-shadow: 2px 2px 4px black;padding: 8px 10px 9px;text-align: right;float: right;display: inline-block;background: rgba(0, 0, 0, 0.5) none repeat scroll 0% 0%;width:114%;opacity: 0.9;font-size:12px;font-weight:700;margin-right: -30px;}
.blog_featured_post.first a .blog_contents h3 {text-shadow:2px 2px 4px black;padding: 8px 10px 9px;text-align:right;float:right;display:inline-block;background:rgba(0, 0, 0, 0.5) none repeat scroll 0% 0%;width:100%;opacity: 0.9;font-size:12px;font-weight:700;margin-right:-30px;}
.blog_featured_post .feat-img{width:100%;height:100%;background-size:cover;background-position:50%;}
ابحث عن الوسم و اضف الكود التالي فوقه

الكود الثالث وهو الخاص بعرض السلايدر في الموضوع ويُمكنك وضعه في المكان الذي يُناسبك.
لكنّ أفضل مكان هو فوق المواضيع مُباشرًة لذلك ابحث عن الوسم و اضف الكود التالي فوقه








السلايدر قد يختلف حجمه على حسب حجم القالب الذي تستخدمه.
إذا واجهت صعوبة في تركيب السلايدر أترك تعليق وسوف اقوم بالدخول إلى مدونتك واعطائك المقاسات المُناسبة.


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

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

الكلمات الدلالية (Tags)
.blog_contents, .blog_featured_post, display, اضافة, السلايدر, بلوجر, تلقائي, سلايدر, شو, في

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

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

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



الساعة الآن 04:54 PM


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