Cara Membuat Image Slider di Bawah Header Pada Blog

Cara Membuat Image Slider di Bawah Header Pada Blog-Anaktimor17-Image slider di bawah header merupakan sebuah widget untuk menampilkan foto postingan terbaru pada blog yang disertai dengan tanggal dan judul postingan yang telah diterbitkan.
Letak dari image slider ini yakni berada tepat di bawah header dengan ukuran panjang dan tinggi widget serta warna dan ukuran foto yang bisa disesuaikan.

• Login ke blogger
• Pilih Template » Edit HTML dan jangan sampai terlewatkan untuk mencentang "expand template widget"
• Untuk mengantisipasi adanya kesalahan dalam pemasangan image slider ini, saya sarankan untuk membackup template terlebih dahulu
• Copy kode di bawah ini dan pastekan tepat di atas tag ]]></b:skin>

 
#carousel{width:960px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#000;margin-bottom:8px}
#carousel h5{color:#555;margin:2px}
#carousel .container{position:absolute;left:24px;width:960px;height:125px;overflow:hidden}
#carousel .thumb{float:left;margin-right:5px;}
#carousel  #previous_button{position:absolute;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx91qh-sKjv1w0XwmIwwfFClmf19II3o5xa4udKSUT0gqIrqEhGe7AKB3IDrs1UuvnGMBa2gnnMwRBBKFcb7S-rgNsEEzdL7wPaH0624ejpLUnkOjwOYC1ZrTjWawAd9ek3Qp-fJP7RzZf/s1600/previous.png)  center;z-index:100;cursor:pointer;}
#carousel  #next_button{position:absolute;right:0;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnmGD2EvvzP44zm304Rk3B-woYT0-OtQTixOXJMSq77-Ay8Vp2sdkNf8KMaMpDnUZoQ8WZ6kj0JGWe1-vATTPW-XcGsQKjLvUDQhKgIYIlK3wEZ6frAFDoUTsC0lPchU6tyVFTZGuBNg3a/s1600/next.png)  center;z-index:100;cursor:pointer;}
#carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#04B404;display:inline;float:left;text-align:left;font:bold  11px Arial;border:0px solid #ccc;width:212px;height:90px;margin:0 2px  5px 2px;padding:6px}
#carousel ul li a.slider_title{color:#fff;display:block;margin-top:0;padding-top:0}

• Langkah selanjutnya, copy kode di bawah ini dan pastekan tepat di atas tag </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/carousellite.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb8ahtP8MH0RRqVVBECUwkrhnqU0Ks84fblt5wkDPup7jQoPBE4lQTIQC4TawJas_usESJyXvcV4cjNun2qqoJTIU4J7DbZZtTPi69M_LB92vGvJqapzbj8Acl_MehNIzcokwXQSF-Kg4/s1600/no+image.jpg"; showRandomImg = true; aBold = true; summaryPost = 140; summaryTitle = 25; numposts1 = 12; 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('<ul>'); for (var i = 0; i < numposts1; 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 = ["January","February","March","April","May","June","July","August","September","October","November","December"]; 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 ; var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="100" height="90"   class="alignnone"   src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><a   class="slider_title"   href="'+posturl+'">'+posttitle+'</a></li>'; document.write(trtd); j++; } document.write('</ul>'); } //]]></script> 

• Selanjutnya, copy code berikut ini dan pastekan tepat di atas tag <div id='main-wrapper'>

 
<div id='carousel'> <div id='previous_button'/> <div class='container'> <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=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;); </script>     <div class='clear'/> </div> <div id='next_button'/> </div> <script type='text/javascript'> (function($) {     $(document).ready(function(){ $(&quot;#carousel .container&quot;).jCarouselLite({     auto:4000,     scroll: 1,     speed: 800,         visible: 4,     start: 0,     circular: true,     btnPrev: &quot;#previous_button&quot;,     btnNext: &quot;#next_button&quot;     });     })})(jQuery)     </script>

• Terakhir, simpan template sobat dan lihat hasilnya.