Cara Membuat Slider Gambar Otomatis Berdasarkan Label

Cara Membuat Slider Gambar Otomatis Berdasarkan Label - Slider Gambar Otomatis ini sangat bermanfaat jika kamu pasang di blog kamu, selain menambah keren blog kamu, kamu juga bisa menampilkan posting berdasarkan label dengan efek slider dan yang tampil hanya gambar dan judul posting nya saja, silahkan sobat lihat dulu DEMO gambar nya atau langsung melihat DEMO nyata nya.

Gimana tertarik, jika tertarik saya akan menjelaskan bagaimana cara membuatnya.

1. Login ke Blog kamu.
2. Pilih Rancangan > EDIT HTML > Download Template Lengkap terlebih dahulu.
3. Cari kode ]]></b:skin> setelah ketemu letakan kode dibawah ini tepat di atas 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/AVvXsEjTzBVzIj6IGhT9tC1cW__NQ8fPUBCir6MBWSza773TsVeY3gM9s7Bv_B1igOWfZxU6Fh_dW23PsfZFP6PA85sKzFcd9OTLYxsUK7bHb30iCE2_c29RBp4n6zdB1MTd6hDZ1BPzuYKM6kU/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP-Y5SnT7juVkiF66mefE9kPhX3HwasIrnhhMYmEzXHmKUogepwjslpu4VyEQenpnVD8NY-3I_KLMHMnlQWX-l6ubhvDi5_EVMsmPOA5UIVGDTW6amPiViwlHVlb4E9TZRjLYcRvscp78/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/AVvXsEicxNdl3lGBWooBeixYEgSUDPapyrq8q4z7nDD6NKLVNHayTiOCD5lZCLRt_aOkigKLPAkU0pYPuP7P7tKCjm6s-2w8Nyo8_GXBqyqO1Ou4NrlJo7bZVbasIr2-gRElnZjTr8dfA0i-Mnw/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8VvGUZWRQ3LuA2WjaWTI8QNQfCjLQxD8WbSR2NVD1XKe0at33ipWHJVN3IZg8F9fzgw9qW3PApBhbpWpYPBmw1e036dWMeFADgBh8k2OLDJQHMCJPov9rchDq-8-kXAUMgVYOFNkWRf0/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/AVvXsEg1lLYmPQImrldGOPbDL21BQYVhoJpg4Rx-PdgkxGsmwHGWmVUr8_bjNKQDL0TBieAlXbncagXhLGYqYzOWq0WsNQhbpvrrDMhqR-VVatMHnn1VI_lm72Zu5dHt3ElCyeUeWT2o3XB9l64/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/AVvXsEizFyT66iDnoE3OTTi_iMaGZW8MhIWuTO56EZVyWx04QDCwHQVYrt_K3oNlJz8BDenDZiMzuI3whj3msS2sr3OLbVEvUTaJMZ5XiKTRmQ0IstQ1SGhbeYIrPtFgiJ2EQKwO4FZdukyeKMQ/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}

Atur kode yang berwarna merah width (Lebar) heiight (tinggi) sesuai selera kamu.

4. Cari kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://kauman.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/AVvXsEjCUj5JUW2MMEbpAi_XrCBitYS1M8yVrY2GwjIX34P5SMlxufQUqIdulZH1JuVsAog9TKReq-I2wiAWuULcm6qKh4KYkt6iLhJSJ54zUS-ixJChToCtF4uwsmQl5DbiC3qSGcosfgYXsls/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts1 = 15;
label1 = "news";
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>

Keterangan : kode yang berwarna ungu jika kamu sudah memasang nya di blog kamu tidak usah dimasukan lagi, jika belum masukan, kode yang berwarna merah jumlah posting yang ingin di tampilkan , kode yang berwarna biru ganti dengan Label nya ingat besar kecil hurup nya harus sesuai.


Sekarang cari kode <div id='content-wrapper'> jika sudah ketemu letakan kode di bawah ini tepat di bawah kode <div id='content-wrapper'>

<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>

Keterangan : kode <div id='content-wrapper'> adalah kode bagian bawah header.

Klik dulu Pertinjauan apakah berhasil jika berhasil klik Simpan Template.