Auto slider bagian tiga ( slider lebel images )

Tutorial-Onlineku.Jika sebelumya saya posting auto slider bagian dua Kali ini akan saya posting auto slider bagian tiga,Bagi anda yang igin pasang auto slider Image Posting di bagian header blog mungkin slider yang ini yang anda butuhkan serta simak tutorialnya di bawah ini:

Caranya sebagai berikut:
1.Login ke akun blooger anda.
2.Masuk ke doshbor blog anda
3.Klik tab Rancangan dan centang Expan wedget
4.Cari kode ]]></b:skin>
5.Simpan code di bawwah ini di atas code ]]></b:skin>

#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvDkYVvYEXoRzvalYgyx5y6aRXskI1Yxl2rG4ZJkj-kYyb3sgi8MHknj_Zigz_wACnGOd-IpYK1eiYdCDn5bdJy4kjBFXG7l68RecAgAR6Fh0mEx470qAMFmBG_WZpUDmtW1IqtF5TcLo/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeVBNJHuCV2LWFXSiObgRIs9WWkRYwWEkd1siVVbBoiCXCi1sDdvCjlwFeKwVmJw7d9cT3w9t8hEGO8DJoyT9UaoOADtDnQZME7Db4qHz9r6sJi3o9nAe6RBk4kvnFUsEEyBmp935fVoc/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8BDrIELEnagAi-ceFhvC9nwCUEBArxnbbv8NDnTi_hRWA36VT7u1OeaeyYnVfQ_VmlPL0nSUvEIcGRypoShmHOZVdxFlh5bogN8n-vNKs6D3moZu1gYtO1jgHEROjhdFX-iOR7cFWT7g/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4BZkJnKgl7RJjoP0J4Q8bE1BjHGaq_5WEvHRqwIc-ZSybZmqahqXtfwkVJkkjslmo6ezmvmCkbHCfa0iy6RE5rEd7vyhghBQX2P4bkxQTe3XVNGl3_NQdI-9CXx3CylCTl_yRzEB3RII/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIwETq5MUsT0oYuoGHyxq293WYLsuu4zA-z2Rv3PljEK3fsPEq4epTJpwVI7Fq1I6cjqvGCyEP-puzYsPJ_MoRQP72mDnsx_0QYOT5gQ6GSg2Seaqua5f34eOtx_SUT_NPzvcpvHy0Tus/s1600/next.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoUPPMp5S4pyk5o5JwnM5Pe1qUObrOFocP2O6bptRw2ckSFzorHQXgJZpUXU0PBgeHQxBEAR0XQS0pGBfoBIFNBNs4bpNNtraLOfhPJjqggR6kRjktB96zy0Bccyge7EBrvNuNLEsoEtc/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#cd1713}
#carousel a img{display:block;background:#fff;margin-top:0}

6.Cari code </head> lalu copy dan simpan code di bawah ini di atas code</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/AVvXsEhVALIq7Q-QOQcjhd1vtoK_1XuAxhVXR3s3KJ1bqhuvdg28L1RJWj-N6TZGJnK-ud1f-CLEei6nar6RPAPhd3v4Mvqk3yt6b4VemDZu4_vHCZkDdoxvcY9wmrdDP7ev6gMNbj_2IFYY92M/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;

numposts1 = 15;
label1 = "news";

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 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
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="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>

7.Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini diatas <div id='main-wrapper'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?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: 5,
    start: 0,
    circular: true,
    btnPrev: &quot;#previous_button&quot;,
    btnNext: &quot;#next_button&quot;
    });
    })})(jQuery)  
</script>
</b:if>

Langkah terakhir, save templates dan lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.

Judul: Auto slider bagian tiga ( slider lebel images ); Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts