Image Slider Di Bawah Header

Kata image slider sudah tidak asing lagi bagi blogger...tapi tidak bagi saya yang masih newbie, hehehh

Sumber Img : Maskolis

Langsung saja ke pemasangannya :

Login ke blogger
Pilih Template » Edit HTML
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/AVvXsEj6jR2DrOBZYVDsb9W0ItPXTewNSTgn7kbrxs5PHzdpVClEhLE5hlNYF9NW5NhfP5knwMUgqXrkou-oAfNor2q6u1EbtsbsVhcziWrvYJ6TjQsVCPAvjj39iVUlVZgRvwSnvOIH2qZwEvis/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/AVvXsEhtABUvltqvSIhML1k0VbY3mkqu6gyhF_M7tp_wukYR73VgEC_wIm5aS-1i78jv4-9apF9fFwWtvP1Xm7cqKv5SL62T78opkAiCGGWcz-O66BI1BjkOvCbz1_0ViOW119Vsa9vavsxFhntS/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 :

width:960px;height:125px : merupakan tinggi dan panjang widget image slider

background:#000 : background img slider

color:#555 : warna tanggal img slider
background:#04B404 : 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/AVvXsEhhFw2W7HJLY3xpFjJqQqj9xf1_tVdlNYeAP_5ZOMwIatyDXgQDC08Wzu3wAE_LsLZjSsw6J18sbtzTTOyHHqjLArXg27YOSj4ffC0GP336Z5uvhd1f97uF_OS0nuP7e5XQ14jJHMSSRnY/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 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.

Selanjutnya, copy code berikut ini dan pastekan tepat di atas tag <div id='main-wrapper'> atau <div id='wrapper'>

Share on Facebook

Share on Twitter

Share on LinkedIn

0 Response to "Image Slider Di Bawah Header"

Post a Comment