البوم عدنا اليكم مجددا بدرس جديد وحصري عن كيفية اضافة سلايدر شو احترافي وتلقائي ويعرض آخر المواضيع كما انه سريع جدا ومن مميزات السلايدر أنه أنيق وسريع حيث قررت نشره بعد طلب بعض الاشخاص لما رأوه في قالب نيو بوك الذي نشرته في مكتبة المدون ولن اطيل عليكم الكلام لذى نمر الى المعاينة وشرح التركيب.
معاينة السلايدر
اضغط للمعاينة
شرح طريقة التركيب
- أول شيء قم بالذهاب الى تحرير قالب مدونتك
- ثم قم بوضع هذه الأكواد فوق الوسم ]]></b:skin>
/*main slider by nak1ha */
div#slider-wrpps .mag-thumb{ border-top: 4px solid #ff5722; height:450px}
div#slider-wrpps .mag-thumb a{ width:100%; display:block; height:100%}
#slider-wrpps li{ position:relative}
#slider-wrpps .mag-content{text-align:center; position:absolute; bottom:0; z-index:9; padding:29px; padding-top:37px; display:block; background-image:-webkit-linear-gradient(transparent,rgba(0,0,0,0.9)); background-image:-moz-linear-gradient(transparent,rgba(0,0,0,0.9)); background-image:linear-gradient(transparent,rgba(0,0,0,0.9)); overflow:hidden; vertical-align:middle; right:0; left:0}
}
#slider-wrpps h3.mag-title{ font-weight:100; font-size:19px}
#slider-wrpps h3.mag-title a{color: #fff; font-weight: 100; font-size: 20px; font-family: Ta3alamFont;}
#slider-wrpps .recent-meta{ margin-top:8px; margin-bottom:4px}
#slider-wrpps a.mag-tag{ position:absolute; top:12px; left:12px; color:#fff; padding:8px 10px; border-radius:3px; font-size:18px; display:-webkit-inline-box; z-index:99; background:#ff5722; font-family: Ta3alamFont;}
div#slider-wrpps{ margin-bottom: 8px;overflow:hidden ;position:relative;width:99;}
#slider-wrpps p.mag-sum:after{ content:"\f10d"; font-family:fontawesome; margin-right:4px}
#slider-wrpps p.mag-sum:before{ content:"\f10e"; font-family:fontawesome; margin-left:4px}
#slider-wrpps p.mag-sum{ color: #e6e6e6; font-size: 15px; font-family: Ta3alamFont;}
#slider-wrpps .recent-meta span.recent-author:before{ content:"\f007"; font-family:fontawesome; margin-left:5px; display:inline-block}
#slider-wrpps span.recent-date:before{ content:"\f017"; font-family:fontawesome; margin-left:5px; display:inline-block}
#slider-wrpps .recent-meta span{ color:#dcdcdc; font-size:15px; display:inline-block; margin-bottom:6px; margin-left:12px; font-family: Ta3alamFont;}
#slider-wrpps .owl-controls .owl-prev, #slider-wrpps .owl-controls .owl-next{ display: inline-block;
background: #ff5722;
width: 35px;
margin-top: 1px;
text-align: center;
color: #fff;
height: 35px;
line-height: 34px;
border-radius: 4px;
font-size: 20px;
margin-left: 5px;}
.slide-texte {
border-bottom: 3px solid #ff5722;
display: block;
text-align: center;
font-size: 21px;
line-height: 45px;
color: #FFFFFF;
border-radius: 4px;
font-weight: normal;
background: #1b1b23;
box-shadow: 0px 0px 5px -3px #000;
margin-bottom: 8px;
}
- ثاني خطوة وهي الاهم وهو عليك اختيار مكان مناسب لوضع السلايدر
- وافضل مكان هو فوق المشاركات
- ولمن لم يستطع تطبيق هذه الخطوة فباب التعليقات مفتوح وسنجيب في اسرع وقت
- وهذا هو الكود
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<a class='slide-texte'>سلايدر تلقائي</a>
<b:section class='slider-wrpps' id='slider-wrpps'>
<b:widget id='HTML111' locked='false' title='' type='HTML' version='1' visible='true'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</b:if>
- ثم بعد ذلك قم بوضع هذا الكود فوق الوسم </head>
<link href='https://cdn.rawgit.com/th3littleprof/elprof/master/ca.css' rel='stylesheet' type='text/css'/><script src='https://cdn.rawgit.com/th3littleprof/elprof/master/ca.js'/>
- أما الخطوة الأخيرة وهي عبارة عن اكواد الجافا سكريبت ويمكنك تحميل الأكواد من هنا
- وهي توضع فوق الوسم </body>
- ثم قم بحفظ العمل
- واخيرا عليك الانتقال الى التخطيط حيث ستجد اضافة جديدة
- قم بتحريرها وضع بها الكود التالي
[تسمية][sidebarcarousel]
- ثم غير تسمية بالتسمية التي تريدها وقم بعمل حفظ مجددا
- ومبروك عليك السلايدر
اذا كانت هذه اول زيارة لك للمدونة فلا تنسى الانضمام لمتابعتها من هنا ليصلك جديد المدونة
في أمان الله
واصل ...
ردحذفشكرا لك
حذفرائع *_* استمر
ردحذفشكرا .. زرنا مجددا
حذفعندما اضع التسمية وادهب لئرى السلايدر تضهر لي عاده
ردحذف---------------------------------------------------------------------------------------------
سلايدر تلقائي
---------------------------------------------------------------------------------------------
[افلام][sidebarcarousel]
رابط مدونتك لارى المشكل
حذفمرحبا كيف اتحكم في عدد المواضيع
ردحذفلا يوجد في السلايدر تحكم بعدد المواضيع
حذفاستمر
ردحذفاكواد الcss فيها مشاكل فالشكل والابعاد سئ جدا في عند إضافتها للقوالب
ردحذف