جدول محتوى المقال
نقدم لكم اليوم افضل سلايدر شو احترافى يقوم بعرض مواضيع المدونة من خلال قسم معين مع صور المواضيع تلقائيا.
تم تعديل تصميم السلايدشو ليتناسب مع جميع المستخدمين وجميع الشاشات سواء كمبيوتر او تابلت او موبايل ، والان اليكم الأكواد الخاصه بالسلايدر مع شرح بالفيديو كيفية تركيب الاكواد داخل قالب مدونة بلوجر والتعديل عليها من تنسيق المدونة.
شرح التركيب والأكواد
إبحث عن المكان المراد ظهور السلايدرشو على المدونة الخاص بك من خلال (فحص العنصر) ثم إنسخ الكلاس او اى دي لعنصر او اداة قريبة من المكان الذى تريد ظهور السلايدشو فيه ثم إذهب الى قالب المدونة وابحث عن الكود الذى قمت بنسخه.
شرح كيفية فعل ذلك
إدخل الى (لوحة مدونة بلوجر الرئيسية) ثم الى (المظهر) ثم (اضغط على السهم بجانب الزر) ثم إختر (تحرير HTML).
إدخل الى تحرير اكواد القالب ثم اضغط فى اى مكان فارغ داخل الكود ثم اضغط من لوحة المفاتيح Ctrl + F لفتح البحث داخل اكواد القالب ثم ابحث عن الكود الذى قمت بنسخه (الخاص بأى آداة قريبة للمكان المراد ظهور السلايدر فيه) ثم اضغط (إنتر) للبحث عن الكود وعند إيجاد الكود قم بالنزول أسفله (او أعلاه "على حسب المكان الذى تريده") ثم ضع أكواد الـ HTML الخاصة بالسلايدشو التالية.
HTML
<!-- Start SliderShow -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section id='SliderShow' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML10' locked='false' title='' type='HTML' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'><div class='slider-show'>
<div class='recent-slider' data-label='إسم القسم المراد عرضه داخل السلايدشو هنا'/>
</div></div></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='widget-title'/>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</b:if>
<!-- End SliderShow -->
شرح كيفية فعل ذلك
إدخل الى (لوحة مدونة بلوجر الرئيسية) ثم الى (المظهر) ثم (اضغط على السهم بجانب الزر) ثم إختر (تحرير HTML).
إدخل الى تحرير اكواد القالب ثم اضغط فى اى مكان فارغ داخل الكود ثم اضغط من لوحة المفاتيح Ctrl + F لفتح البحث داخل اكواد القالب ثم اكتب الكود ]]></b:skin> ثم اضغط (إنتر) للبحث عن الكود وعند إيجاد الكود ضع فوقه (أعلاه) الأكواد الستايل التالية.
CSS
/* Start SliderShow */
.slider-show {
padding: 0;
margin: 0;
background: #ffffff;
border-radius: 3px;
border: 1px solid #d2d2d2;
overflow: hidden;
margin-bottom: 14px;
}
.darkmode .slider-show {
background: #181818;
border: 1px solid #2a2a2a;
}
.recent-slider {
width: 100%;
height: 435px;
overflow: hidden;
margin-bottom: -55px;
}
#slider {
width: 80%;
height: 350px;
padding: 0;
margin: 0 10%;
border-color: #ffffff;
border-style: solid;
border-width: 0 0 53px;
box-shadow: 0 0 2px #d2d2d2;
position: relative;
overflow: hidden;
margin-top: 14px;
}
.darkmode #slider {
border-color: #2a2a2a;
box-shadow: none;
}
.nivoSlider {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
}
.nivoSlider img {
position: relative;
top: 0px;
left: 0px;
max-width: none;
height: auto !important;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
.nivoSlider a {
border: 0;
display: block;
}
.nivoSlider a.nivo-imageLink {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
z-index: 6;
display: none;
background: white;
filter: alpha(opacity=0);
opacity: 0;
}
.nivo-slice {
display: block;
position: absolute;
z-index: 5;
height: 100%;
top: 0;
}
.nivo-box {
display: block;
position: absolute;
z-index: 5;
overflow: hidden;
}
.nivo-box img {
display: block;
}
.nivo-caption {
position: absolute;
top: -20px;
width: 100%;
z-index: 8;
/* opacity: 0.8; */
display: none;
-moz-opacity: 0.8;
filter: alpha(opacity=8);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
left: 0;
right: 0;
text-align: center;
padding: 0;
margin: 0;
text-transform: capitalize;
line-height: 24px;
letter-spacing: 0.3px;
overflow: hidden;
color: #000;
}
.nivo-caption p {
display: none;
}
.nivo-caption a {
display: inline-block;
}
.nivo-caption a:hover {
text-decoration: none;
}
.nivo-caption a h3 {
position: relative;
left: 0;
top: 5px;
border: none;
background-color: rgba(0, 0, 0, .9);
color: #FFF;
padding: 10px 10px 13px;
font-size: 17px;
z-index: 2;
border-radius: 6px;
}
.nivo-html-caption {
display: none;
}
.nivo-controlNav {
position: relative;
top: -9.5%;
padding: 0;
margin: 0;
text-align: center;
}
.nivo-controlNav a {
display: inline-block;
background-color: #F6F6F6;
color: #333;
font-weight: bold;
height: 28px;
width: 28px;
border-radius: 4px;
margin: 0 2px;
line-height: 28px;
cursor: pointer;
text-decoration: none;
}
.nivo-controlNav a.active {
font-weight: bold;
background: #009688;
color: #fff;
}
.nivo-directionNav a {
display: flex;
position: absolute;
top: 87%;
padding: 5px 15px;
margin: 0;
cursor: pointer;
text-decoration: none;
background-color: #009688;
color: #fff;
border: 3px solid rgb(0 0 0 / 6%);
font-weight: 500;
z-index: 9;
}
.nivo-nextNav:before {
content: "\f054";
font-family: fontawesome;
display: flex;
position: relative;
top: 4px;
right: -8px;
padding: 0;
margin: 0;
background-color: transparent;
color: #fff;
}
.nivo-prevNav:after {
content: "\f053";
font-family: fontawesome;
display: flex;
position: relative;
float: left;
top: 4px;
left: -8px;
padding: 0;
margin: 0;
background-color: transparent;
color: #fff;
}
.nivo-nextNav {
float: right;
right: 1px;
border-radius: 4px 0 0 0;
}
.nivo-prevNav {
float: left;
left: 1px;
border-radius: 0 4px 0 0;
}
/* End SliderShow */
شرح كيفية فعل ذلك
إدخل الى (لوحة مدونة بلوجر الرئيسية) ثم الى (المظهر) ثم (اضغط على السهم بجانب الزر) ثم إختر (تحرير HTML).إدخل الى تحرير اكواد القالب ثم اضغط فى اى مكان فارغ داخل الكود ثم اضغط من لوحة المفاتيح Ctrl + F لفتح البحث داخل اكواد القالب ثم اكتب الكود ]]></b:skin> ثم اضغط (إنتر) للبحث عن الكود وعند إيجاد الكود قم بالنزول أسفله ثم ضع أكواد الـ JavaScript التالية.ملحوظة: بيتم وضع السكربتين فى السكربتات الخاصة بالهيد </head> وليس فى السكربتات الخاصة بالبودى </body> اي يمكنك البحث عن </head> ثم وضعهم اسفل اغلاق الستايل ]]></b:skin>
JavaScript
<!-- Start SliderShow -->
<script>
//<![CDATA[
// SliderShow
(function(e) {
var t = function(t, n) {
var i = e.extend({}, e.fn.nivoSlider.defaults, n),
r = {
currentSlide: 0,
currentImage: "",
totalSlides: 0,
running: !1, // !1 = Enable Control Buttons | !0 = Disable Control Buttons
paused: !1,
stop: !1, // !1 = Enable Autoplay | !0 = Disable Autoplay
controlNavEl: !1
},
o = e(t);
o.data("nivo:vars", r).addClass("nivoSlider");
var a = o.children();
a.each(function() {
var t = e(this),
n = "";
t.is("img") || (t.is("a") && (t.addClass("nivo-imageLink"), n = t), t = t.find("img:first"));
var i = 0 === i ? t.attr("width") : t.width(),
o = 0 === o ? t.attr("height") : t.height();
"" !== n && n.css("display", "none"), t.css("display", "none"), r.totalSlides++
}), i.randomStart && (i.startSlide = Math.floor(Math.random() * r.totalSlides)), i.startSlide > 0 && (i.startSlide >= r.totalSlides && (i.startSlide = r.totalSlides - 1), r.currentSlide = i.startSlide), r.currentImage = e(a[r.currentSlide]).is("img") ? e(a[r.currentSlide]) : e(a[r.currentSlide]).find("img:first"), e(a[r.currentSlide]).is("a") && e(a[r.currentSlide]).css("display", "block");
var s = e("<img/>").addClass("nivo-main-image");
s.attr("src", r.currentImage.attr("src")).show(), o.append(s), e(window).resize(function() {
o.children("img").width(o.width()), s.attr("src", r.currentImage.attr("src")), s.stop().height("auto"), e(".nivo-slice").remove(), e(".nivo-box").remove()
}), o.append(e('<div class="nivo-caption"></div>'));
var l = function(t) {
var n = e(".nivo-caption", o);
if ("" != r.currentImage.attr("title") && void 0 != r.currentImage.attr("title")) {
var i = r.currentImage.attr("title");
"#" == i.substr(0, 1) && (i = e(i).html()), "block" == n.css("display") ? setTimeout(function() {
n.html(i)
}, t.animSpeed) : (n.html(i), n.stop().fadeIn(t.animSpeed))
} else n.stop().fadeOut(t.animSpeed)
};
l(i);
var c = 0;
if (!i.manualAdvance && a.length > 1 && (c = setInterval(function() {
f(o, a, i, !1)
}, i.pauseTime)), i.directionNav && (o.append('<div class="nivo-directionNav"><a class="nivo-prevNav">' + i.prevText + '</a><a class="nivo-nextNav">' + i.nextText + "</a></div>"), e(o).on("click", "a.nivo-prevNav", function() {
return r.running ? !1 : (clearInterval(c), c = "", r.currentSlide -= 2, f(o, a, i, "prev"), void 0)
}), e(o).on("click", "a.nivo-nextNav", function() {
return r.running ? !1 : (clearInterval(c), c = "", f(o, a, i, "next"), void 0)
})), i.controlNav) {
r.controlNavEl = e('<div class="nivo-controlNav"></div>'), o.after(r.controlNavEl);
for (var u = 0; a.length > u; u++)
if (i.controlNavThumbs) {
r.controlNavEl.addClass("nivo-thumbs-enabled");
var d = a.eq(u);
d.is("img") || (d = d.find("img:first")), d.attr("data-thumb") && r.controlNavEl.append('<a class="nivo-control" rel="' + u + '"><img src="' + d.attr("data-thumb") + '" alt="" /></a>')
} else r.controlNavEl.append('<a class="nivo-control" rel="' + u + '">' + (u + 1) + "</a>");
e("a:eq(" + r.currentSlide + ")", r.controlNavEl).addClass("active"), e("a", r.controlNavEl).bind("click", function() {
return r.running ? !1 : e(this).hasClass("active") ? !1 : (clearInterval(c), c = "", s.attr("src", r.currentImage.attr("src")), r.currentSlide = e(this).attr("rel") - 1, f(o, a, i, "control"), void 0)
})
}
i.pauseOnHover && o.hover(function() {
r.paused = !0, clearInterval(c), c = ""
}, function() {
r.paused = !1, "" !== c || i.manualAdvance || (c = setInterval(function() {
f(o, a, i, !1)
}, i.pauseTime))
}), o.bind("nivo:animFinished", function() {
s.attr("src", r.currentImage.attr("src")), r.running = !1, e(a).each(function() {
e(this).is("a") && e(this).css("display", "none")
}), e(a[r.currentSlide]).is("a") && e(a[r.currentSlide]).css("display", "block"), "" !== c || r.paused || i.manualAdvance || (c = setInterval(function() {
f(o, a, i, !1)
}, i.pauseTime)), i.afterChange.call(this)
});
var h = function(t, n, i) {
e(i.currentImage).parent().is("a") && e(i.currentImage).parent().css("display", "block"), e('img[src="' + i.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").width(t.width()).css("visibility", "hidden").show();
for (var r = e('img[src="' + i.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").parent().is("a") ? e('img[src="' + i.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").parent().height() : e('img[src="' + i.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").height(), o = 0; n.slices > o; o++) {
var a = Math.round(t.width() / n.slices);
o === n.slices - 1 ? t.append(e('<div class="nivo-slice" name="' + o + '"><img src="' + i.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block !important; top:0; left:-" + (a + o * a - a) + 'px;" /></div>').css({
left: a * o + "px",
width: t.width() - a * o + "px",
height: r + "px",
opacity: "0",
overflow: "hidden"
})) : t.append(e('<div class="nivo-slice" name="' + o + '"><img src="' + i.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block !important; top:0; left:-" + (a + o * a - a) + 'px;" /></div>').css({
left: a * o + "px",
width: a + "px",
height: r + "px",
opacity: "0",
overflow: "hidden"
}))
}
e(".nivo-slice", t).height(r), s.stop().animate({
height: e(i.currentImage).height()
}, n.animSpeed)
},
p = function(t, n, i) {
e(i.currentImage).parent().is("a") && e(i.currentImage).parent().css("display", "block"), e('img[src="' + i.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").width(t.width()).css("visibility", "hidden").show();
for (var r = Math.round(t.width() / n.boxCols), o = Math.round(e('img[src="' + i.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").height() / n.boxRows), a = 0; n.boxRows > a; a++)
for (var l = 0; n.boxCols > l; l++) l === n.boxCols - 1 ? (t.append(e('<div class="nivo-box" name="' + l + '" rel="' + a + '"><img src="' + i.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block; top:-" + o * a + "px; left:-" + r * l + 'px;" /></div>').css({
opacity: 0,
left: r * l + "px",
top: o * a + "px",
width: t.width() - r * l + "px"
})), e('.nivo-box[name="' + l + '"]', t).height(e('.nivo-box[name="' + l + '"] img', t).height() + "px")) : (t.append(e('<div class="nivo-box" name="' + l + '" rel="' + a + '"><img src="' + i.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block; top:-" + o * a + "px; left:-" + r * l + 'px;" /></div>').css({
opacity: 0,
left: r * l + "px",
top: o * a + "px",
width: r + "px"
})), e('.nivo-box[name="' + l + '"]', t).height(e('.nivo-box[name="' + l + '"] img', t).height() + "px"));
s.stop().animate({
height: e(i.currentImage).height()
}, n.animSpeed)
},
f = function(t, n, i, r) {
var o = t.data("nivo:vars");
if (o && o.currentSlide === o.totalSlides - 1 && i.lastSlide.call(this), (!o || o.stop) && !r) return !1;
i.beforeChange.call(this), r ? ("prev" === r && s.attr("src", o.currentImage.attr("src")), "next" === r && s.attr("src", o.currentImage.attr("src"))) : s.attr("src", o.currentImage.attr("src")), o.currentSlide++, o.currentSlide === o.totalSlides && (o.currentSlide = 0, i.slideshowEnd.call(this)), 0 > o.currentSlide && (o.currentSlide = o.totalSlides - 1), o.currentImage = e(n[o.currentSlide]).is("img") ? e(n[o.currentSlide]) : e(n[o.currentSlide]).find("img:first"), i.controlNav && (e("a", o.controlNavEl).removeClass("active"), e("a:eq(" + o.currentSlide + ")", o.controlNavEl).addClass("active")), l(i), e(".nivo-slice", t).remove(), e(".nivo-box", t).remove();
var a = i.effect,
c = "";
"random" === i.effect && (c = ["sliceDownRight", "sliceDownLeft", "sliceUpRight", "sliceUpLeft", "sliceUpDown", "sliceUpDownLeft", "fold", "fade", "boxRandom", "boxRain", "boxRainReverse", "boxRainGrow", "boxRainGrowReverse"], a = c[Math.floor(Math.random() * (c.length + 1))], void 0 === a && (a = "fade")), -1 !== i.effect.indexOf(",") && (c = i.effect.split(","), a = c[Math.floor(Math.random() * c.length)], void 0 === a && (a = "fade")), o.currentImage.attr("data-transition") && (a = o.currentImage.attr("data-transition")), o.running = !0;
var u = 0,
d = 0,
f = "",
m = "",
v = "",
b = "";
if ("sliceDown" === a || "sliceDownRight" === a || "sliceDownLeft" === a) h(t, i, o), u = 0, d = 0, f = e(".nivo-slice", t), "sliceDownLeft" === a && (f = e(".nivo-slice", t)._reverse()), f.each(function() {
var n = e(this);
n.css({
top: "0px"
}), d === i.slices - 1 ? setTimeout(function() {
n.animate({
opacity: "1.0"
}, i.animSpeed, "", function() {
t.trigger("nivo:animFinished")
})
}, 100 + u) : setTimeout(function() {
n.animate({
opacity: "1.0"
}, i.animSpeed)
}, 100 + u), u += 50, d++
});
else if ("sliceUp" === a || "sliceUpRight" === a || "sliceUpLeft" === a) h(t, i, o), u = 0, d = 0, f = e(".nivo-slice", t), "sliceUpLeft" === a && (f = e(".nivo-slice", t)._reverse()), f.each(function() {
var n = e(this);
n.css({
bottom: "0px"
}), d === i.slices - 1 ? setTimeout(function() {
n.animate({
opacity: "1.0"
}, i.animSpeed, "", function() {
t.trigger("nivo:animFinished")
})
}, 100 + u) : setTimeout(function() {
n.animate({
opacity: "1.0"
}, i.animSpeed)
}, 100 + u), u += 50, d++
});
else if ("sliceUpDown" === a || "sliceUpDownRight" === a || "sliceUpDownLeft" === a) {
h(t, i, o), u = 0, d = 0;
var y = 0;
f = e(".nivo-slice", t), "sliceUpDownLeft" === a && (f = e(".nivo-slice", t)._reverse()), f.each(function() {
var n = e(this);
0 === d ? (n.css("top", "0px"), d++) : (n.css("bottom", "0px"), d = 0), y === i.slices - 1 ? setTimeout(function() {
n.animate({
opacity: "1.0"
}, i.animSpeed, "", function() {
t.trigger("nivo:animFinished")
})
}, 100 + u) : setTimeout(function() {
n.animate({
opacity: "1.0"
}, i.animSpeed)
}, 100 + u), u += 50, y++
})
} else if ("fold" === a) h(t, i, o), u = 0, d = 0, e(".nivo-slice", t).each(function() {
var n = e(this),
r = n.width();
n.css({
top: "0px",
width: "0px"
}), d === i.slices - 1 ? setTimeout(function() {
n.animate({
width: r,
opacity: "1.0"
}, i.animSpeed, "", function() {
t.trigger("nivo:animFinished")
})
}, 100 + u) : setTimeout(function() {
n.animate({
width: r,
opacity: "1.0"
}, i.animSpeed)
}, 100 + u), u += 50, d++
});
else if ("fade" === a) h(t, i, o), m = e(".nivo-slice:first", t), m.css({
width: t.width() + "px"
}), m.animate({
opacity: "1.0"
}, 2 * i.animSpeed, "", function() {
t.trigger("nivo:animFinished")
});
else if ("slideInRight" === a) h(t, i, o), m = e(".nivo-slice:first", t), m.css({
width: "0px",
opacity: "1"
}), m.animate({
width: t.width() + "px"
}, 2 * i.animSpeed, "", function() {
t.trigger("nivo:animFinished")
});
else if ("slideInLeft" === a) h(t, i, o), m = e(".nivo-slice:first", t), m.css({
width: "0px",
opacity: "1",
left: "",
right: "0px"
}), m.animate({
width: t.width() + "px"
}, 2 * i.animSpeed, "", function() {
m.css({
left: "0px",
right: ""
}), t.trigger("nivo:animFinished")
});
else if ("boxRandom" === a) p(t, i, o), v = i.boxCols * i.boxRows, d = 0, u = 0, b = g(e(".nivo-box", t)), b.each(function() {
var n = e(this);
d === v - 1 ? setTimeout(function() {
n.animate({
opacity: "1"
}, i.animSpeed, "", function() {
t.trigger("nivo:animFinished")
})
}, 100 + u) : setTimeout(function() {
n.animate({
opacity: "1"
}, i.animSpeed)
}, 100 + u), u += 20, d++
});
else if ("boxRain" === a || "boxRainReverse" === a || "boxRainGrow" === a || "boxRainGrowReverse" === a) {
p(t, i, o), v = i.boxCols * i.boxRows, d = 0, u = 0;
var x = 0,
w = 0,
k = [];
k[x] = [], b = e(".nivo-box", t), ("boxRainReverse" === a || "boxRainGrowReverse" === a) && (b = e(".nivo-box", t)._reverse()), b.each(function() {
k[x][w] = e(this), w++, w === i.boxCols && (x++, w = 0, k[x] = [])
});
for (var C = 0; 2 * i.boxCols > C; C++) {
for (var _ = C, T = 0; i.boxRows > T; T++) _ >= 0 && i.boxCols > _ && (function(n, r, o, s, l) {
var c = e(k[n][r]),
u = c.width(),
d = c.height();
("boxRainGrow" === a || "boxRainGrowReverse" === a) && c.width(0).height(0), s === l - 1 ? setTimeout(function() {
c.animate({
opacity: "1",
width: u,
height: d
}, i.animSpeed / 1.3, "", function() {
t.trigger("nivo:animFinished")
})
}, 100 + o) : setTimeout(function() {
c.animate({
opacity: "1",
width: u,
height: d
}, i.animSpeed / 1.3)
}, 100 + o)
}(T, _, u, d, v), d++), _--;
u += 100
}
}
},
g = function(e) {
for (var t, n, i = e.length; i; t = parseInt(Math.random() * i, 10), n = e[--i], e[i] = e[t], e[t] = n);
return e
},
m = function(e) {
this.console && console.log !== void 0 && console.log(e)
};
return this.stop = function() {
e(t).data("nivo:vars").stop || (e(t).data("nivo:vars").stop = !0, m("Stop Slider"))
}, this.start = function() {
e(t).data("nivo:vars").stop && (e(t).data("nivo:vars").stop = !1, m("Start Slider"))
}, i.afterLoad.call(this), this
};
e.fn.nivoSlider = function(n) {
return this.each(function() {
var i = e(this);
if (i.data("nivoslider")) return i.data("nivoslider");
var r = new t(this, n);
i.data("nivoslider", r)
})
}, e.fn.nivoSlider.defaults = {
effect: "random",
slices: 15,
boxCols: 8,
boxRows: 4,
animSpeed: 500,
pauseTime: 3e3,
startSlide: 0,
directionNav: !0,
controlNav: !0,
controlNavThumbs: !1,
pauseOnHover: !0,
manualAdvance: !1,
prevText: "السابق",
nextText: "التالى",
randomStart: !1,
beforeChange: function() {},
afterChange: function() {},
slideshowEnd: function() {},
lastSlide: function() {},
afterLoad: function() {}
}, e.fn._reverse = [].reverse
})(jQuery);
// End Nivo Slider jQuery Script
// SliderShow
/*]]>*/
</script>
<!-- End SliderShow -->
<!-- Start SliderShow -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
<script>
//<![CDATA[
// SliderShow
// Start Nivo Slider Script Control
$(function() {
$(".recent-slider").each(function() {
$(this).append("<div id=\"slider\"></div>");
var a = $(this).attr("data-label"),
f = $(this);
$.ajax({
type: "GET",
url: "/feeds/posts/summary/-/" + a + "?max-results=" + 5 + "&alt=json-in-script", // Number Of Posts Shown
async: !0,
contentType: "application/json",
dataType: "jsonp",
success: function(g) {
for (var j = 0; j < g.feed.entry.length; j++) {
for (var k = g.feed.entry[j], m = 0; m < k.link.length; m++)
if ("alternate" == k.link[m].rel) {
var q = k.link[m].href;
break
} try {
var t = k.media$thumbnail.url.replace('s72', 's300')
} catch (y) {
var t = "https://lh3.googleusercontent.com/24RAodFW8xxgzHpVBAthJHsf_szjRoa3-KzlAEdFgB6X6A5Gmlm-nCvt5nRkE95T52PmHSE4Mf5wvNGoRUgIXjjHi4PjiucY3RimpoVdiTPKQN5Jdj2n9-9bW0wUSzQcirYstqGO8Unv5v7RMU5JD_Q-lEuBgtUfXEmHxOs6ENvJBanzORTRCVXwSzYNRJxijualu8mHhR5S6DG8l4CIo6uADoudrzXGsz7oszRXccZK_FbasxG5xJ9O0mtPuIVavRO8Or89er61NiJIctiUWV0YqtMMOqK214VSjs8-lAx_7LmkneNOrkP7NdXvGTK0fxHgRBiHL7Tm2weLM33LjyMEzY4ygL68Hx81iJK4D-YRmUa8NJhpEKs8q93jgjwJ3ZrgDSzn2pKI-y3c5VWrYf-H38_lWOIMf7uuTOzKUOqoQYZLN8bhFYVyB4bLUwfX0gDtTT38QsV6MILDBQZl6gHQrHt1C8Lpp9EZ0x-1Vl2r2HeKlXS60iuRKZdfSWZNbibE2y9GCfdbBzRUGa-G3GRkQstDu2UBtNOo6WHZ4GI=w600-h250-no"
}
var v = k.title.$t.substr(0, 55) + "...", // Title Number Of Characters
w = k.summary.$t.substr(0, 65) + "..."; // Description Number Of Characters
f.find("#slider").append("<a href=\"" + q + "\"><img src=\"" + t + "\" title=\"<a href='" + q + "'><h3>" + v + "</h3></a><p>" + w + "</p>\"/></a>")
}
$("#slider").nivoSlider({
effect: "slideInRight",
/*
To Change The Effect Choose One Of The
sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse
*/
pauseTime: 5e3
})
}
})
})
$.noConflict();
});
// End Nivo Slider Script Control
// SliderShow
/*]]>*/
</script>
<!-- End SliderShow -->
الشرح فيديو
الإنشاء
16 مايو 2023
آخر تحديث
المشاهدات
جميل يا مدير استمر
ردحذفحبيبي تسلم
حذف