Cara Membuat Slider Carousel Otomatis Di Blog Berdasarkan Label (Categori)

 Cara Membuat Slider Carousel Otomatis Di Blog Berdasarkan Label (Categori) - Trik kali ini saya akan membahas bagaimana cara membuat dan memasang slider Carousel otomatis di blog berdasarkan label. Slider Carousel yang saya share kali ini sangat sederhana dan hanya menggunakan jCarousellite script tanpa menambahkan efek easing dan mousewheel.

 Fungsi kerja dari slider ini adalah sama seperti pada Cara Membuat Foto Slideshow Dan Slider Di Blog yang sudah pernah saya posting sebelumnya. Sobat tinggal mengganti dengan label sobat dan slider ini akan bekerja sesuai dengan label yang sobat masukkan.

Berikut contoh gambar screenshoot Slider Carousel Otomatis Berdasarkan Label (Categori) Di Blog:

DEMO

 Cara pemasangannya pun sangat mudah, jika sobat sudah pernah mempraktekkan artikel saya yang berjudul Cara Membuat Foto Slideshow Dan Slider Di Blog, Tutorial trik kali ini terasa sangat mudah, karena langkah-langkah pembuatannya hampir sama.

 Untuk membuatnya, Silahkan sobat ikuti saja langkah-langkahnya sebagai berikut di bawah ini:
1. Silahkan sobat >> "Login/Masuk" ke Blog dengan akun sobat.

2. Setelah itu pilih blog yang ingin sobat tambahkan slider ini.

3. Pilih menu atau Masuk ke "Template" >> Edit HTML, Jangan lupa Centang "expand widget templates".

4. Untuk menghindari dan berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, Backup dulu template sobat.

5. Setelah semua langkah-langkah diatas sudah sobat lakukan, Silahkan sobat cari kode ]]></b:skin>
(Gunakan CTRL+F untuk memudahkan pencarian)

6. Jika sudah ketemu, Kemudian sobat letakkan kode berikut ini, Tepat sebelum atau diatas kode ]]></b:skin>
Berikut Kodenya:

#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/AVvXsEjfxHvj13-t0hHbfP1We5xVXUFVo3etKr7-1fuxAry9UglWmM0dd6Cg9RMFeVJw6qleHRZSDw_yg5l0LWt8z3AzQG5N64nlYMgTw-DL74ofonkka3LxFHMSOX73qCjyeLMCRuVS1G_OhwU/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZhKHjWv8IAu8ZlIJB1iVWk-Vo4D4bSyFJzjALWpTmM3wjUZY9b2EPhhzhO7Pj_4Z7BHchOItF_Zg-FIJGeuOIrvM8Zfpgi9ZwfUEgYD4zckEue3sDs7A0XoqLTHuISCNPuOKi7kZfpas/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/AVvXsEg8OVKJ_TKS9D4fdMkMuAYy2i1AlUHoherB6J0ng6lJduu-m_k8dXhWz-4qeVLTscmz-4eBLVFt2ZCAx6L0tEcqyQpBNRSqTXzlbJ-R_hn8VnQ7hQRYBRUUUbWFogir83uoU5x3BjD7ahU/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO7SMWuh5MXdTmPVx48D7UTU127kLqu3snx-K-Q2CotvICQnz70PWEXmRK1O7luEQBLbZozw90hzPKBxrzq4FVG5GLVY2wnfuPbk5CsBr-o8LjBoUK88DKKegbB7Gyzg6FEFJiefKNJOk/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/AVvXsEgP2IMT9rsiJFaiqjViomPP8XJwav42qAi4_ut4CfcHp23S1E7IwcYjiLfPbD7AAiRiqdZmHWe9E-uOGWlRPVlW-xhhlWEvV4z4gCb7oORI2gmGDnrBUPF2XAZPv8kJF4t9QVpfSNqymEc/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/AVvXsEhB3C4WNJiB9KjrIn-M06r_-WN8shduFg2kSUvZna7t9d0Uh3lJbvpzgZSvyKZtvUXrl4mYQug024LhLffgcRSI7ShWMSYmSOxZla3XOUmlH1owiyiGz4yB2pk1fM4j4RALt2dHsOvKGfg/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}

