Cara Membuat Image Slider di Bawah Header Pada Blog

Cara Membuat Image Slider di Bawah Header Pada BlogCara Membuat Image Slider di Bawah Header Pada Blog-Anaktimor17-Image slider di bawah header merupakan sebuah widget untuk menampilkan foto postingan terbaru pada blog yang disertai dengan tanggal dan judul postingan yang telah diterbitkan.
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.
Pada kesempatan sebelumnya, saya juga telah mempostinga tentang bagaimana cara membuat Image slider otomatis part I dan part II dengan posisi yang bisa di tempatkan dimana saja sesuai dengan kebutuhan dan pada kesempatan kali ini saya akan menjelaskan tentang bagaima cara membuat dan memasangan image slider otomatis tepat di bawah header atau menu navigation. Nah berikut contoh image slider di bawah header tersebut.

Jika sobat tertarik dan berminat untuk memasangnya pada blog sobat, berikut tutorialnya :
  • 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/AVvXsEhx91qh-sKjv1w0XwmIwwfFClmf19II3o5xa4udKSUT0gqIrqEhGe7AKB3IDrs1UuvnGMBa2gnnMwRBBKFcb7S-rgNsEEzdL7wPaH0624ejpLUnkOjwOYC1ZrTjWawAd9ek3Qp-fJP7RzZf/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/AVvXsEgnmGD2EvvzP44zm304Rk3B-woYT0-OtQTixOXJMSq77-Ay8Vp2sdkNf8KMaMpDnUZoQ8WZ6kj0JGWe1-vATTPW-XcGsQKjLvUDQhKgIYIlK3wEZ6frAFDoUTsC0lPchU6tyVFTZGuBNg3a/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/AVvXsEgb8ahtP8MH0RRqVVBECUwkrhnqU0Ks84fblt5wkDPup7jQoPBE4lQTIQC4TawJas_usESJyXvcV4cjNun2qqoJTIU4J7DbZZtTPi69M_LB92vGvJqapzbj8Acl_MehNIzcokwXQSF-Kg4/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.
Demikian tutorial tentang Cara Membuat Image Slider di Bawah Header Pada Blog-Anaktimor17 kali ini, semoga bermanfaat. Terima kasih dan salam blogger...!!!
4 comments
  1. Putra Kefa
    @AnangiliTerimakasih juga untuk Sobat yg sudah mau mengunjungi blogku ini:) Saya mau tukaran link,tapi di bawah footer blog(itu spt yg ada di bawah footer blogku ini yg ada tulisan HOME)Mau nggak sob :)
  2. Putra Kefa
    @Bondowoso CommunitySilahkan dicoba Sob Semoga berhasil dan blognya tamba keren :)
  3. Restu Nugroho
    tipsnya keren mas bro,
    tapi gak support buat blogku :D
  4. Putra Kefa
    @Restu Nugroho tergantung tata letak templatenya sob,saya juga sudah pernah nyoba tapi nggak berjalan sesuai keinginan :)