Cara Membuat Slider Gambar Otomatis Berdasarkan Label

Cara Membuat Slider Gambar Otomatis Berdasarkan Label - Kali ini Inupurnomo akan membahas widget blogger yaitu Cara Membuat Slider Gambar Otomatis Berdasarkan Label. Slider Gambar Otomatis ini sangat bermanfaat bila dipasang di blog kita. Selain mempercantik blog, sobat juga bisa menampilkan postingan berdasarkan label dengan efek slider dan yang tampil hanya gambar dan judul postingannya saja. Contohnya seperti gambar berikut ini :

 

Jika sobat tertarik, sobat tinggal ikuti tutorialnya dibawah ini :

1. Login ke Blogger sobat

2. Pilih Rancangan, Edit HTML, Download Template lengkap (bila terjadi kesalahan)

3. Centang Expand Template Widget, lalu cari kode ]]></b:skin>

4. Kemudian Copy kode berikut tepat diatas kode ]]></b:skin>

#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXbdmUEjpidPG_npsw1_pIgcyiRp9AU2x0Z0q5a_lbnjVFmJrOzpmEA_j7hg9dcKICP7jisNkZwovVf-rn-HVimUCJaOugmFXNpYx7aNEZPd4cOMpQD3OHk-kimsbM7YaGqF7hIe9Vlmo/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOIog6ck-Ox-ThW-T8EFpoKskb7v6ZkEydFF9LwYp3vIPen0eNRiuW4ESqSrHWkdyMAdyDEDpGri510-umnOb9Uxl6RqGzQJt_iel2WoMNhJmIGELC2wphlqJM9kXLZeHzUBQdAMBcfTU/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR62CUyKJapfteEtGxuc3Bl2DE3GueS-Z-9ehSa5tl-imGn2HGSR2largcET1IUph3iM3p-t6qWvlhX4lnQ1SUlsHb6zdAte54JYOnhUsb_BfK07UW_wPKc5G5A011I6EMTjpNuTVIHYI/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3RTGCtqq8M0mvWDePV8DzlxEl_nYYB6j2GDnMXZmZGnSbIOKGMTzl-J6bFr-xGkmUzbPT9QWC8weAfwz_qQkYTMVp3HrEL2fH_wA8P0fJ6s4S0k8XYZYlEBhOrjrUMfvr4zVfM1phWSs/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEincNoNfFdvzasb-cfdL_mbvS2DEAHuXqPIAfjW6g8vVQQMheeKEYqygAvE9EvEisFgSbpINlRTp49EjRs13qHjFnjIptPS7IRsyb7wnMlIe9sUHyxCUnXel5H1qPJPVgKRFQjeNmf0f6w/s1600/next.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrCUvpYms9Pz0W7pX78xm-t7u1KHOC0gyyNV0j-kK7ay1HAgWJFm7tXQewBwviezwtnBfte2TvPzdO0QuWChRVaSEeapBGSKSFUuFJaTEAH9dEHIpq3IGeOD6UfXeN7FlYczI4iswHyJY/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#cd1713}
#carousel a img{display:block;background:#fff;margin-top:0}

 Ket: Ganti yang warna merah sesuai dengan lebar dan tinggi widgetnya

5. Cari kode </head>, bila sudah copy kode berikut tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://scienceworld.googlecode.com/files/jcarousellite.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik6Dh8dQ8V6Huge5z-pyE0Gst_noq9YRSQjeiGGlDh7Qm_Soc7XFfpNnFxssGYgCVLJG1rezRvLz8HWj-qfTPwfUezr3Wzkx4HMwOIst54gHfqwZsELYysfEg1KDCYjkXydPe7o0-Kufo/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts1 = 15;
label1 = "Template";
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 = ["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 daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';
document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>

Ket: Kode yang warna ungu, bila sobat sudah memasang kodenya diblog sobat tidak usah dipasang lagi

Kode yang warna merah adalah jumlah postingan yang ditampilkan

Kode yang warna biru adalah nama label, sobat bisa ganti dengan nama label blog sobat (ingat besar kecil huruf label harus sesuai!) 

6. Simpan Template

7. Masuk ke Rancangan, Elemen laman, lalu pilih Tambah Gadget

8. Copy kode dibawah ini di HTML/Javascript

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(&quot;&lt;script src=&quot;/feeds/posts/default/-/&quot;+label1+&quot;?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: 5,
start: 0,
circular: true,
btnPrev: &quot;#previous_button&quot;,
btnNext: &quot;#next_button&quot;
});
})})(jQuery)
</script>
</b:if>

9. lalu Simpan dan Lihat hasilnya..!

SELAMAT MENCOBA DAN SEMOGA BERHASIL