Cara Pasang Slider Carousel Di Blog

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.

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/AVvXsEjrXC70e4DbdBncAuwobv5FW65751fQ_p7vJly0OO0DKkK5SeNvC3Y2B7_jI-f41-VCFAJdlGdoaOnfzoUukVpJuMQQ6ijkh3loEn8hBRc6DtyqLOevQLpEvOKh1SoWBACd3YKAAxdRv70/s1600/scroller-bg.png) repeat center} #carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicF83RR1FWL6s_0H8AS5VClM2HvidYLQ6OP_r6Vy4IK4YwCsCmw1E-kZSbG4Mo3-6mYFJykUymXJfOB2uU2KWDCsefyB4fr3ShXZCk6uJfnBBs6zJ2mYZ7KTbrYEx6mFJcKkkVO_gI0oQ/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/AVvXsEhq0uMtIbbHT93RkYLQ4ujWD1qeMsva4o4_931Lv1wRW5kHiwrrt94KyC8DujNlcRRYalRILJfehTnFevKQOfDznA59qhx5Tq7iOu3XtZCDQ072zzGBNuZXWFbldXjkzgclnSCJUNGFw0I/s1600/prev.png) center} #carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7foofMcaaQhAyfwzIlNizwBXVqLSBUklSVxxOSUOrFZa2ISnntjdS-vR5Tj8Eiy0MpQP3pl4ZVCsUZBJpKMAOqriXvR7quJJkTKHr2J7jMDczXQaRLtrkuoG0Vnkay22ryTllcOmHhyphenhyphenI/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/AVvXsEgn4s5VIK79QNdy1pC01jVzaDCeVgj_orM8zMp0ElKobfXvkaMqsw_cuIrp-R8QidV3b6lfhXnhwmox3YhyphenhyphenbX_tY-cShnAoDpfOralOLxGDpaZFC7FdpEW8Kclwf6MqDgRM2KLLXUyvYeE/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/AVvXsEgVsbKmDGl6bDK-_3w05K01Iy-VrHnez__GwPIBME2XFA-lTiITGYQgfuaqzQDT1OsIYTsDDtlcxZ7m4161Ow8rIG8OOgqosc263-CyZcXHS5ykuL70Twbx7OVGSoiRtab7fi64kExW_tg/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/AVvXsEgnqIS1Aoo4_mknKKajMKR8QN9rbci_Z7uj4QZWZ1yIdykRyHc-J7O-UxQHq1yv9WIqM_xJTaHcvYctdo-5Ce1ljT1zylG1dCZX_wSsAmnC19qWYLPhMankC5o8iypwaNImwVjSuyhKiCM/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.