اضافة سلايدر شو تلقائي في بلوجر

اضافة سلايدر شوّ تلقائيّ في بلوجر -جميعُنا نعرف أهمية السلايدر في المواقع فهي تجذب انتباه الزّائر وتزيّد من نسبة النّقر على المواضيع،هذا يؤدي إلى زيادة عدد مشاهدات المقالات في المدوّنة. السلايدرات يوجد لها أشكال كثيرة ومختلفة ولكنّها تنقسم إلى نوعين سلايدر شوّ تلقائيّ (يقوم بعرض صور وروابط المواضيع بشكل تلقائي)، سلايدر شوّ غير تلقائيّ (يجب وضع الصّور وروابط المواضيع بشكل يدوي). اليوم سوف نتعلّم كيفية اضافة سلايدر شوّ تلقائيّ جميل وبسيط، ويقوّم بعرض المواضيع الجديدة بمعنّى عند نشر مقال جديد على المدونة، سوف يظهر فورًا على السلايدر. وهو خفيف وسريع ولن يؤثر على سُرعة المدونة.

معاينة

كيفية اضافة سلايدر شو تلقائي في بلوجر

1. ادخل لوحة تحكم بلوجر.
2. انقر على تبويب قالب.
3. ثم اضغط على زر تحرير HTML.

ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه

