Cara Membuat Slider Carousel Berdasarkan Label

|| || || 14 komentar
Tutorial | Untuk pertemuan kali ini Blogger Tutorial akan share sebuah tutorial yang saya anggap cukup keren. mengapa demikian? karena dengan fungsi Membuat Slider Carousel Otomatis yang akan kita bahas kali ini kita akan biasa menampilkan bentuk slide sesuai label.

 sebagai contoh coba lihat bentuk slide di blog ini oke untuk cara membuatnya


  1. Pertama Anda mesti login ke blogger dengan akun Anda
  2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
  3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
  4. Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda. atau langsung saja juga boleh.
  5. Letakkan kode di bwah ini tepat di atas kode  diatas kode ]]></b:skin> :
     
  6.  berikut kode nya:

  7. #carousel{width:980px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#5599e6;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(http://3.bp.blogspot.com/-vxUtQ_S674s/T-8KtEsewAI/AAAAAAAAHGs/cfd8RK0R-vM/s1600/previous.png) center;z-index:100;cursor:pointer;}
    #carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(http://3.bp.blogspot.com/-FaZC4Gr6pS0/T-8KsaJKtHI/AAAAAAAAHGk/GDXOy42rx3Q/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:#ebebeb;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:212px;height:90px;margin:0 2px 20px 6px;padding:6px}
    #carousel ul li a.slider_title{color:#222;display:block;margin-top:0;padding-top:0}
    #carousel ul li a.slider_title:hover{color:#1b5d97}
    #carousel a img{display:block;background:#fff;margin-top:0}

    Coba lihat kode yang berwarna biru itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.
  8. Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode</head>. berikut kodenya :
    <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] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/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>

  9. Keterangan : Perhatikan URL script warna hijau diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru. Kode warna biru : 12 adalah jumlah slider yang ditampilkan. Sedangkan angka 100 dan 90 adalah panjang dan lebar image yang ada di slider.   
  10. Selanjutnya untuk pemanggilan kode slidernya cari kode <div id='main-wrapper'>setelah itu letakkan kode di bawah ini tepat di atas nya berikut kode nya :
  11. 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/-/sport?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>
    Perhatikan kode warna hijau diatas, sport adalah label yang ditampilkan pada slider nantinya (Ingat besar kecil huruf harus sama dengan label yang sudah Anda buat/ case sensitif). Jika Anda ingin menampilkan postingan atau artikel terbaru pada slider, tinggal hapus kode /-/sport. Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer.
  12. Langkah terakhir Save Template sobat
  13. Demikian tutorial tentang Membuat Slider Carousel Otomatis dari Blogger Tutorial semoga bermanfaat sobat :) , jika ada yang ditanyakan, silahkan komentar di bawah.
/[ 14 komentar Untuk Artikel Cara Membuat Slider Carousel Berdasarkan Label]\
Aan Rusmanto said...

Terimakasih atas informasinya gan...

nice shared

silakan kunjungi Blog saya
http://aan-shared.blogspot.com

adji sukmana said...

sssiiiaapppppp :q

Bimbim pradana said...

thanks udah bagi-bagi ilmu... kreatif selalu

adji sukmana said...

wokke gaannn (h)

arkhi muttaqina said...

https://lh5.googleusercontent.com/-PE2GWBseiGk/T2acYH_uNRI/AAAAAAAAChg/HloTeaRIdyQ/s36/09.gifhttps://lh5.googleusercontent.com/-VKGWq-wPGUw/T2WEaEQLA9I/AAAAAAAACa4/ZDnLP29mlgk/s36/14.gif kaga bisa gan yg step ter akhir keluar teks 'Kesalahan saat mengurai XML, baris 1803, kolom 3: The element type "div" must be terminated by the matching end-tag ". ' gimana nihh

adji sukmana said...

coba dikasih < /div> gan.,

evie saulina said...

Thanks Broo Artikel yang Sangat Menarik. Sy jadi paham ternyata nulis artikel ada caranya juga.
Tahitian Noni Jakarta
Di tunggu kunjungan baliknya ya bro, http://www.tahitiannonijuiceint.com

adji sukmana said...

oke gan kunjungan balik segera meluncur., hehehe

Muhammad Lukman said...

gan kaga ada kode ini (div id='main-wrapper') di blog saya gimana dong,mohon pencerahnnya dong?

FAUZAR RAJU said...

mantap gan... maju terus.. kunjungan balek gan,, jngan lupa aad saya ke circle yha gan..
http://apapunituzar.blogspot.com/

ilham mocht said...

terimakasih gan masih belajar
http://memahamiwanita.blogspot.com/

william lim said...

mantap gan http://prediksibola888.blogspot.com/

Khalifa Fauzan said...

it's not working on my templates :C
http://soffmodd.blogspot.com/

Imam Mukhlisin said...

shipp gan, mau tak terapin diblog saya, mohon mampir n lihat bentar yaa
disini
http://tingtv.blogspot.com/

Post a Comment