Tutorial Cara Membuat Image Slider di Bawah Header Blogger

Image slider di bawah header merupakan sebuah widget untuk menampilkan foto postingan terbaru pada blog yang disertai dengan tanggal dan judul postingan. Letak dari image slider ini yakni berada tepat di bawah header dengan ukuran panjang dan tinggi widget serta warna dan ukuran foto yang bisa disesuaikan.

Cara Membuat Image Slider di Bawah Header Pada Blog

Cara Pemasangan Image Slider

  • Login ke blogger
  • Pilih Template » Edit HTML dan jangan sampai terlewatkan untuk mencentang "expand template widget"
  • Untuk mengantisipasi adanya kesalahan dalam pemasangan image slider ini, saya sarankan untuk membackup template terlebih dahulu
  • Copy kode di bawah ini dan pastekan tepat di atas tag ]]></b:skin>
#carousel{width:960px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#000;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/AVvXsEhpWFEA2dcp4xMRwo46jj7AHbrsxavw1Vd2cg7l-_LIDY0j2dIUV2NXnq9Fvt1A3e9z39HXaUvAd1LMnCcNPkbCXfHGEjqhkk_PrnC8dHnKt_hGVT6nWD2Kp15BBNFq45-7pNW4YUQrNRPw/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/AVvXsEiJKIfkquvX9TCnplEh5j_RFOEfShBfbG4aKKn7lhuANawye3iqiKxd8kpj6hRz6XvvdZ95brxI1gppE7Lj_kl4dLjlvH13FQLt9GGxjvT7df-KCXW6qsCd1oF0nNo6S_Bo7UzLTcMg5kzI/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:#04B404;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:212px;height:90px;margin:0 2px 5px 2px;padding:6px}
#carousel ul li a.slider_title{color:#fff;display:block;margin-top:0;padding-top:0}
Keterangan :
Warna Merah Pertama : merupakan tinggi dan panjang widget image slider
Warna Merah Kedua : background img slider
Warna Merah Ketiga : warna tanggal img slider
Warna Merah Keempat : merupakan background dari image dan judul slider
  • Langkah selanjutnya, copy kode di bawah ini dan pastekan tepat di atas tag </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/><script src='https://masolis-javascript.googlecode.com/svn/trunk/carousellite.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd2b2zbPby1L89WawUGtW9T5-KsXVZL9Xud2S3V9VXCXvE-4eoaPeFyL_xA_d4lM2Jh-SkbA1Xz8R_UV_VHbnvzsgQ_E0lBBHb-aBKcFra8TpAcoL__09594AeL77H8igPG1mDbpGXgFM/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 :
Script yang saya tandai dengan warna merah di atas adalah script JQuery version 1.7.2. Jika pada dalam template sobat sudah terdapat JQuery versi yang lebih di atasnya, maka JQuery 1.7.2 tidak usah sobat masukkan ke dalam template dan warna biru merupakan tinggi dan lebar foto yang akan ditampilkan
  • Selanjutnya, copy code berikut ini dan pastekan tepat di atas tag <div id='main-wrapper'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default?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>
  • Terakhir, simpan template sobat dan lihat hasilnya.
Css & Script Source : http://maskolis.com/

Demikian tutorial tentang cara membuat image slider di bawah header pada blog kali ini, semoga bermanfaat. Terima kasih dan salam blogger...!!!

Unknown
Unknown

