Cara Buat Slider Carousel Otomatis Berdasarkan Label

Cara Buat Slider Carousel Otomatis Berdasarkan Label -

Hallo sobat blogger, apa kabar

Pada Kesempatan kali ini saya akan berbagi trik blogger kepada kalian, disini saya akan memberikan tutorial tentang cara buat Slider Carousel Berdasarkan Label Oke langsung aja ini dia

 

Langkah pertama masuk dulu ke akun blogger kalian

Lalu klik Rancangan lalu klik edit HTML
Jangan lupa centang tulisan widget expand template 

Lalu cari kode ]]></b:skin>  Lalu letakan kode di bawah ini di atas kode tadi

#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/AVvXsEiNKzu7yV2jvfDkVeQpqnU82A8FvpqkMOKvTneKi7wlE6ru1og0D2dZuhZLXXyD93At5PesxOFE0fM6a5TlEpB6fJcqHPEat3OpOCcOGQopIA2UBmw3jmlfpm9JyDwhL9hXyiZerK88FZQ/s1600/scroller-bg.png) repeat center} #carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Qi5JRGN1Mb878dOsKwRaSj_8ksv9QmbCQENQm3pugo11WFeGg1iftGnbpDsVDkE8VEa8yTbw4AC9gAPgu9hjl2f1FHFZXQe9DfjiaZ89R4dnYXEe0X_s41DL8gex_4x5_ioWliSg_fw/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/AVvXsEg4C2I9vVpw89zi-V0z8ptu5GLxb3ojzjf9RAElQ3hGU4NbEfHDhJQcCGp7m12up00oPg075kfXiqW3AajkPVZD2W3eTbFtqgqLPB1Qyj-GRRfeyXbj2PTsQ_GLuY_PxNGTzhDhHF7fOq0/s1600/prev.png) center} #carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg55CLVHhXqNXG36Az6N5jWemwqLagife4S79aP92iiAkpGvZd9Eq0H6gNi_XULfE0h8vd8D3lBlnnhe81o66pihDEs8wFlT2t6-aNsgXLhc2jmETmAtdqaO4rLOUTuoIHIxq5n7u3b-TQ/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/AVvXsEiLpfSojXOAl4ldhTKF9nZzTrAXpVzYb7F-Khebm3332pijSRyB7E4mVWASQsk5QrQu7LeFJzWD9MU3ECRQHy6vDlLGTnxY6AK8qHPoeJ9RAXy0_irGMH1D9m0ypu0HybVaAyqXV8V9hpY/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/AVvXsEjBk1aCDeTViYBlAnPjehDpYz2FPMSDhuxBAAPSKNsYXVxC00ok9CYKEgQgZitVv7b01xrNg2_2WF2NCdS1qJ2BHjX4LWM45SJ8siQwboEYaqm0qUmnabdVo7pYvNjAyUmgvjN7kVHLu-Q/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}

Ket :  Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider

Lalu cari kode </head> lalu copy kode di bawah ini dan paste di atas kode tadi

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://kauman.googlecode.com/files/jcarousellite.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio6kTSHTpX1Lu50zaxMJODccKKxyBWAtaidNqyZsJlGh7tVmpxKRLCgojGbr0dqJcZ1tPTYqDxNAQyYxkukhMJBWEJ3rGZ1R1asCqHf8zRzo0TtuEcskdvsjv16443Db9mulClKLI-DWw/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>

lalu cari kode <div id='main-wrapper'> dan letakan kode di bawah ini di atasnya

<b:if cond='data:blog.pageType != "item"'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>  
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$("#carousel .container").jCarouselLite({
    auto:4000,
    scroll: 1,
    speed: 800,  
    visible: 5,
    start: 0,
    circular: true,
    btnPrev: "#previous_button",
    btnNext: "#next_button"
    });
    })})(jQuery)  
</script>
</b:if> 

Setelah itu Simpan

mudahkan.....

Tweet