Tutorial kali ini saya akan membahas bagaimana membuat slider
Carousel otomatis berdasarkan label. Prinsip kerja dari slider ini sama
seperti pada slider otomatis berdasarkan kategori. Anda tinggal mengganti
dengan label anda dan slider ini akan bekerja sesuai dengan label yang anda
masukkan. Slider Carousel yang saya buat kali ini sangat sederhana dan hanya menggunakan Carousellite script
tanpa menambahkan efek easing dan mousewheel.
Cara pemasangannyapun sangat mudah, jika anda sudah pernah mempraktekkan
artikel saya terdahulu yang berjudul membuat slider otomatis berdasarkan
kategori tertentu, tutorial kali ini terasa sangat mudah, karena
langkah-langkah pembuatannya hampir sama. Langsung saja di bawah ini
langkah-langkah untuk membuatnya :
- Login ke blogger dengan akun
Anda
- Setelah itu pilih blog yang ingin anda tambahkan
slider ini.
- Masuk ke template >> Edit
HTML, kemudian centang expand widget templates
- Untuk berjaga-jaga agar tidak terjadi kesalahan
dalam pengeditan nantinya, backup dulu template anda.
- Setelah semua langkah diatas anda
lakukan, letakkan kode berikut ini 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/AVvXsEiXJAV0L3XUwO8MRENYMZvxX5lhCv_TLhOsAkKSQRBNucJGY062CO6DfyhkZEr89SrCzOQKmn2rEs2xHzmGmKZGFSDOd0doZO7nRGKeU82Zq3nJi8kC9XO2wjf8HWQ6Xbr_iJtJfHersCM/s1600/scroller-bg.png)
repeat center}
#carousel
#previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOjJUdsqOkqvuvtVA21hmeYeLheM2BA2mKUROGQRAIoir-2i9iU7cKyqZdWhJtm4cffp1I7iHYf0WfSAITLYtdjzxAlwG3YmOYaM2Fhn0gEjYDnpfHdN1pQDqx_1ZkmJBuXDdV4Jr-aHg/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/AVvXsEiYBW2QOrguB23_Gi1KyvsNszUrHE4fj2mOdEHeDYW3kxRUgSST4C9BjKrTVnW4VgnDO8EHJQ1Wfsx0c0hLqji_vWnAs9eKnXGPYnzEE9KMJscgx2RvvuVfWm3jhgU6JPMHr-3rpMRb3no/s1600/prev.png)
center}
#carousel
#next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd_47JSvZwkde5SFk7yc_9W-PpxAI8rlv9loxo0XhNkv-W9jeK5BniiHWPgBkpxTIypwR-yaRtMYQhDUH2gnKFTEttS4St1OUeVefkPwNRRmEPE_Akqo8lSKd6e-yd0gKmprbu6fLxJ_s/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/AVvXsEjcAAlajYbCYDmxYoHCvpGXTBhp2opIximUxzsQxxwwFNl87gnEkiTggj2KLh6OISq8aWAnw6oOphyphenhyphensvDmp5zu57HxTmaPKghkhBH6-rQ75oa0d4WOCDYY_iJq7LiY_T6_BDz48CbwLuPE/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/AVvXsEiJwKWSb4O04z9kHoopb1-ZtCtsU1_h-hMPyMwXAWeUNFTM9XgIxKLUypDINwlzld7zLapjDgVTgjWB-89Up_fvcz_1ycIh_1EbkAcOlJlrDSiLSaOjmMaoXK_BiwSP2IoW6Ql-EmYDh08/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}
Perhatikan kode
warna biru diatas, itu
adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda
sesuaikan dengan ukuran template Anda.
- Langkah selanjutnya masih pada
posisi Edit HTML, masukkan kode berikut ini 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/AVvXsEibVzPZXBHNWFbKM9RWOKmVh3RfMFEQUWyU_N2s3QomdKucsFHXhBpu76sB3As6-IF8Rn4FVgxU8Z6aVNajJmugyc-lUc2_m1TMyBN4BLM2vA4jLbvkLQiBYgh3JnzkCZuas85cxdrTwLw/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 :
Perhatikan URL script
warna merah diatas, itu adalah kode script jQuery.min.js seri
terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda
sudah terdapat jQuery.min.jswalaupun serinya berbeda, kode warna merah
diatas tidak perlu lagi Anda masukkan. Cukup satujQuery.min.js yang
ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
Sedangkan kode
warna biru : 15 adalah jumlah
slider yang ditampilkan. Dan news adalah label
yang ditampilkan pada slider nantinya (Ingat besar kecil huruf harus sama
dengan label yang sudah Anda buat).
- Langkah selanjutnya adalah memanggil slider
tersebut agar muncul di blog kita. Cari kode <div
id='main-wrapper'>, kemudian letakkan kode berikut ini diatasnya :
<b:if
cond='data:blog.pageType != "item"'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write("<script
src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
$("#carousel .container").jCarouselLite({
auto:4000,
scroll: 1,
speed: 800,
visible: 5,
start: 0,
circular: true,
btnPrev: "#previous_button",
btnNext: "#next_button"
});
})})(jQuery)
</script>
</b:if>
Kode diatas bisa juga
anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan
diatas footer.
- Langkah terakhir, save templates dan
lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider
Carousel itu akan muncul di blog Anda.
Sangat mudah ya, anda tinggal ikuti langkah-langkah diatas dan baca dengan
teliti jangan terburu-buru, Jika masih ada yang kurang jelas silahkan
tinggalkan pesan pada kotak komentar yang ada di bawah. Itu tadi tutorial
singkat tentang bagaimana cara membuat slider Carousel otomatis
berdasarkan kategori atau label kali ini, selamat mencoba dan semoga
bermanfaat.
.jpg)
.jpg)