47 comments:
Write comment
  1. Terimakasih ya postingannya bermanfaat lo ...
    sukses ya masbrosistgan ...

    Regards,
    Lina

    ReplyDelete
  2. thanks, bermanfaat. izin ngepost dan backlink ya

    ReplyDelete
  3. Mantab slider di bawah header. tapi saya pasang di template saya kok tidak bisa jalan ke samping kanan dan kiri. Mohon petunjuk master! http://ahlulbrowser.blogspot.com

    ReplyDelete
    Replies
    1. Biasanya karena pengaruh jQuery-nya mas. Kalau di dalam template mas sudah ada jQuery, hapus salah satunya atau ganti dengan jQuery yang ada di atas...!!!

      Delete
  4. manteep mas bro.ijin pasang ya,sob?trims

    ReplyDelete
  5. bagus gan

    ReplyDelete
  6. Wah gan ini slidernya otomatis atau tidak
    http://www.bloggerawn98.com

    ReplyDelete
  7. izin pangsang ya gan. mantepp

    http://ndikendii.blogspot.com/

    ReplyDelete
  8. Replies
    1. gan, tahu ngk cara nambahkan fotonya..?

      Delete
  9. gan, gmna cara masukkin url gambarnya..?
    kosong tuh gambarnya gan..

    ReplyDelete
    Replies
    1. Image slider sudah disetting agar gambarnya muncul secara otomatis. Untuk itu setiap membuat sebuah postingan harus memasukkan foto kedalamnya. Minimal 1 foto.

      Delete
  10. gan, kalau lebih dari satu foto kita pasang dalam 1 postingan itu gimana tampilannya gan..?
    apakah akan bergantian fotonya..?
    atau kita buat lagi edit foto animasinya..?

    ReplyDelete
    Replies
    1. Yang muncul hanyalah foto pertama saja, selebihnya tidak akan ditampilkan.

      Semoga membantu!

      Delete
  11. gan..
    kalo kode yang ketiga gx ada jadi diletakkan dimana???

    ada solusi???

    ReplyDelete
    Replies
    1. Kalau punya mas kemungkinan harus ditempatkan di bawah <div class='main-outer'>

      Delete
    2. Udah bisa dipasang gan..
      makasih..

      sekarang masalahnya untuk tampilan gambar itu memang cuma 4 atau bisa ditambah sendiri karnya ukuran blog saya lebar... jd
      klau cuma 4 banyak yang kosong..

      1 lagi gan.. gambarnya gx mau pindah sendiri...

      mohon bantuannya gan.

      http://riosetyabayu.blogspot.com/

      Delete
    3. Didalam blog mas terdapat 2 buah jQuery dengan versi yang sama (1.7.1). Hapus salah satunya! oh ya untuk mengubah agar gambar yang ditampilkan, ubah value pada visible: 4, menjadi visible: 5, atau seterusnya.

      Delete
  12. gan, itu fotonya kok ngak bisa di geser ke samping..?

    ReplyDelete
    Replies
    1. Gimana mo tergeser klo postingan mas baru 3 buah?

      Delete
    2. Satu lagi, jQuery versi 1.5.1 yang ada di blog mas silahkan di hapus terlebih dahulu.

      Delete
    3. cara menghapus jQuery versi 1.5.1 tu gimana gan?

      Delete
  13. Mas yang div id main wrapper kok enggak ada ya di html edit template saya? Thx

    ReplyDelete
    Replies
    1. Klo sy liat struktur template mas, coba tempatkan dibagian bawah atau atas kode ini <div class='main-outer'>

      Delete
  14. This comment has been removed by a blog administrator.

    ReplyDelete
  15. bagus banget nih blog !!
    tolong ramal blog gw http://www.fauzanashariblog.blogspot.com yah !!

    ReplyDelete
  16. punya saya gak gerak slide nya ya mas? jquery pake yang lbh tinggi dari diatas tapi tetep.

    http://www.blackcobra18.blogspot.com

    ReplyDelete
  17. bisa ga kalo image nya sesuai dengan yg kita inginkan, jadi bukan recent post (postingan terbaru)..?

    http://ulzzang-southasia.blogspot.com/

    ReplyDelete
  18. mas koq engak bisa jalan ya pass pasang di blog saya http://prediksibola888.blogspot.com/

    ReplyDelete
  19. bisa ga kalo image nya sesuai dengan yg kita inginkan, jadi bukan recent post (postingan terbaru)..?

    http://www.naturallypluslutein.com

    ReplyDelete
  20. makasih banyak buat ilmunya gan, sangat bermanfaat,, nice info

    http://goo.gl/J1lkST - obat kolesterol

    ReplyDelete
  21. keren banget nih, makasih ilmunya ya mas...

    www.sahabatnano.blogspot.com

    ReplyDelete
  22. thanks banget gan, perlu di coba dulu nih..

    http://acemaxsshop.com/

    ReplyDelete
  23. sangat keren perlu di praktekin nih,,,walo agak susah sepertinya
    karimun jawa

    ReplyDelete
  24. kodenya lumayan panjang ya, apa gak bikin lemot web pak jepara furniture

    ReplyDelete
  25. perlu di coba dulu nih sapa tahu tampil keren di blog ane
    karimunjawa

    ReplyDelete
  26. kog ga ada gambarnya sob, cuma background hitam aka

    ReplyDelete
  27. kog ga ada gambarnya sob, cuma background hitam aka

    ReplyDelete
  28. saya cari kode div id='main-wrapper kok gak ketemu-ketemu. mohon pencerahannya

    ReplyDelete
  29. item doank gan, gak muncul thumbnailnya

    ReplyDelete
  30. mas semua kode sudah aku masukin kok nggak muncul apa2 ya.

    blogku zhiang-zieyie.blogspot.com

    ReplyDelete