Cara Membuat Slider Carousel Style Berdasarkan Label

Also Read Other Articles

Sebelumnya Saya telah memberikan tutorial tentang bagaimana Cara Membuat Related Post Style dan sekarang bagaimana cara membuat konten slider carousel seperti gambar di atas ala Johny dan Mas Templat. Sedikit deskripsi dari konten carousel tersebut, konten yang menampilkan data perlabel dengan menampilkan image dengan efek carousel (bergeser) seperti terlihat pada templat halaman depan punya saya. Apakah sobat tertarik untuk memasang widget tersebut.. Mari ikuti prosesi pemasangannya...

1. Masuk Akun Blog sobat

2. Dasbor pada Edit HTML (sebaiknya Back Up dulu templat) (Exspand Widget)
3. Lalu cari kode ]]></b:skin> dan letakkan kode berikut di atas kode ]]></b:skin>

#carousel{width:981px;height:185px;border-bottom:1px solid #222;position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXpfB3x8riWisKhm6s31I9KcqylZVpHbOjviXm7iv9bTa1qrDqqr1HGr_Jr9Lbm9MOdj4TgYH2KunoFWnD_4m6MOhWLFUxTnBynMYYY3nBaUyilkqBY5CyPNLWabsBi4v31bu9ARfNQZs/s1600/carousel.png) repeat-x top}
#carousel .container{position:absolute;left:49px;width:950px;height:185px;overflow:hidden}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMuTg8C4fRw27QtcwG4Bpc1jJpj759eR_Hlv1cPH5gzbQlKhybygTbrDitXuAH9jA77QSTx2aGqKqMhwuIsxSzYvs1EC3NwdDl4Owkp8hOaSw1zxeU9gxMerJe7ye33sVsD2tpBIM3DIQ/s1600/next.png) top;z-index:100;cursor:pointer;border-right:1px solid #222}
#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIof0Q4fYvenVwOhEK22xcUumrsCL-zdMllxvRwEktBZSF9sdShJPQw8GPWLj_TiOcvALxw6ByrHD8qDTlz5-DbLQHprFqAts6BS8Yn8t7aQPyyAXaZ_6ZnSNroEVpF94xgYFL6FgRo9M/s1600/prev+hover.png) top}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHMztp7tTbqUWXbsoCVi08SFpXaJM7N_9SgcOaLSWruDjNbsUAGoiencL7PNjlkLQLVJdGNfB54bkPY2bxH0osK9v3apQjd9jgX3IDSLqvAWb9-ojllHg1JTM6yzoIk8PUCnPQxy6L8AY/s1600/prev.png) top;z-index:100;cursor:pointer;border-left:1px solid #222}
#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNGO-4H4iMwVFV6h1UMsxm7yMzUlcXYf_ZCwt9WAZNIoBaNJI92-nk6E-pZEWgsp1uvbK4wE3rGrplwlYKidQH2zE5kIyH-SC8ic90_JW4UOiabwMPD-uVHqOb3E499SPkCOVrTqch_aM/s1600/next+hver.png) top}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilQye2PrlQdcOnPa7GyoyttvEjwltgEJ_UQvdzE56x2yIP9Llp8x8yBiN0Dub_RbBIES-OLyouCT5qlj7Mlcl0bQJ0lxaHktfc1yIukhOUhigc_92XkaOuPySMYzIOjmiRkIp-x0rucFA/s1600/slider-bg.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #111;width:145px;height:150px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;margin:0 5px 20px 11px;padding:6px}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75}
#carousel ul li a.slider_title{color:#aeaeae;display:block;margin-top:5px}
#carousel a img{display:block;background:#fff;margin-top:0}

4. Berikutnya sobat cari kode </head> dan letakkan kode berikut diatas 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/AVvXsEieZaCaygZGG8ImFjNd-VV9KGBH2aW36g1qWYKutrncuYLepzZDuWWFhIOT5Nc6wZ0JetDbBf7xYSBgWmDUjXWwHNN3kH811K0SZxz93kq8FPPfz1wIr3xM3SAbni9QjTDMM7fsJFgYwOc/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;

numposts1 = 15;
label1 = "Download";
numposts2 = 15;
label2 = "Tips and Trick";

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>

NB :

• Apabila pada templat sobat sudah terpasang Script J Query maka pada kode yang berwarna Orange tidak usah di pasang, Namun apabila belum ikutkan kode J Query tersebut.
• Ganti kode yang saya kasih warna  Biru   dengan Label yang akan di tampilkan pada conten carousel tersebut.

5.Selanjutnya Masih pada Edit HML, sobat cari kode <div id='main-wrapper'> dan masukkan kode berikut diatas kode <div id='main-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> 

6. Simpan Templat dan Lihat Hasilnya

SUMBER JOHNY dan MAS TEMPLAT