Tips kali ini saya akan sharing tentang Cara Membuat Slider Carousel Otomatis pada blog, Slider Carousel disini adalah sebuah widget yang menampilkan dari keseluruhan postingan dan juga bisa untuk menampilkan berdasarkan kategori atau label posting yang ada pada web/blog. Nah, untuk anda yang ingin menambahkan widget ini pada blog maka blog anda akan lebih kelihatan profesional. Ikuti caranya di bawah ini, tapi sebelumnya anda bisa lihat demonya disini
Cara Membuat Slider Carousel Otomatis ini sebenarnya cukup mudah, anda hanya memsukan code pada template dan ganti nama label yang akan ditampilkan didalam Slide Carouser tersebut. Oke langsung saja perhatikan cara membuatnya di bawah ini
1. Seperti biasa masuk ke blog anda
2. Selanjutnya pilih Template
3. Untuk menghindari terjadinya kesalahan, Download full terlebih dahulu template anda
4. Kemudian pilih EDIT HTML
5. Cari code ]]></b:skin> (gunakan CTRL+F atau F3 untuk pencarian lebih cepat)
6. Letakkan code di bawah ini, tepat diatas code ]]></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/AVvXsEh5DEUNC7oDSa3FcNeY8NTwdG1u5B9Iwk3opuVutBjnrelGzm4SPxNWFpTpMZpq0KC-ljVMNI6KqKO6F1ak_JzdaUMYLAHosT8inO8-ytwN1Og9KC09pxFoOVUUf3PQ3_oFasGyhT6GIG4/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiilc2tYf-0PWI3TtL4EqflALIMsg8meBoFW31XVQTPqhguO3RQm7dF83Rj8OjFEeqXS_9bSs_jbQIf678CW3V5pk-g4ejKkwzBsR1pLrM-HN0Sx309Ux_H3VurYjfb0juAZL0hoVZw-D4/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/AVvXsEhP1YLLl2e75FNp2HH88milvWr4LtL7wFABkMZ2ly_vbB3RnCDc3f1LkktJFW_lCJQRqvXwEH4ssV2zIrdwDCMtE0fAtZyi2zuus8d9aEoCxKoONJbYiToQvmiSY9CTG1qjjGv8OtKRRts/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcLsE6luR4_Qtn7AZHBoKBWaLuhRZyIW2hRiMfUV6_aesJP9HARI9vOIwCEK5yuuc3eM-gN4nRlo_HyFhM4c8GjrcZyL_DUMqF_Lv-Wt23tbWYp-dRxV6VRMf-i-om6N9ovE7TkSmfsGk/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/AVvXsEgq2KrB8EbdH6E-_LtSzEsBjfqUJo32kqIJ4Wbzc6z5-_mMZpjfykx0D2kPvOY7WmToFvJTPjQm_IdjgzHKyq2ORVLdBsGndJ_3QpuTIIiuF8nNrwluSPrCM_uQEc8FO_k0slEDm63Vnsk/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/AVvXsEhJnS9SZZ2xj9EqQlPdkhDFKDFUr03Ek7T_qTYDsxU1jFAJ_ktjRWBugj4GuAeqJH1aa_MzzPw0tXxLBaLxM1Ew4djQuyE1axULP6dwQQrechRvN0mTMJyunyYKwrqxfAo1nTnZpF4tVkg/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}
#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5DEUNC7oDSa3FcNeY8NTwdG1u5B9Iwk3opuVutBjnrelGzm4SPxNWFpTpMZpq0KC-ljVMNI6KqKO6F1ak_JzdaUMYLAHosT8inO8-ytwN1Og9KC09pxFoOVUUf3PQ3_oFasGyhT6GIG4/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiilc2tYf-0PWI3TtL4EqflALIMsg8meBoFW31XVQTPqhguO3RQm7dF83Rj8OjFEeqXS_9bSs_jbQIf678CW3V5pk-g4ejKkwzBsR1pLrM-HN0Sx309Ux_H3VurYjfb0juAZL0hoVZw-D4/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/AVvXsEhP1YLLl2e75FNp2HH88milvWr4LtL7wFABkMZ2ly_vbB3RnCDc3f1LkktJFW_lCJQRqvXwEH4ssV2zIrdwDCMtE0fAtZyi2zuus8d9aEoCxKoONJbYiToQvmiSY9CTG1qjjGv8OtKRRts/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcLsE6luR4_Qtn7AZHBoKBWaLuhRZyIW2hRiMfUV6_aesJP9HARI9vOIwCEK5yuuc3eM-gN4nRlo_HyFhM4c8GjrcZyL_DUMqF_Lv-Wt23tbWYp-dRxV6VRMf-i-om6N9ovE7TkSmfsGk/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/AVvXsEgq2KrB8EbdH6E-_LtSzEsBjfqUJo32kqIJ4Wbzc6z5-_mMZpjfykx0D2kPvOY7WmToFvJTPjQm_IdjgzHKyq2ORVLdBsGndJ_3QpuTIIiuF8nNrwluSPrCM_uQEc8FO_k0slEDm63Vnsk/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/AVvXsEhJnS9SZZ2xj9EqQlPdkhDFKDFUr03Ek7T_qTYDsxU1jFAJ_ktjRWBugj4GuAeqJH1aa_MzzPw0tXxLBaLxM1Ew4djQuyE1axULP6dwQQrechRvN0mTMJyunyYKwrqxfAo1nTnZpF4tVkg/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}
Keterangan:
Untuk code yang berwarna merah adalah tinggi dan lebar pada slider ini, jadi sesuaikan dengan template yang anda gunakan.
7. Langkah selanjutnya cari code </head> dan letakkan code di bawah ini, tepat diatas code </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1GwfZs-Jh2RI8hOqaYR_CzGyuf0buaFxfOJ35kQFiWWjh7mbzP8i9j6Qh6WtIPqHbuGysE0r634_jEBQZSpdnYKJrrAEV8YMiUmCSyyrv0oATBjkA80awlNpiLB8fKgVL7HK-W6yUBys/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts1 = 10;
label1 = "Sport";
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>
<script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1GwfZs-Jh2RI8hOqaYR_CzGyuf0buaFxfOJ35kQFiWWjh7mbzP8i9j6Qh6WtIPqHbuGysE0r634_jEBQZSpdnYKJrrAEV8YMiUmCSyyrv0oATBjkA80awlNpiLB8fKgVL7HK-W6yUBys/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts1 = 10;
label1 = "Sport";
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 code diatas yang berawarna merah, itu adalah kode script jQuery.min.js jika pada template sudah terdapat kode tersebut tidak perlu anda masukan lagi code script jQuery.min.js tersebut. Dan untuk code berwarna biru 10 adalah jumlah yang di tampilkan pada Slider sedangkan Sport adalah label yang akan ditampilkan pada Slider jadi bisa anda ganti sesuai selerah anda (besar kecil huruf harus disesuaikan).
8. Selanjutnya untuk memunculkan Slider, cari code <div id='main-wrapper'> dan letakkan code di bawah ini tepat diatas code <div id='main-wrapper'>
<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>
<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>
Catatan :
Code di atas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diatas footer
9. Terakhir Save, dan lihat hasilnya
Itulah sedikit tutorial tentang cara membuat Cara Membuat Slider Carousel Otomatis pada blog. smoga dengan tips diatas blog anda tidak kalah jauhnya dengan tampilan blog-blog profesional lainnya.
sumber : Creating Website
