بسم الله الرحمن الرحيم والصلاة والسلام علي اشرف المرسلي سيدنا ومولانا حمد اما بعد موضوعنا اليوم علي مدونة بروتك هو كيفية اضافة سلايد شو احترافي بتقنية css فقط وحصريا علي بروتك
كيفية الاضافة
- افتح بلوجر اضغط علي قالب
- ثم تحرير HTML
- ثم ابحث عن الوسم ]]></b:skin> ثم ضع الكود التالي فوقه او ضعه بين <style></style> فوق </head>
/* السلايدر */
.recent-slider {padding-left: 5px; padding-right: 1px; margin:0 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 'segoe ui',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:#313B42;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:#3498db ;font:400 20px 'neo sans',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:#2D88C5;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:#2D88C5}
- ثم اضف هذا الكود في اي مكان تريده
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<b:section class='stylebox2 section' id='stylebox-5' maxwidgets='1' name='السلايدر' showaddelement='yes'>
<b:widget id='HTML6' locked='false' title='' type='HTML' 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></b:if>
- ثم اضف هذا الكود فوق <head/>
<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://th3pro-tk.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>
وغير الرابط الذي لونة احمر برابط مدونتك
- وبعد ذالك افتح التخطيط ستجد اداة جديدة
- اسمها سلايدر اضغط علي تحرير اضف هذا الكود
<div class='recent-slider' data-label='أعمالنا'></div>
وغير اسم أعمالنا للاسم الذي تريدة والسلام عليكم ورحمة الله وبركاتة

تعليقات: 0
إرسال تعليق