بناء على طلباتكم أطرح بين أيديكم سلايدر Nivo الاحترافي المستعمل في قالب تواصل، هذا السلايدر سيلبي حاجياتك من ناحية تقديم مواضيع مختارة بحسب التسمية سلس ومتناسق مع أي قالب كان كذلك إن كان قالبك متجاوب فسيتجاوب معه كذلك السلايدر
أظنني لست بحاجة لذكر شكله ومميزاته لأنكم سبق وتعرفتم عليه ولمن يريد أن يلقي نظرة على شكله مجددا وما يحتويه فليضغط على زر المعاينة
<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://www.mrt1mer.tk//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.mrt1mer.blogspot.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>
اتمنى أن لا تواجهوا اي مشاكل معه ولأي استفسار فباب التعليقات مفتوح، ولا تنسوا دعمنا بمشاركة التدوينة وميعادنا يتجدد في تدوينة آخرى إن شاء الله.
ليست هناك تعليقات:
إرسال تعليق
تذكر قوله تعالى:
(( مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ))
-----------------------------------
الان يمكنك اضافة اي مقطع فيديو الى التعليقات وايضا اضافة الصور فقط ضع رابط الصور او مقطع الفيديو في التعليقات
----------------------------------
آرائكم تسعدنا, لمتابعة التعليق حتى نرد عليك فقط ضع إشارة على إعلامي.