زوار ومتابعي المدونة الكرام
أسعد الله أوقاتكم بكل خير ومحبة
أحبائي في درسنا اليوم سوف نتعرف على كيفية إضافة سلايد شو في قمة الأحترافي والجمال وهذه الإضافة تعمل بإضافة أي قسم من أقسام مدونتك .
- طريقة التركيب :
1- ادخل إلى مدونتك ثم اختر لوحة التحكم .
2- من لوحة التحكم اختر قالب ثم تحرير قالب .
3- ابحث عن الوسم :
<head>
4- ضع الكود التالي تحته .
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script> 5- بعد ذلك ابحث عن الوسم :
</head>
6- ضع الكود التالي فوقه .
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-nivoslider/3.2/jquery.nivo.slider.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(function () {
$(".recent-slider").each(function () {
$(this).append('<div id="slider"></div>');
var e = $(this).attr("data-label"),
n = "http://homeblog7.blogspot.com/feeds/posts/summary/-/" + e + "?max-results=" + 5 + "&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> - ابحث بالكود عن رابط مدونتنا واستبدله برابط مدونتك .
7- أيضاً ابحث عن الوسم :
]]>
8- ضع الكود التالي فوقه .
.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 'segoe ui',sans-serif;margin:10px 20px;padding:10px;display:inline-block;border-radius:4px;background:#222;line-height:21px}.nivo-caption a{color:#ecf0f1}.nivo-caption h3{text-align:center;padding:5px;display:inline-block;border-radius:5px;margin:0;line-height:37px!important;background:#e74c3c;font:400 30px 'segoe ui',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:5px;line-height:30px!important;background-color:rgba(255,255,255,.5);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:100;position:absolute;top:10px;right:10px;font-size:0}.nivo-controlNav a{cursor:pointer;display:block;width:20px;height:20px;background:#222;float:left;border-radius:10px;margin-right:5px}.nivo-controlNav a.active{background:#e74c3c} 9- بعد ذلك ادخل إلى تخطيط ثم اختر إضافة أداة : HTML/JavaScript
10- اضف الكود التالي في صندوق الأدة ثم إحفظ .
<div class='recent-slider' data-label='قوالب بلوجر'></div> - استبدل كلمة " قوالب بلوجر " بتسمية أي قسم من أقسام مدونتك .
صندوق التعليقات ملك لك أسأل ما تشاء
0 Comments:
إرسال تعليق