سلايد شو احترافي يعرض آخر المواضيع

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

شرح طريقة التركيب

أول شيء قم بالذهاب الى تحرير قالب مدونتك
ثم قم بوضع هذه الأكواد فوق الوسم ]]></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'>

<b:if cond='data:title != ""'>

</b:if>

<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>
ثم قم بحفظ العمل
واخيرا عليك الانتقال الى التخطيط حيث ستجد اضافة جديدة
قم بتحريرها وضع بها الكود التالي