Cara Membuat Image Slider di Bawah Header Pada Blog

Cara 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/AVvXsEjkNIDzXqs9mbnf1KiM1ilNaR_XjCpKF2okOcoExC68FivNkaz1zT9BvXiP5NVTRmezNfgJJty8KAO9x-TUQUlYfXHSQh943jlZuWOVed_lu43NtO_x4oxz7899Olv4PUL-9zCEzJPCY-y0/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/AVvXsEgie-nwt6M_DZuL9kEUip1ucpvsoPW2Q810I6E04JcojK8Jh8ZMhNXHdL50aAyd8u_r62j9GN0-e76WKPTygJlpMnj0QC6DmU8WWhVZDHgCfUiTSq3Un7BJZtWa3tIsTQBxMNT3hLIUC7Is/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/AVvXsEhBFI0y0q0LECCd-SL1TCku8I8EawmgeebunGrrSsaDljM4B8yDY_2Mv32KJF815X2ackpX5PDVYiFP-x3jQ0DgN6mQsQsPQI7guWM3kkZRSKALuSZX4Cathrb6VBlo4NphVPfFsuoxH04/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 : Creating Website

Demikian tutorial tentang Cara Membuat Image Slider di Bawah Header Pada Blog-Anaktimor17 kali ini, semoga bermanfaat. Terima kasih dan salam blogger...!!!