Membuat Slider Image Post Otomatis

Slider Image Post berfungsi untuk menampilkan postingan terbaru blog Anda dalam bentuk menampilkan slide gambar dan deskripsi postingan pada setiap slidenya. Sebagai contoh/demo bisa dilihat disini. Biasanya letak dari fitur ini ada di atas postingan yang ada di home page  Anda.  Dengan fitur ini maka template Anda akan terlihat lebih indah, rapi, dan profesional. 

Bagi Anda yang berminat Membuat Slider Image Post Otomatis di blog atau website Anda, silahkan simak dan ikuti langkah-langkah berikut ini:

• Login ke akun blog anda
• Masuk ke Template
• Klik Edit HTML lalu beri tanda ✔ tanda pada ☐ Expand Template Widget
• Ada baiknya jika Anda backup terlebih dahulu template Anda untuk berjaga-jaga jika nantinya ada kesalahan dalam pengeditan.
• Jika sudah, cari kode ]]></b:skin> 
• Kemudian copy script di bawah ini lalu pastekan di atas kode ]]></b:skin>

#featuredSlider {background:#eee;float:left;margin:0; padding:0 0 10px; width:640px; position:relative;color:#666;border-bottom:1px solid #c3c3c3}
#featuredSlider .featured-thumb {float:left; margin:10px; padding:0px;}
#featuredSlider .container {height:226px; margin:0 10px 0 0;overflow:hidden; position:relative;}
.featuredTitle{padding-top:10px;font:16px Oswald;text-shadow:1px 1px 1px #ccc;}
.featuredTitle a{color:#f7441a}
.featuredTitle a:hover{color:#000}
.navigation {position:relative;bottom:23px;float:right;overflow:hidden;}
ul.pagination {list-style-type:none; margin:0 auto; padding:0;}
ul.pagination a { float:left; margin:0 5px; display:inline; }
ul.pagination a { display:block;width:12px; padding-top:12px; height:0; overflow:hidden; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3xT7x3G00viVHzXsEPzuap5SQmwQUP29bCedyS4dtjCLEcyCkfB9G59SsjeYFGUPZoi_vUu70mFot8ceJDaaubKCmqkeFSjXxf5vCD_xLiKTsQZkqTrN2XXP8xBmtNykyX5QSEQMwFII/s1600/slider+pagination.png); background-position:0 0; background-repeat:no-repeat; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a.activeSlide { background-position:0 -12px }
a.readmore {float:left;border:1px solid #444;background:#585858 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ6iF6zCCen4apmrZzUc6dv55vWa48D84ut5Dc1G6p4jOHsoGuLU08tpwXseM7wDFvmH1LfmglBL6DQwBy-VVqgt_SfLP1GwozWfvwKZ_Vk-nu6zcJI9_TFTDyKKA8KRCbLpzClmaFLT4/s1600/fade.png) repeat-x top;display:block;;font:bold 12px Arial;text-shadow: -1px -1px 0 #333;margin:10px 0 0 0;padding:4px 10px;color:#eee;-webkit-border-radius:3px;-moz-border-radius:3px;
border-radius:3px;-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);}
a.readmore:hover {color:#ff0}

Ket: 

Yang berwarna merah adalah ukuran lebar dan tinggi Slider pada demo, Anda bisa merubahnya sesuai dengan yang Anda inginkan.

• Selanjutnya, masih dalam posisi di Edit HTML, cari kode </head>
• Copy script di bawah ini lalu pastekan di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://masolis-javascript.googlecode.com/svn/trunk/jquery.innerfade.js' type='text/javascript'/>
<script src='https://masolis-javascript.googlecode.com/svn/trunk/cycle.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIyv22rQhmKfYukVFk6VCdmTkkYpdFmQXQYgXi722ctecqyfG4hjhbRbWtP-RC1rqBoSLXAbd4mB6fdjO3jYObQ5rvVQoT3g99a1uCYoyjJb_311b2WmStZviuRn9w1uCrygS5CCHG6UY/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 150;
summaryTitle = 25;
numposts  = 7;

function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}

function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();
    document.write('<div class="slides">')
if (numposts <= json.feed.entry.length) {
maxpost = numposts;
}
else
       {
   maxpost=json.feed.entry.length;
   }
   for (var i = 0; i < maxpost; i++) {
     var entry = json.feed.entry[i];
     var posttitle = entry.title.$t;
var pcm;
     var posturl;
     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;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

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 trtd = '<div><p class="featured-thumb"><a href="'+posturl+'"><img width="340" height="212" src="'+img[i]+'"/></a></p><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p><a href="'+posturl+'" class="readmore">Read more &#187;</a></div>';
document.write(trtd);


j++;
}
    document.write('</div>')
}

//]]>
</script>

Ket:

URL pada script yang berwarna merah diatas adalah kode script jQuery.min.js, jika pada template Anda sudah terdapat jQuery.min.js, yang ada pada script di atas tidak perlu Anda masukkan.

Kode warna biru → 7 adalah jumlah slider yang ditampilkan. Sedangkan angka 340 dan 212 adalah lebar dan tinggi image yang ada di slider.

• Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog Anda. Cari kode <div id='main-wrapper'> kemudian letakkan kode berikut ini dibawahnya :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='featuredSlider'>
<div class='container'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/sport?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
<div class='navigation'>
<ul class='pagination'/>      <script>
$(&#39;.slides&#39;).cycle({
 fx:     &#39;fade&#39;,
 speed:  &#39;slow&#39;,
 timeout: 3000,
 pager:  &#39;.pagination&#39;
 });
</script>
</div>  </div> <!--end .container-->
</div>
</b:if>

• Langkah terakhir adalah klik Save/Simpan