Cara Membuat Slider Carousel Di Blog

KUCOPAS - Cara Membuat Slider Carousel Di Blog. Slider adalah content yang bersifat slide atau berjalan secara slide berurutan, trik membuat Slider Carousel diblog ini saya dapat dari Maskolis dan akan saya share untuk sobat semua. Slider Carousel yang saya kuak ini sangat sederhana dan hanya menggunakan jCarousellite script tanpa menambahkan efek easing dan mousewheel.

Fungsi kerja dari slider carousel ini akan menampilkan artikel terbaru atau juga bisa di setting menurut (berdasarkan) label/kategori blog yang berjalan slide, jika pilihan diklik, maka akan terbuka artikel selengkapnya. Fungsi sebenarnya hampir sama seperti pada artikel Cara Membuat Foto Slide Show Di Blog yang sudah pernah saya posting sebelumnya. Sobat bisa membacanya lagi biar menjadi lebih jelas.

Berikut contoh gambar screenshoot Slider Carousel diblog yang akan saya kasih trik tutorialnya.

Cara Membuat Dan Memasang Slider Carousel Di Blog

1. Silahkan sobat >> Login/Masuk ke Blogger.com dengan akun sobat.

2. Pada dasbor pilih menu >> Template >> Edit HTML.

3. Cari kode ]]></b:skin> (Gunakan CTRL+F untuk memudahkan pencarian).

4. Jika sudah ketemu, sobat letakkan kode berikut ini tepat sebelum atau diatas kode ]]></b:skin>

#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/AVvXsEhnt2fNAhx1ptNi9DbKPoSTmQry5sEnVkb-78-RAoOtgCXkDVFqJykLNIP15z12s6TooJxt9ZlYiKECmfZuTXbKPPFSCaEEaFOsuyjERposmvhX3UYbMRLPQfYWtaB26pFATZkUqaUa3dc/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo4DnAMTUSBRirQmZFB1KdBJzBJhFFDeqoIqLbl6eqn_UsfRbBpTRy6Ofg3eVgkr9zMm2Tur0mpJDanRxEWNKxHZXMB3eBmiouY9FJ4CMtnxR6UatsUpSB1SMk7iZSbZl6Djy5GOhrwnc/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/AVvXsEjmK3Z8QzJkpuCckJzb6xUl7O0eJxjf22sz2ijmZVQVKtrwZy3ZtvCnYMUfZKRPiDhtaRp9SoUgwv6SJMpENBnvcrSrkB8mfGAskq7g2MPfSmgPvXPiLizsPbCmbHbONoXg1aDT8-y80Rs/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo2IsgNl3oeXznFSPr3c53jtjBWSvFka9bhMejjUsKBmfpDDbmulGhpLtk-jY99qVj-eiCSGvbaND1_0DAe63dX4zZBpShgvPiisZchfnWGsBKUa6LhWnT57zPuVQzACWThsJYph19I6Q/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/AVvXsEicJVLYkEOohTea__t1ZfESWdFcShLY6Jr7pNa5yKsKaRSkNWieYExhoSaNz4VhKNRkgOGNbIlDsP3b5vFTGJ0uTAAFmnDP02OypxZqSZD9XQO9DMiWzpRwhw021pa3r1F1ID0Sri3JTS4/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/AVvXsEh6hfNc6mKfTVjEsU2-ObicyTlM83nbdSS7a1QFuRbL6J1mcuKbFfuk-7Wd5X4Q8jX4Gynn3wZiyagBqeuha3sDwNoAcGrWgepxkSz5nHaZor6XEwsOSmnz3tjg5BuvMhaQQNTY8LpGfss/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.

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

6. Jika sudah ketemu, silahkan sobat masukkan kode berikut ini tepat diatas atau sebelum kode </head>

<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/AVvXsEgmSt-g9k-IAJ7JzHPJ0vWwoCYG7mk_UbLI-ogcpDYjlZPjG3Ckx6K5ugTDz_cLn9YWyc9QY3sWjsI14S_rCO4ckxDVensOog3T_RD3suTQK3Wch1xbu3XV2vUIKiyDaq5Bw4ye7bREfNs/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 daftar 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 ketahui, besar kecil huruf harus sama dengan label pada blog yang sudah sobat buat. Contoh label yang menggunakan spasi, tutorial blog penulisanya jadi tutorial%20blog
• Apabila sobat ingin menampilkan Slider Carousel untuk daftar postingan Artikel Terbaru, maka hapus saja kode /-/sport sehinga menjadi seperti ini document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results

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

<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 Homepage (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 pada postingan saya yang sudah saya share sebelumnya. Yaitu tentang Cara Menampilkan Dan Menyembunyikan Widget Tertentu Di Blog.

• Kode Slider Carousel 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.

8. Setelah semua langkah-langkah diatas sudah sobat terapkan, maka silahkan sobat klik >> Preview/Pratinjau, demi untuk menghindari kesalahan waktu Edit HTML dalam Template.

9. Langkah yang terakhir, jika hasil dari Preview/Pratinjau sudah seperti yang sobat inginkan, maka silahkan sobat klik >> Save/Simpan Template dan lihat hasilnya.

Jika sobat sudah berhasil, jangan lupa Follow, Like, atau jika ada pertanyaan seputar tutorial Cara Membuat Slider Carousel Di Blog di atas, silahkan kirim komentarnya pada Form Comment yang tersedia dibawah. Semoga artikel posting yang saya share ini bisa sangat bermanfaat untuk sobat KUCOPAS semua.