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 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/AVvXsEhVAupH_ReUbx6F3cJlOgBTbKPkfeKq8-NKEQmFVWTVljw5fk_2gaNPsHpl3YiJU3gDUuysiPG7S8Dsw6f6UaeYZ1ZSa5daxFwYL7CKl5Oygm8OyF8_S6w-XBjiAeAxse5PIcDulpqS5ohx/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/AVvXsEit-ilH9_4msJNgh363NP9HQ9lqwUbW1xpt_dJx5cSEs_pUT59wmTsQkjBErSuyBr0C4ktuNxidEl4Y85BIAFnIubwh0rZEHgd_XeAmOdHgNI57ve1vidDJy6nm87mA1-_9FIxvDtFM7PVn/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/AVvXsEjRymwUsSdTmhUC4Oycz7ursKasuNZKpa7eCAWzltObze93I7RVYLK2Ap7JI0sUV7ZwXjuEg6yKeH30KN_aA8pUEFNXlWQgpa4t7gpq29rn1KZPZbxgvnZOw5zwoUvgt0p0XHMG0hDBI1k/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...!!!