Cara Buat Carousel Otomatis Berdasarkan Label

Oleh Syafdillah

11 Januari 2016

Baik, langsung saja kita terapkan dengan langkah sebagai berikut :

1. Masuk ke template yang akan ditambahkan slider carousel, pilih Template, lalu pilih >> Edit HTML, kemudian cari ]]></b:skin> kalau sudah ketemu tempatkan kode berikut ini di atas kode ]]></b:skin>

#carousel{width:960px;height:185px;margin-bottom:0px;position:relative;display:block} #carousel .container{position:absolute;left:55px;width:900px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqmG8n2gGc2z8-tif0RSkqDiYSfHFfuKDfJ5oqXSlViQMgD__fiMWXd6K1HYKhTmHYE16yiAxg_QcYUusVyBMXyoNt0posLjDleizCqfi8p-8hTf9p-pAHi9A14iMDtenJ849_itWVV0U/s1600/scroller-bg.png) repeat center} #carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdEoI6TB0pc-ouAlX7OFdHbTZCBz6xJ3GpPXRFNhtBGIXZe3-nYbxS0qhRTNYLTUtbWxlAYZdF_z58k4MTHr5-3rmBGLtSJZZsB0skRKO7yhhmIbHUOFdHde0UEs_4tAg4bD7QVksfGnU/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/AVvXsEg6gUaZHXpB1bJWHh8ooDhx_z_w4M6gTiJpnSblymIXEiiJY49eZ2iaET1Cu25PmOCYedgpIumRjYJsSSWa56cycfKN5qZt0qkgUJTTzrybFnoXyMdprqYdKUGw5BGHUGLF0A-SvKCFNkc/s1600/prev.png) center} #carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqfde-jzWroS0ozBN0dZ6xz4RjGvLbVL3Cb43_u8QSho5Y8OuxE6PY_hto5urZsJKsysvDnwB7_kPZ9M5KO16duKrR8KzeYU6i6Rij-a4z_kQBjS6DftROHC6cwRhRncshnw1rp-PSVXA/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/AVvXsEhziDfVkoIWwIvQVHTfsSpQ2RFyjnpntUQW02gYU3miJLMbcTdYQkkJovEKkMMCZrK3JcGK6oYRBzknzwpmx19NJks6PyUU0u4XBVUVZi1IZPnCdzQoa23Z64n9FX5boaW0nTAUoFd5Gb0/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/AVvXsEg3AKENnq9dkbdIacS3X8x-J3u-Kq3ItoM-jhvIXDQ0bWHAuPPgBE-HavQ-Yblv25tufmEqkETpSNpCuGtQWO0WujOmmAK1LFUtkFgRm6Njyg2ksmlbT0OKMo5KljcBETyVlQm9Tk_7oiI/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}

2. Langkah selanjutnya cari </head> jika sudah ketemu letakan kode berikut ini di atas kode </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/AVvXsEg5ted4UhNRthaenlg91UvtIDwXXMqlxqqDANn6JhnFhyu2YL5WI1qGHhDTU3-9nLtOfOUwsaE3UZLwQUL4Qnb1_PAThPh_JtXVP4sMwZW-nMmYE4LY-hdq9F_KdfH85MjDnpzfMU9ybIw/s1600/no+image.jpg"; showRandomImg = true; aBold = true; summaryPost = 140; summaryTitle = 25; numposts1 = 100; label1 = "Action"; 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>

3. Terakhir cari <div id='main-wrapper'> jika sudah ketemu letakan kode berikut ini di atas kode <div id='main-wrapper'>

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

4. Simpan dan selesai. Catatan : "News" adalah label yang akan ditambilkan pada slider, "15" adalah jumlah postingan yang akan ditampilkan pada slider, "950px" dan "185px" merupakan lebar dan tinggi slider. Dapat anda sesuaikan dengan keinginan. Ok Terima kasih, selamat mencoba.

Ayo Like Facebooknya

Tag : Blogging