السلام عليكم ورحمة الله وبركاته، اهلا بكم متابعي مدونة التقني | Eltqni، شرح اليوم هو عن طريقة تركيب سلايد شو احترافي لعرض أخر المواضيع، السلايد احترافي في الشكل، وايضا سريع في التحميل مع الصفحة، وايضا يمكنك اختيار اي قسم داخل مدونتك ووضعه داخل السلايد، وسيقوم بجلب اخر اخبار هذا القسم.
قم بالبحث عن الوسم ]]></b:skin> داخل مدونتك، وقم بوضع الكود التالي فوقه.
الأن قم بالبحث عن الوسم </body> وضع الكود التالي فوقه مباشرة
الأن مع أخر كود وهو كود السلايد، يمكنك وضعه في اي مكان تريد داخل المدونة
بعد وضع جميع الاكواد قم بعمل حفظ للقالب، وانتقل إلي التخطيط وستجد اداة جديدة تمت اضافتها، وهي الاضافة الخاصة بالسلايد شو، وستجد داخل الاضافة تسمية mronline199 فقط قم بتغييرها بما يناسبك مع تغيير المشابهه لها في الكود الثاني والثالث بالتسمية التي تناسبك، وسيعمل معك السلايد بدون مشكلة.
صورة للسلايد
شرح طريقة التركيب
/* slider */
div#mronline199com{margin-bottom:15px}
.gravfeatureditem.first{width:59%;float:right;height:450px;position:relative;margin-left:1%}
.feat-img{display:block;width:100%;height:100%;background-size:100% 100%;transition:all 0.7s ease 0s;background-position:50%}
.gracontent{position:absolute;bottom:-150px;transition:all 0.7s ease 0s;background:rgba(0,0,0,0.3);padding:15px;width:100%;color:#fff;z-index:999}
.gracontent a{color:#fff}
.gravfeatureditem:hover .gracontent{bottom:0;transition:all 0.7s ease 0s}
.gracontent:hover{background:rgba(0,0,0,0.6)}
.gravfeatureditem.second{float:right;width:40%;height:220px;margin-bottom:10px;position:relative}
.gravfeatureditem.third{float:right;width:40%;height:220px;position:relative}
.gravfeatureditem.first .gracontent{font-size:22px}
.feat-img:hover{transform:scale(1.3)}
.gravfeatureditem{overflow:hidden}
.gravfeatureditem.third .gracontent{padding:10px}
.gravfeatureditem.second .gracontent{padding:10px}
div#mronline199com .widget-content{color:#fff;height:450px}
.gravfeatureditem span.blue{z-index:8;position:absolute;top:0;background-color:#E74C3C;font-size:12px;padding:6px 8px;color:#fff}
الأن قم بالبحث عن الوسم </body> وضع الكود التالي فوقه مباشرة
<script type='text/javascript'>
//<![CDATA[
// Recent Post
function getPostUrl(i) {
for(var j = 0; j < i.link.length; j++)
if("alternate" == i.link[j].rel) {
var k = i.link[j].href;
return k
}
}
function getPostPublishDate(i) {
var j = i.published.$t
, k = j.split("-")[2].substring(0, 2)
, r = j.split("-")[1]
, s = j.split("-")[0]
, u = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "Octobor", "November", "December"][r - 1];
return j ? u + " " + k + ", " + s : ""
}
function getPostCategory(i) {
var j = i.category;
j && (j = i.category[0].term);
var k = "<div class=\"category-wrapper\"><a class=\"category\" href=\"/search/label/" + j + "?max-results=10\">" + j + "</a></div>";
return j ? k : ""
}
function Slider(i) {
for(var j = ([], ""), k = i.feed.entry.length, r = 0; r < k; r++) {
var s = i.feed.entry[r]
, t = s.title.$t
, u = getPostUrl(s)
, v = (s.author[0].name.$t, getPostPublishDate(s), getPostCategory(s), s.category[0].term)
, w = i.feed.entry[r].content.$t
, x = $("<div>")
.html(w);
if(-1 < w.indexOf("//www.youtube.com/embed/")) var y = i.feed.entry[r].media$thumbnail.url
, z = y;
else if(-1 < w.indexOf("<img")) var A = x.find("img:first")
.attr("src")
, z = A;
else var z = no_image;
0 == r && (j = j + "<div class=\"gravfeatureditem first\"><span class=\"blue\">" + v + "</span><div class=\"gracontent\"><a href=\"" + u + "\"><h3>" + t + "</h3></a></div><a href=\"" + u + "\"><div class=\"feat-img\" style=\"background-image:url(" + z + ");\"></div></a></div>"), 1 == r && (j = j + "<div class=\"gravfeatureditem second\"><span class=\"blue\">" + v + "</span><div class=\"gracontent\"><a href=\"" + u + "\"><h3>" + t + "</h3></a></div><a href=\"" + u + "\"><div class=\"feat-img\" style=\"background-image:url(" + z + ");\"></div></a></div>"), 2 == r && (j = j + "<div class=\"gravfeatureditem third\"><span class=\"blue\">" + v + "</span><div class=\"gracontent\"><a href=\"" + u + "\"><h3>" + t + "</h3></a></div><a href=\"" + u + "\"><div class=\"feat-img\" style=\"background-image:url(" + z + ");\"></div></a></div>"), 3 == r && (j = j + "<div class=\"gravfeatureditem fourth\"><div class=\"gracontent\"><a href=\"" + u + "\"><h3>" + t + "</h3></a></div><a href=\"" + u + "\"><div class=\"feat-img\" style=\"background-image:url(" + z + ");\"></div></a></div>")
}
slider.html("<div class=\"mronline199com\">" + j + "</div>"), $(".mronline199com")
.find(".feat-img")
.each(function() {
$(this)
.attr("style", function(B, C) {
return C.replace("/default.jpg", "/mqdefault.jpg")
})
.attr("style", function(B, C) {
return C.replace("s72-c", "s1600")
})
.attr("style", function(B, C) {
return C.replace("s320", "s1600")
})
.attr("style", function(B, C) {
return C.replace("s400", "s1600")
})
.attr("style", function(B, C) {
return C.replace("s640", "s1600")
})
})
}
var slider = $("#mronline199com .widget-content")
, sliderContent = slider.text()
.trim();
"no" !== sliderContent.toLowerCase()
.trim() && "\"no\"" !== sliderContent.toLowerCase() && "" !== sliderContent ? "mronline199" === sliderContent ? $.ajax({
url: "/feeds/posts/default?alt=json-in-script&max-results=6"
, type: "get"
, dataType: "jsonp"
, success: function(i) {
Slider(i)
}
}) : $.ajax({
url: "/feeds/posts/default/-/" + sliderContent + "?alt=json-in-script&max-results=3"
, type: "get"
, dataType: "jsonp"
, success: function(i) {
Slider(i)
}
}) : $("#slider")
.remove();
//]]>
</script>
الأن مع أخر كود وهو كود السلايد، يمكنك وضعه في اي مكان تريد داخل المدونة
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='gravityfeaturedz' id='mronline199com' showaddelement='yes'>
<b:widget id='HTML94' locked='false' title='' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'>mronline199</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div class='widget-content'>
<data:content/>
</div>
<div class='clear'/>
</b:includable>
</b:widget>
</b:section>
</b:if>
بعد وضع جميع الاكواد قم بعمل حفظ للقالب، وانتقل إلي التخطيط وستجد اداة جديدة تمت اضافتها، وهي الاضافة الخاصة بالسلايد شو، وستجد داخل الاضافة تسمية mronline199 فقط قم بتغييرها بما يناسبك مع تغيير المشابهه لها في الكود الثاني والثالث بالتسمية التي تناسبك، وسيعمل معك السلايد بدون مشكلة.
كان هذا شرح اليوم، اذا واجهتك اي مشكلة في التركيب لا تتردد في كتابة تعليق، وسيتم الرد عليك في اسرع وقت، دمتم في أمان الله.