أظنني لست بحاجة لذكر شكله ومميزاته لأنكم سبق وتعرفتم عليه ولمن يريد أن يلقي نظرة على شكله مجددا وما يحتويه فليضغط على زر المعاينة
1. ابحث عن </head> ثم ضع الكود التالي فوقه
<script src='//cdn.rawgit.com/iHussam/ar1web/master/nivoslider.js' type='text/javascript'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
//<![CDATA[
$(function () {
$(".recent-slider").each(function () {
$(this).append('<div id="slider"></div>');
var e = $(this).attr("data-label"),
n = "http://tawasol-1.blogspot.com//feeds/posts/summary/-/" + e + "?max-results=" + 6 + "&alt=json-in-script",
l = $(this);
$.ajax({
type: "GET",
url: n,
async: true,
contentType: "application/json",
dataType: "jsonp",
success: function (s) {
for (var r = 0; r < s.feed.entry.length; r++) {
for (var n = s.feed.entry[r], i = 0; i < n.link.length; i++)
if ("alternate" == n.link[i].rel) {
var o = n.link[i].href;
break
}
try {
var c = n.media$thumbnail.url.replace("s72-c", "h300-w1200-no")
} catch (p) {
var c = "https://lh3.googleusercontent.com/24RAodFW8xxgzHpVBAthJHsf_szjRoa3-KzlAEdFgB6X6A5Gmlm-nCvt5nRkE95T52PmHSE4Mf5wvNGoRUgIXjjHi4PjiucY3RimpoVdiTPKQN5Jdj2n9-9bW0wUSzQcirYstqGO8Unv5v7RMU5JD_Q-lEuBgtUfXEmHxOs6ENvJBanzORTRCVXwSzYNRJxijualu8mHhR5S6DG8l4CIo6uADoudrzXGsz7oszRXccZK_FbasxG5xJ9O0mtPuIVavRO8Or89er61NiJIctiUWV0YqtMMOqK214VSjs8-lAx_7LmkneNOrkP7NdXvGTK0fxHgRBiHL7Tm2weLM33LjyMEzY4ygL68Hx81iJK4D-YRmUa8NJhpEKs8q93jgjwJ3ZrgDSzn2pKI-y3c5VWrYf-H38_lWOIMf7uuTOzKUOqoQYZLN8bhFYVyB4bLUwfX0gDtTT38QsV6MILDBQZl6gHQrHt1C8Lpp9EZ0x-1Vl2r2HeKlXS60iuRKZdfSWZNbibE2y9GCfdbBzRUGa-G3GRkQstDu2UBtNOo6WHZ4GI=w600-h250-no"
}
var d = n.title.$t,
u = n.summary.$t.substr(0, 180),
h = '<a href="' + o + '"><img src="' + c + '" title="<a href=\'' + o + "'><h3>" + d + "</h3></a><p>" + u + '</p>"/></a>';
l.find("#slider").append(h)
}
$("#slider").nivoSlider({
effect: "random",
pauseTime: 5e3
})
}
})
})
});
//]]>
</script>
</b:if>
* إذا أردت أن يظهر السلايدر في جميع الصفحات أحذف الكود الأول المحدد بالأحمر وكذلك نهايته في آخر الكود
2. ابحث عن ]]></b:skin> ثم ضع الكود التالي فوقه
/* Nivo Slider www.ar1web.com */
.recent-slider {text-shadow: 0 1px 0 rgba(0,0,0,0.15);padding-left: 5px; padding-right: 1px; margin:0 auto;width: auto;}
.nivoSlider,.top-l-slider .nivoSlider{width:100%;text-align:Center;overflow:hidden}
.nivo-box,.nivoSlider{overflow:hidden}.nivoSlider{position:relative;height:300px}
.nivoSlider img{position:absolute;top:0;left:0;max-width:none;height:300px!important}
.top-l-slider .nivoSlider{position:relative;height:400px}
.top-l-slider .nivoSlider img{position:absolute;top:0;left:0;max-width:none;height:400px!important}
.nivo-main-image{display:block!important;position:relative!important;width:100%!important}
.nivoSlider a.nivo-imageLink{position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none;background:#fff;filter:alpha(opacity=0);opacity:0}
.nivo-box,.nivo-slice{z-index:5;position:absolute}
.nivo-box,.nivo-box img,.nivo-caption,.nivo-slice{display:block}
.nivo-slice{height:100%;top:0}.nivo-caption{position:absolute;bottom:10px;left:5%;width:90%;text-align:center;font:400 26px tahoma,sans-serif;z-index:8;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:#fff}
.nivo-caption p{text-align:Center;font:400 13px tahoma,sans-serif;margin:10px 20px;padding:10px;display:inline-block;border-radius:1px;background:rgba(34, 34, 34, 0.83);line-height:21px}.nivo-caption a{color:#ecf0f1}.nivo-caption h3{text-align:center;padding:5px;display:inline-block;border-radius:1px;margin:0;line-height:37px!important;background:#47cf73 ;font:400 20px tahoma,sans-serif}
.nivo-caption .sliderdata{margin:10px;text-align:Center;color:#fff}
.nivo-html-caption{display:none}.nivo-directionNav a{position:absolute;top:50%;margin-top:-15px;z-index:9;font-size:0;display:block;width:30px;height:30px;border-radius:1px;line-height:30px!important;background-color:rgba(255, 255, 255, 0.28);cursor:pointer;box-shadow:1px 1px 1px rgba(0,0,0,.4);-moz-box-shadow:1px 1px 1px rgba(0,0,0,.4);-webkit-box-shadow:1px 1px 1px rgba(0,0,0,.4)}
.nivo-prevNav{left:10px}
.nivo-nextNav:before,.nivo-prevNav:before{position:Absolute;left:0;top:0;color:#fff;height:30px;width:30px;text-align:center;z-index:100;display:block}.nivo-prevNav:before{content:'\2190';font:400 20px sans-serif;line-height:30px!important}
.nivo-nextNav:before{content:'\2192';font:400 20px sans-serif;line-height:30px!important}.nivo-nextNav{right:10px}.nivo-controlNav{text-align: center; z-index: 9; position: relative; bottom: 290px; font-size: 0;}.nivo-controlNav a{cursor: pointer; display: block; width: 10px; height: 10px; background: #FFF; float: right; border-radius: 10px; margin-right: 5px;}.nivo-controlNav a.active{background:#47cf73}
* إذا واجهك مشكل في عرض السلايدر يمكنك التعديل على المقاس باضافة مثلا 500px بدل auto المحدده بالبرتقالي وغير الرقم حسب ما يناسك
3. قم بحفظ النموذج وتوجه إلى التخطيط
4. اضف أداة Html/Javascript وضع بها الكود التالي
<div class="recent-slider" data-label="بلوجر">
</div>
اتمنى أن لا تواجهوا اي مشاكل معه ولأي استفسار فباب التعليقات مفتوح، ولا تنسوا دعمنا بمشاركة التدوينة وميعادنا يتجدد في تدوينة آخرى إن شاء الله.