Cara Membuat Slider Carousel Otomatis Berdasarkan Label Kategori

Click Disini Untuk DEMO-nya

Terlebih dahulu saya harus berterima kasih kepada Pemilik dari Desain Blog saya ini Johny Template yang telah memberi ilmu nya dari beberapa artikel beliau yang saya pelajari tentang cara memodifikasi Blog agar tampil lebih keren. Nah, Untuk sobat yang mau membuat blog sobat mempunyai beberapa slide dan fitur, sobat bisa langsung lari kesana deh, so pasti sobat bakalan punya blog yang keren dan enak dipandang mata. kalau sobat dan tertarik dari hasil karya Jhony sobat bisa uga kunjungi Blog tempat Kumpulan Tempaltenya Di MasTemplate. Disanalah saya belajar dan memperaktekkan hasil dari karya2 Beliau diantaranya yaitu tentang Cara Membuat Slider Carousel Otomatis Berdasarkan Label Kategori. Dan Artikel ini saya hadiahkan untuk seorang Sahabat Blog Saya Arifin Saputra. 

.

Oce deh, kita kembali ke pembahasan Cara Membuat Slider Carousel Otomatis Berdasarkan Label Kategori. cara ini ebenarnya mudah lo bagi sobat yang sering mengotak atik bagian template sobat. untuk demonya click dibawah ini. dan kita lanjut ja terus ya kepembahasannya 

DEMO

• Login ke Blogger sobat
• Terus jika sobat mempunyai beberapa blog, silahkan pilih blog mana yang mau kita kasih Slider tersebut.
• Langsung Masuk ke Template => Edit HTML,  jangan lupa centang pada kotak  Expand Widget Tempalte.
• Jangan lupa download dulu template sobat, untuk berjaga-jaga kalau tidak berfungsi sobat bisa mengembalikannya ke semula. tapi saya sudah tes lo.
• Kalau sobat sudah silahkan sobat cari Kode ]]></b:skin> dan letakkan kode dibawah ini tepat diatas kode tersebut. untuk lebih mudah gunakan F3 untuk mencarinya.

#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/AVvXsEgJ9Rlim1AlBlcEedrDoUVsIXBWJPrt77A7h7rCL-Ipcv3Sq4sLG1WCAqn3pnJXtRVmz3l4F143YszagTdelGHll1HH8KErwnLwukiS4n6GNMxten-Fkc129NHpaV1kPlz0UoGbCXJ9IP8/s1600/scroller-bg.png) repeat center}

#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxFaOtYyPQ9xhUkyDSJuw5SuqqiG9hm_Rs0KVgjFGGK1jzKo2qV0itHgM3kCdoqpj73ViP8cEXKTrOn6JPNf-bWh1sacmBKFJra3F-tSG1E1ggvVVZWgO-BmT5EILCIOXmn9V6vkZmBmU/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/AVvXsEisSD6IjMVCKksXaimBZOjPk8PAheJx-ka3GJuwNQOo0ZtiYgRHylaypy9GlxT23Alp272uq4XAoC8eqi35TMJPqloLSmBsUM_7n2rM-zcRsylPITnbb6X8QPYu_CG44wm9l-Tpd7UBtd4/s1600/prev.png) center}

#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3OkURiKCguFgzgt8OzQUEiyeFAGREb2NOOmDhL59uv_JEJroymlp1ufNcER-qV4dliQSzvEep3PyzaP3esgpSucN84_CpqdF9y38BiIYO0dCdBeMR-JR7LAJXnRv76FQdwNARDeulvrI/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/AVvXsEgVtPlj0i9Rz8Fz_m25ydo6wpfIJ18zXN51-4MJb1JTJMxyZRQTaRF4Z-aW41DGdSh6XieYAyL4GUskUgNHx35KBPvofh1JruOOGLGG_OxRcTySGhG_6JMVp073N34C-4W5rMFCzryfUmU/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/AVvXsEigBG-Cp_N-5fSN1k4S5jwOroLKw9tKlLR18AR_gZiAwyeKdQCxesDLZFD2G88vQSNMlUKxUc7yEM-eDvbI4bXy0Db4jS5kdX_UORBNyXPuD3rAHM4HC_2o_5WSe728MzbRsPNk23sqG8w/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}

•  Note : pada kode yang berwarna merah diatas itu adalah lebar dan tinggi slider.
•  Masih di HTML ya sob... Cari Kode </head> dan masukkan kode dibawah ini diatas kode tersebut.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

<script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYlWoDt3iVnwG2JjhJOMOHEm5PozzP2sht31z489ZmwDJp8POyxUF82kH_N0bhr8AzweU8d1Gwp-8bzEmNpK_-yLF6pfQObYLz1WUsoE8r34Euf5Q01G93nb_a42dAKWwiSphyphenhyphenr4IK1QM/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>

Note : Scrip yang berwarna orange diatas itu merupakan kode jQuery.min.js seri terbaru untuk digunakan di Slider tersebut. jika pada tempalte sobat kalau memang sudah ada jQuery.min.js tersebut ya tidak usah dipasang cukup hanya satu jQuery.min.js  aja. dan kode yang berwarna biru tersebut 15  jumlah artikel yang ingin sobat slidekan serta News merupakan kategori yang sobat mau tampilkan.

• Langkah selanjutnya yaitu kita harus memanggil jQuery yang kita pasang tadi, cari Kode <div id='main-wrapper'> lalu letakkan kode dibawah ini tepat diatas kode tersebut.

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

Kode tersebut juga sobat bisa letakkan dibawah atau diatas navigasi menu sobat atau di footer. 

• terus langkah terakhir tinggal  Save Tempalenya  deh... moga berhasil.

Mudah bukan. . . jika sobat menerapkan dan menempelkan kode tempalate tersebut dengan benar pasti akan muncul di blog sobat.

Sumber Artikel : Maskolis