Catatan:

• width:950px; adalah Lebar ukuran slider keseluruhan, silahkan sobat ganti nilainya sesuaikan dengan lebar template blog sobat.
• height:185px; adalah Tinggi ukuran slider keseluruhan, silahkan sobat ganti nilainya sesuai dengan keinginan sobat.

7. Langkah selanjutnya masih pada posisi "Edit HTML", Silahkan sobat cari kode </head>
(Gunakan CTRL+F untuk mempercepat pencarian)

8. Jika sudah ketemu, Silahkan sobat masukkan kode berikut ini, Tepat diatas atau sebelum kode </head>
Berikut Kodenya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://kucopas-js.googlecode.com/files/carousellite.js' type='text/javascript'/>


<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaD766MLdPnoS0n3CxJiVhPO9OxLwHbl5LzaE0zfqUcXLG8xTSo1__pH1GZ-tgO1n58J5yiFAhHzK5pX3nAAd8NRcYOH_NnuAEuon0cW7lRhaRMT-hJX2tLYcFU18rGZ5PIYd6aQaj_9s/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>

Catatan:

• numposts1 = 10; adalah jumlah slider yang akan ditampilkan, Silahkan sobat ganti nilainya pada angka warna BIRU sesuai dengan keinginan sobat.
• label1 = "sport"; adalah label yang ditampilkan pada slider, Silahkan sobat ganti tulisan warna PINK sesuai dengan label pada blog sobat. Jika ada space (spasi) pada label, Silahkan sobat ganti spasi dengan %20. Perlu sobat tahu, besar kecil huruf harus sama dengan label yang sudah sobat buat. Contoh label yang menggunakan spasi, tutorial blog penulisanya jadi tutorial%20blog

9. Langkah selanjutnya adalah memanggil slider tersebut agar mau muncul di blog kita. Silahkan sobat cari kode <div id='main-wrapper'>
(Gunakan CTRL+F untuk memprcepat pencarian)
Kemudian letakkan kode berikut ini tepat diatas kode <div id='main-wrapper'>
Berikut Kodenya:

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

Catatan:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
-
-
</b:if>

• Kode warna HIJAU di atas adalah Kode yang hanya menampilkan Widget pada Home Page (Halaman utama) blog saja. Jika sobat ingin menampilkan pada semua halaman blog, Silahkan di hapus kode yang berwarna HIJAU, atau sobat juga bisa menggantinya dengan kode menyembunyikan atau menampilkan widget tertentu pada halaman tertentu di blog, pada postingan saya yang sudah saya share sebelumnya. Klik DISINI untuk melihat kodenya.

• Kode diatas bisa juga sobat letakkan di bawah atau di atas navigasi menu blog sobat atau bisa juga diletakkan di atas footer blog sobat. Silahkan berexperiment sendiri untuk mengaturnya sesuai dengan keinginan sobat.

10. Setelah semua langkah-langkah diatas sudah sobat terapkan, Maka silahkan sobat klik >> "Preview/Pratinjau" Demi untuk menghindari kesalahan waktu EDIT TEMPLATE.
11. Langkah yang terakhir, Jika hasil dari "Preview/Pratinjau" sudah seperti yang sobat inginkan, Maka silahkan sobat klik >> "save templates" dan nikmati hasilnya.

NB:
Jika Sobat ikuti langkah-langkah diatas dengan benar, Maka slider Carousel yang sobat buat pasti akan muncul di blog sobat.

 Jika Sobat sudah berhasil, Jangan lupa Follow, Like, atau jika ada pertanyaan seputar tutorial Cara Membuat Slider Carousel Otomatis Di Blog Berdasarkan Label (Categori) di atas, Silahkahkan kirim Komentarnya pada Form Comment yang tersedia dibawah. Semoga artikel posting yang saya share ini bisa sangat bermanfaat untuk Sobat KUCOPAS semua.

Update: 17/12/2012

---

| Supported by http://kuc0pas.blogspot.com |

---