Cara Pasang Slider Carousel Di Blog

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.

DEMO

Berikut Tutorialnya:

• Login seperti biasa ke akun blog sobat.


• 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 orange 15 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.
Kode Script:

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



• Untuk membuat slider carousel menampilkan seluruh kategori label, ubah script yang bercetak tebal miring dengan script dibawah ini:
  
  
  

  (&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);

  
  
  
• 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   

Semoga berguna dan bermamfaat    
Follow twitter saya ya (twitter.com/mampirbro), ntar saya follback 
Salam MampirBro

Seluruh artikel postingan pada blog ini dapat di copy-paste dengan syarat menuliskan sumbernya dan memasang link aktif blog ini pada blog sobat | Bagi Sobat yang menemukan link download bermasalah (brokenlink) dapat memberitahu saya di sini

Gunakan layanan 4shared generator (klik di sini ) untuk mempermudah mendonwload file dari 4shared tanpa perlu login.

Artikel Terkait:

Blog Tutorial

• Alternatif Expand Template Widget
• Cara Membuat Widget Random Article
• Membuat Sendiri Aplikasi Android Untuk Blog
• Membuat Form Kontak Admin
• Pasang Tombol Sharing Lintas.Me
• Membuat Sendiri Aplikasi Symbian Untuk Blog
• Membuat Email Dengan Domain Sendiri Gratis
• Cara Mengarahkan Gambar Google Ke Blog
• Membuat Judul Blog Bergerak Di Browser
• Membuat Anti Select Text Pada Postingan
• Mengatasi Tata Letak Blog Yang Tidak Teratur
• Widget Free Proxy
• Menampilkan Widget Hanya Pada Halaman Postingan
• Pasang Widget Follower Box Twitter
• Widget Random Ayat Al-Qur'an Di Blog
• Membuat Footer 3 Kolom Di Blog
• Widget Random Kata-Kata Mutiara Islami
• Parse HTML Tool
• Cara Praktis Pasang Foto Di Hasil Pencarian Google
• Pasang Meta Tag Friendly SEO Super
• Buat Flash Banner Online
• Cara Pasang Widget Pop-Up Di Tengah Blog
• Cara Upload File Flash Ke Google Site
• Widget Cek Lokasi Dari No.Handphone