Home » » MEMASANG SLIDER CAROUSEL UNTUK MEMPERCANTIK BLOG

MEMASANG SLIDER CAROUSEL UNTUK MEMPERCANTIK BLOG

SEO BLOG kali ini ingin berbagi tips-trik tentang memasang Slider Carousel yang berfungsi untuk mempercantik penampilan sebuah blog. Dengan memasang widget ini, tampilan blog yang kita miliki menjadi semakin keren dan terlihat lebih profesional. Jangan takut widget ini akan memperberat loading blog, ada cara untuk mengatasinya yaitu dengan meng-kompres (istilah aku) semua text-javascript yang ada kemudian menyimpannya (hosting) dengan bantuan pihak ke tiga semacam Google Code atau Your Javascript.

Cara atau trik membuat widget slider carousel ini terus terang aku peroleh dari blog tetangga (http://www.maskolis.com/2012/04/membuat-slider-carousel-otomatis.html). Beginilah tampilan widget tersebut  :

SEO Blog

Tampilannya cukup cantik dan dapat dipergunakan untuk mempromosikan artikel-artikel terbaru atau artikel-artikel unggulan yang ada di dalam sebuah blog. Di dalam beberapa blog aku yang lainnya juga menggunakan widget ini, namun dengan sedikit modifikasi dalam hal tampilannya. Terus terang, aku mempergunakan atau memakai widget ini dalam kaitannya dengan upaya untuk menurunkan tingginya prosentase bounce rate, dan hasilnya cukup efektif juga. Karena apa, secara logis widget ini menampilkan artikel-artikel dalam bentuk slide yang bergerak, sehingga secara tidak langsung menarik setiap visitor untuk memperhatikannya, dan bilamana kita beruntung, visitor tersebut akan mengakses salah satu atau beberapa artikel yang ada di dalamnya.

Cara memasang atau lebih tepatnya membuat widget slider carousel inipun tidak terlalu sulit, cukup ikuti cara-cara berikut dengan seksama dan teliti.

  1. Login ke blogger dengan akun Anda
  2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
  3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
  4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
  5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini 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/AVvXsEiDEtBBqFCmcDQf0GBVpC3nKYwIXrWqeCgshEEolibxidFQx_x81o-U-rqZFiwlFWWR0H_b6YttVyOkKP6Bvn-xKw9tXCAl4Qbg3-1vniMFE62PBM3WEa93T1u4WKOaMEE-dsAoydnwxTQ/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-lDondWWObi_8csrKJWN5PsloWMGXhPzbTzCF0w6CggCfZYje4CQw_P1MnGU8dugX2Nt7R9Sdsza6DOUinoiT3wPu-ldi7HjZy99Ncgcb-KMWT8gL7ozjt1ifuVNtYzJRUdl39BjjNBo/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/AVvXsEgXdMXP4XHeZzH4QV4bVnIqfZopiLoO8Llz_vAnmRQfSs0H8BZdePKZO21muANpYDloqdm1HGy6KxLeCgyQrZYAodphG0RQnS-TY1Fq-CR4EpAvqTXOWVbIr3nxvMRmSjDr41TAaxnAoGk/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4vVm8U2E7WzPWPizuTIgH99V8dLp_UHWq45tW-zgadSLchQltwVQ0prXtTZbpdjNt_0eBxe-wZpjuLZBf4W9Hxz-xFiYzS4QJ0o6KTBVQTWR8441eqaIXrvBc6DB7c1ZMzuY7G0Pkqfg/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/AVvXsEja_7Q0l4xO6RizuxzOIRiJnUtBYufhOo5e9cOrwjb4D9QgboE_76K5WjZMuGxkALlrXFAYy-jFtn5lNYbpofW5M6u2rHhOuwNtbKo1Nb9LkkRMmlsBHTefAyX7yk6UZURCoIvib00mKPU/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/AVvXsEhfiZ6aMUtM-_GsYisStgdMl2oZ2aQPjY1b5zUE7Nh5BvTNiTXw8fic4DVXzazLI2KZJrAxZSPHxN3iFyTBDzSNE8DZjDIEz__8Pe5kluUVDmlpggD4FCpnSOab8sAPz5rYhdxo5JRhBGo/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}

Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.

Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :

