Membuat Slider Carousel Otomatis Berdasarkan Label

Membuat Slider Carousel Otomatis Berdasarkan Label -  Pada postingan sebelum nya ane udah share sebuah artikel Rivew Kontes seo dengan tema "Cyberbola.com Say No To Racism Piala Eropa 2012". yang bertujuan untuk memeriahkan Piala Eropa 2012 yang saat sekrang ini sedang berlngsung. Nah pada kesempatan kali ini walaupun ane udah ngantuk se ngantuk ngantuk nya. wkwkw. Ane coba share Nich Tutorial Blog Yaitu Cara Membuat Slider Carousel Otomatis Berdasarkan Label. Dalam rangka untuk mempercantik blog sobat Jm bsa  ambil dan pelajari Tutorial Memasang Slider Carousel Otomatis Berdasarkan Label.Berikut langkah-langkahnya:

• Login ke Blog sobat
• Edit HTML, kemudian centang expand widget templates
• Jangan Lupa di backup dulu template sobat, biar aman
• Cari Kode  ]]></b:skin>, Letakkan kode dibawah ini diatas kode ]]></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/AVvXsEisV1B631KxU5WYADBGBUj6CQuhU1UglOkoKhOswDt-Twp1CfvgaX9UgqV-VrfoIB4qNdSelANIRT5PfMvtTQ3DaDagcSSNqAJmIIdCKquJAMr4pgj3_DTs6znrJO5QCuYeZrVaHPG0IO0/s1600/scroller-bg.png) repeat center} #carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdheoWWPXgNORPe6FHuU1SfwTTfV4wfDK9YDmNxYgTFxwWPGrmWTdOUSO-TcvCAbRZvwzOzkjNPoQIfN6XoOyAUNsIMVL32WGl_xnKh5BAPZMUzdDhPC5lYtKKACPlaOI7BBurXjF6cgo/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/AVvXsEiKhzOb0kTSsZ1ze45WnjvyGgNIc7unHmWKH6sQEFq7Ur262qDNHi-Gv9wo9VxOtBdEhxC_i_S5X1AD1V2uLyXq24eYg7r-am4w5yKY1Ec_5QmFN0WjYxYK_ZiWKve0yVWYPBuzdpq5WCc/s1600/prev.png) center} #carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRr-bVa8y0bNgyoDL02ux0P3oKU6WDxyWb83i0S1V8K1CkqhVDfrqzwysGyuq1AvUyZZhE86cCtbVEXtVnVxNTB2tiU8Nd29sLyT8vci1WSaaHNfHiMh6UqVU_KDROl9vIeqc1PrDcbpA/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/AVvXsEiJ7iiLCIChAxhKmLbKtwFWkajYrPajn9lYLMoNdikIF8TNd2Fi3QgmVzQHDz2lvjZDGoKO3juacWunZ1Jbn3oPlR3gElB0LgByA_wCJXvfTzFIjtPUnjzJ47C6Bf59s6EWSZvn-rNNUDw/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/AVvXsEj712hSUZpQP_4ktBigJfcny9H9erh8bYXxXdSGw-SgTH_uqrsYfCjvq6HBRL1-58qC5wKErNTIYUjPt7n7oqmDP_FgSaXOXCwywC4_GNfzP3FZIOiHnwfCGpmqpysb1P8rRZsdaKuntAo/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 pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template sobat.

•  Untuk langkah selanjutnya cari Kode </head>  setelah itu tempel kan kode di bawah ini tepat tepat dia atas nya

<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/AVvXsEhCZpUM7xcIHHEfZdXeaLlHql0nZXSGnMC949AWUxK-JcvHTxDXtgx_FxKDe-I_FAnrVHwdwinbArNVjsDinczp6r5TRQAvHsmszHySePOyUzZ4l_1AS07JXHuTaYavazH3HCoDmw1fB38/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>

• Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini diatasnya :

<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>

Nah itu dia gan cara Membuat Slider Carousel Otomatis Berdasarkan Label Semoga bermanfat yak.

DEMO

Bagikan Artikel Ini ke: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Oh, Published at 11.43 and have 5 komentar