/* Slider */
.blog_featured_posts {display: inline-block;width: 100%;margin-top: 0px;margin-bottom: 4px;}
.blog_featured_post {display: block;position: relative;float: right;overflow: hidden;height:334px;}
.blog_featured_post.first {width: 43%;margin-left: 9px;}
.blog_featured_post.second {width: 20.79%;margin-left: 9px;}
.blog_featured_post.third, .blog_featured_post.fourth {width: 34.126%;height:163px;}
.blog_featured_post.third {margin-bottom: 9px;}
.blog_featured_post a {display: block;color: rgb(255, 255, 255);text-shadow: rgba(0, 0, 0, 0.498039) 0px 1px 1px;position: relative;vertical-align: bottom;z-index: 1;height:100%;}
.blog_featured_post a:hover:before {opacity: 0.6;box-shadow: inset 0px -3px 200px 5px #000;}
.blog_featured_post a:before {display: block;position: absolute;content: &#39;&#39;;right: 0px;top: 0px;width: 100%;height: 100%;box-shadow: inset 0px -3px 300px 5px #000;opacity: 0.5;-webkit-transition: all 0.2s;transition: all 0.2s;}
.blog_featured_post a .blog_contents {display: block;position: absolute;z-index: 5;bottom: 30px;right: 30px;left: 30px;font-weight:bold;text-transform: uppercase;line-height: 120%;-webkit-transition: all 0.2s;transition: all 0.2s;font-family: droid arabic kufi, sans-serif;}
.blog_contents span {font-style: normal;display: block;position: absolute;bottom: 100%;padding: 5px 10px;letter-spacing: 0px;font-size: 11px;line-height: 1;text-shadow: none;margin-bottom: 10px;background: #f58220;}
.blog_contents span:after {content: &quot;&quot;;border-style: solid;border-width: 21px 7px 21px;border-color: transparent;border-bottom-color: #f58220;left: -7px;bottom: 0;position: absolute;}
.blog_contents span:before {content: &quot;&quot;;border-style: solid;border-width: 21px 7px 21px;border-color: transparent;border-top-color: #f58220;right: -7px;top: 0;position: absolute;}
.blog_featured_post a .blog_contents h3 {text-shadow: 2px 2px 4px black;padding: 8px 10px 9px;text-align: right;float: right;display: inline-block;background: rgba(0, 0, 0, 0.5) none repeat scroll 0% 0%;width:114%;opacity: 0.9;font-size:12px;font-weight:700;margin-right: -30px;}
.blog_featured_post.first a .blog_contents h3 {text-shadow:2px 2px 4px black;padding: 8px 10px 9px;text-align:right;float:right;display:inline-block;background:rgba(0, 0, 0, 0.5) none repeat scroll 0% 0%;width:100%;opacity: 0.9;font-size:12px;font-weight:700;margin-right:-30px;}
.blog_featured_post .feat-img{width:100%;height:100%;background-size:cover;background-position:50%;}

ابحث عن الوسم </head> و اضف الكود التالي فوقه

<!-- Slider -->
<script type='text/javascript'>
 //<![CDATA[
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = true;
aBold = true;
numposts1 = 4;
numposts11 = 1;
newsize = 400;
function recentposts1(json) {
j = showRandomImg ? Math.floor((imgr.length + 1) * Math.random()) : 0;
img = new Array;
if (numposts1 <= json.feed.entry.length) maxpost = numposts1;
else maxpost = json.feed.entry.length;
document.write('<div class="blog_featured_posts">');
for (var i = 0; i < maxpost; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var tag = entry.category[0].term;
var pcm;
var posturl;
var cropsize = newsize;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) if (entry.link[k].rel == "alternate") {
posturl = entry.link[k].href;
break
}
for (var k = 0; k < entry.link.length; k++) if (entry.link[k].rel == "replies" && entry.link[k].type == "text/html") {
pcm = entry.link[k].title.split(" ")[0];
break
}
if ("content" in entry) var postcontent = entry.content.$t;
else if ("summary" in entry) var postcontent = entry.summary.$t;
else var postcontent = "";
postdate = entry.published.$t;
if (j > imgr.length - 1) j = 0;
img[i] = imgr[j];
s = postcontent;
a = s.indexOf("<img");
b = s.indexOf('src="', a);
c = s.indexOf('"', b + 5);
d = s.substr(b + 5, c - b - 5);
if (a != -1 && (b != -1 && (c != -1 && d != ""))) img[i] = d;
var month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var month2 = ["يناير", "فبراير", "مارس", "أبريل", "مايو", "يونيو", "يوليو", "أغسطس", "سبتمبر", "أكتوبر", "نوفمبر", "ديسمبر"];
var day = postdate.split("-")[2].substring(0, 2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for (var u2 = 0; u2 < month.length; u2++) if (parseInt(m) == month[u2]) {
m = month2[u2];
break
}
var daystr = day + " " + m + " " + y;
if (i == 0) {
var st = "#FF3D66";
var trtd = '<div class="blog_featured_post first"><a href="' + posturl + '"><div class="blog_contents"><span>' + tag + '</span><h3>' + posttitle + '</h3></div><div class="feat-img" style="background-image:url(' + img[i] + ');"></div></a></div>';
document.write(trtd)
}
if (i == 1) {
var trtd = '<div class="blog_featured_post second"><a href="' + posturl + '"><div class="blog_contents"><span>' + tag + '</span><h3>' + posttitle + '</h3></div><div class="feat-img" style="background-image:url(' + img[i] + ');"></div></a></div>';
document.write(trtd)
}
if (i == 2) {
var trtd = '<div class="blog_featured_post third"><a href="' + posturl + '"><div class="blog_contents"><span>' + tag + '</span><h3>' + posttitle + '</h3></div><div class="feat-img" style="background-image:url(' + img[i] + ');"></div></a></div>';
document.write(trtd)
}
if (i == 3) {
var trtd = '<div class="blog_featured_post fourth"><a href="' + posturl + '"><div class="blog_contents"><span>' + tag + '</span><h3>' + posttitle + '</h3></div><div class="feat-img" style="background-image:url(' + img[i] + ');"></div></a></div>';
document.write(trtd)
}
j++
}
document.write('</div>')
};
//]]>
</script>

الكود الثالث وهو الخاص بعرض السلايدر في المدونة ويُمكنك وضعه في المكان الذي يُناسبك.
لكنّ أفضل مكان هو فوق المواضيع مُباشرًة لذلك ابحث عن الوسم <div id='content-wrapper'> و اضف الكود التالي فوقه

<div class='blog_featured_posts' id='blog_featured_posts'>
<div class='ct-wrapper'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=recentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
  </b:if>
  </div>
</div>

السلايدر قد يختلف حجمه على حسب حجم القالب الذي تستخدمه.
إذا واجهت صعوبة في تركيب السلايدر أترك تعليق وسوف اقوم بالدخول إلى مدونتك واعطائك المقاسات المُناسبة.