Kode Script:
<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/AVvXsEg-Y9pOant1SFG1Ff7CC7uTs-NLpFCy-eGHsGbUpR2ecvOrk77NnMKMtnoiZDrJ7tpITpQXsotmMqgPoWER2gcmsiwwzfFA6P4dmJKUT6eY28xM815cFmM5Gmevle5U4M9QnvWHKRDIJfg/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>



Keterangan :
Perhatikan URL script warna merah diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
Sedangkan kode warna biru : 15 adalah jumlah slider yang ditampilkan. Dan news adalah label yang ditampilkan pada slider nantinya (Ingat besar kecil huruf harus sama dengan label yang sudah Anda buat).


Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini 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>



Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer.

Langkah terakhir, save templates dan lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.

Sangat mudah ya, anda tinggal ikuti langkah-langkah diatas dan baca dengan teliti jangan terburu-buru, Jika masih ada yang kurang jelas silahkan tinggalkan pesan pada kotak komentar yang ada di bawah. Itu tadi tutorial singkat tentang bagaimana cara membuat slider Carousel otomatis berdasarkan kategori atau label kali ini, selamat mencoba dan semoga bermanfaat.

21 komentar:

  1. info yang bagus sob,backlink ke blog saya http://infokangzein.blogspot.com

    ReplyDelete
  2. Sekedar mampir gan, lagi utak-atik blog nich

    ReplyDelete
  3. salam gan...
    saya sdh coba pasang slidernya di blog pribadi saya www.blogyasin.com dan tempat slidernya muncul hanya artikel artikelnya knp ya egk langsung display di slider,apa lagi yang harus di otak atik lagi ya..
    thanks,mhn responnya..

    ReplyDelete
  4. :) thanks buat info nya yaa sob..
    jangan lupa mampir ke lapak ane garisbuku.com

    ReplyDelete
  5. Gan dah coba cara diatas tpi slider gk jalan,,script java dan ajax nya oke2 aja tuh linknya..yg hanya cuma gambar menurut label aja gk gerak gmn y gan salahnya

    ReplyDelete
  6. Gan kalo di blog saya nggak ada div id='main-wrapper' gimana gan? makasih

    ReplyDelete
  7. bagaimana cara membuat SLIDER hanya tampil pada Homepage Blogger?

    ReplyDelete
  8. saya pernah mencoba memasang slider ini mas,tapi kok image tidak muncul,kira-kira masalahnya dimana

    ReplyDelete
  9. gan kok ga keluar gambarnya?

    ReplyDelete
  10. Wew, Cocok nih untuk template new johny Wuss redesign CB ^_^

    ReplyDelete
  11. Keren Mas, buat saya yang masih newbie bisa dicoba nih

    http://permanaglobal.blogspot.com/

    ReplyDelete
  12. Wonderful post! We will be linking to this great post on our site. Keep up the great writing.

    ReplyDelete
  13. gk bisa di copy mana bisa praktek

    ReplyDelete
  14. ok backlinknya kesaya y http://tipsdantrick7.blogspot.co.id/

    ReplyDelete
  15. saya kemarin udah coba pake juga slider jenis carousel ini, tp kemudian saya nonaktifkan lagi karena ada suatu msalah

    ReplyDelete
  16. Definitely a great post. Hats off to you! The information that you have provided is very helpful.

    ReplyDelete

Untuk menjaga kredibilitas dan kesehatan blog, kami akan menghapus komentar-komentar yang :
1. Memasang link-link aktif.
2. Terlalu pendek dan tidak sesuai topik bahasan.
3. Menyebabkan terjadinya broken-link
4. Bersifat promosi produk

Like us on Facebook
Follow us on Twitter
Recommend us on Google Plus
Subscribe me on RSS