TAKUT MEMASANG SLIDER CAROUSEL DI BLOG ?

Ada sebagian blogger yang takut memasang widget slider carousel di blog mereka. Apa alasannya ? Jawabannya adalah takut beban blog semakin berat, sehingga semakin tidak seo dan membutuhkan waktu loading yang lebih lama. Apa benar demikian ? Aku justru merasakan hal yang sebaliknya, memasang slider carousel memberikan beberapa dampak positif, yaitu semakin menambah cantik (baca : profesional) serta semakin memudahkan para visitor untuk mengakses artikel-artikel terbaru yang ada di dalam blog kita. Lho .... semakin positif khan ? Buktinya dalam blog aku ini telah terpasang slider carousel tersebut dengan manisnya. Bagaimana dengan beban berat blog nya ? Nggak terlalu berat tuh, dalam artian beban keseluruhan blog tidak melebihi 100 kb artinya hanya 99,82 kb. Silahkan anda check sendiri lewat fitur TEST SPEED ini.

Bagaimana model atau bentuk slider carousel itu sendiri ? Perhatikan gambar di bawah ini  :

Nah ............... cantik bukan ? Artikel-artikel terbaru blog kita ditampilkan dalam bentuk slide yang berjalan ke arah kiri dengan latar belakang warna biru langit. Bagaimana cara membuatnya ? Sabar mas bray ....., begini nih caranya ........   :

1. Pertama Anda mesti 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 jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> 

#carousel{width:980px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#5599e6;margin-bottom:8px}
#carousel h5{color:#555;margin:2px}
#carousel .container{position:absolute;left:24px;width:960px;height:125px;overflow:hidden}
#carousel .thumb{float:left;margin-right:5px;}
#carousel #previous_button{position:absolute;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPKeC-MoQVs3pZwy7AlRcQJU9q_K4G9HkzYotbz5Pd4lLqXrWr7FJX2Sx_KssD__JyLwKZsayG5Q_vrXI_yKSu1u6GEKxbBpaGvTUF0xX3Ah6WiPiNqHp2VKD8kDU9IwXU7qEULxm2FYVr/s1600/previous.png) center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFtJaMEUwC2LsEG5Wbqlu8T7s07JnyP7xL6uf_8A3o2rDYOkgoqyerGXsLs-7L114BQ4fs072B3IxyaHoQ_6YN673HFWqu4toS3GTplBiSh8GsXYuVMQrw_e2g1UhLU03Meoui3ZMTVbSe/s1600/next.png) center;z-index:100;cursor:pointer;}
#carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#ebebeb;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:212px;height:90px;margin:0 2px 20px 6px;padding:6px}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:0;padding-top:0}
#carousel ul li a.slider_title:hover{color:#1b5d97}
#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.

6. Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas 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/AVvXsEhkOiRoo57Jn5zYx2CBHU18erYOY6e2UzGqYMS1Q2CS8tTkz8pDBW3BYuGG1gWnnFBKMnX0o3xmBOKuzuLzD5WAn9qfXDkk9LbrMwyHQx0kxfqZj7YGc7Pk_ZEbkvGrqhh4vQcbek0IZx8/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;
numposts1 = 12;

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 = ["January","February","March","April","May","June","July","August","September","October","November","December"];
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="100" height="90" class="alignnone" src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></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 (mas-Kolis) 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. Kode warna biru : 12 adalah jumlah slider yang ditampilkan. Sedangkan angka 100 dan 90 adalah panjang dan lebar image yang ada di slider.

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

<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/-/sport?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: 4,
    start: 0,
    circular: true,
    btnPrev: &quot;#previous_button&quot;,
    btnNext: &quot;#next_button&quot;
    });
    })})(jQuery)   
</script>
</b:if>

7. Perhatikan kode warna merah diatas, sport adalah label yang ditampilkan pada slider nantinya (Ingat besar kecil huruf harus sama dengan label yang sudah Anda buat). Jika Anda ingin menampilkan postingan atau artikel terbaru pada slider, tinggal hapus kode /-/sport. Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer. 
8. Langkah terakhir, save templates dan lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.

Demikian tadi tutorial membuat slider Carousel otomatis ini, dan seperti biasa jika ada yang kurang jelas silahkan tinggalkan pesan di kotak komentar. Selamat mencoba dan semoga berhasil.

Untuk memperingan kerja slider carousel ini, anda dapat meng-kompress text-javascript dan menyimpannya di hosting pihak ketiga. Inilah rahasia supaya loading blog tidak terlalu berat manakala mempergunakan widget slider carousel ini.

Sumber tulisan : http://www.maskolis.com/2012/07/membuat-slider-carousel-otomatis-versi.html

Related Posts:

Get free daily email updates!

Follow us!