Tutorial blog kali ini bagi sobat para blogger yang ingin memasang slider carousel otomatis berdasarkan label pada blognya. Jika masih bingung apa itu slider carousel, lihat gambar dibawah ini, seperti itulah tampilan dari slider carousel otomatis. Intinya, slider carousel ini akan menampilkan gambar dan judul postingan sesuai dengan label yang kita masukkan.
Klik ke menu "Template" -> "Edit HTML" -> centang kotak kecil expand widget templates.
Sebaiknya sobat backup terlebih dahulu template sobat untuk berjaga-jaga jika terjadi kesalahan pengeditan.
Pada kotak Edit HTML, carilah kode ]]></b:skin>, kemudian copy kode dibawah ini dan pastekan tepat diatas kode]]></b:skin> tadi.
Kode Script:
#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/AVvXsEj0XoG-s2OQPSlqtBc0bACkzeAL-Vf_Lc4qZVxLX85NGDt-D4f1lNvKA4E3tB9URRJGc8avcsaxyGzVLWpSbqOG0NF4RItqnG3WuNW6mzyZSqc_p5bfeZUFw4r8iJueiMITvmnp0VZjTlY/s1600/scroller-bg.png) repeat center} #carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisOeL3hzKTlE_K2w9eXVtIhJ8O6NsIENM09HO2ExlTBvmgwpv8tTxHe2t-SB0dT4FveycELU5_CJI4bHR9AB9ZACPjOaH6C0p41HmNhObWy8t_x5k6SjpjMVA_UW7pxSDZB_CvpkOWchg/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/AVvXsEjOSaQrRAnEU2YEcjrVhIIBxLAdJ94BPiOjnXtQ5cGaTkFWeYkqTrjgCjsGy15cmcqE1K7YylldAge7mBpAXuFLlWKHmHP8dcs3Pu5-M4v0e-3goQ_pZ8rwyuRhE4husJFQlg4a0TyKrNI/s1600/prev.png) center} #carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7dvB0ryDRlrUk3SzOaZ0S29kpFBpuN1iy8Cu-n2ox4QkIQzpWHLnBmHoX6w8MF8Wqss5tkOy2kKCiDrRLP9l8p-ua7DlmErAvEZZABg0VBnp7j0R6hoEKXeSMZha4txupK1kdDjJKhuk/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/AVvXsEhhQOEsSKvA4_Z-e_mGDzPVFzBbj797iUUSUmXT9BIDJIdahBBkmpQVnSMyYge2_IDsGP_eKQEDiPm2N9-xa_-1-RIPerMJma-PAcApGN0tyB1i6kIWLLN39gFvD0vUU2NnwEP2dbJQY80/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/AVvXsEiExzmRT3ozRyfwlh9RninQdeyOlWsXAaVAGlkQlF8esukioyUEAx7gcQSfLiIta5E4fySv1mS31Jyi1FlSauz1tIjO5NrHIeu-Oq8K6CvXdKQb6Nx6p3c6WzznmF4tI6I43-t0orsKzuA/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}
Kode berwarna biru adalah tinggi dan lebarnya slider yang saya gunakan pada blog demo. Silahkan disesuaikan menurut ukuran template blog sobat.
Selanjutnya, carilah kode </head>, kemudian copy dan pastekan kode script dibawah ini tepat diatas </head> tadi.
Kode Script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> <script src='http://mabro-javascript.googlecode.com/files/carousel-slide-mabro.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii_ciQ2IjQIVKL98ddoAlx23KlrcdAMza7bvBM4h1Ard4NDIctWh09sfuPPaYIdwpuKso11Pp6zb7cy5fqXoB2NvZBFvwkLfIdnaErYKKzGLzefx6-FJXyLexr8FIiqFnRTliiLaB_sBA/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>
Kode berwarna merah adalah kode script jQuery.min.js versi terbaru yang saya gunakan. Jika ditemplate sobat sudah terdapat jQuery.min.js dalam versi berbeda atau sama, kode berwarna merah tidak perlu lagi digunakan dan dihapus saja karena cukup memakai satu jQuery.min.js saja walaupun versi berberda.
Kode berwarna orange15 adalah jumlah tampilan pada slider. Dan "News" adalah label yang akan ditampilkan pada slider. Gantilah label news dengan label yang akan sobat pakai pada slider.
Langkah selanjutnya, carilah kode <div id='main-wrapper'> dan letakkan kode script dibawah ini tepat diatasnya.
Kemudian save template sobat atau dilihat dulu dengan menekan tombol preview untuk melihat langsung hasilnya sebelum disimpan.
Jika cara diatas berhasil, maka sekarang blog sobat sudah menampilkan slider carousel secara otomatis menurut label. Silahkan dicoba dan dipraktekkan sendiri sob. Semoga berhasil.
Thanks juga buat masbro maskolis.com yang udah kasih tau caranya
mas bro saya mau tanya cara pasang foto di blog saya ini gmn ya? blog saya masih baru dan templatenya sudah terdapat slide. yang tidak tahu cara mengganti fotonya. makasih http://techdload.blogspot.com
Home
.Apk
mas bro saya mau tanya cara pasang foto di blog saya ini gmn ya? blog saya masih baru dan templatenya sudah terdapat slide. yang tidak tahu cara mengganti fotonya.
makasih
http://techdload.blogspot.com
@Wahyu Almandary: coba dicari kode img atau jpeg atau png pada template. biasa'a itu adalah kode gambar slidenya
mas bro, slider carouselnya gk muncul....