» » Membuat Slider Carousel Otomatis di Blog
Selasa, 09 Juli 2013

Membuat Slider Carousel Otomatis di Blog

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

slider+carousel
  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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgApS0q_KzUgvXWyVRNyFXz_8SWm673H7rtiHNnrbPjeHavtha4jxqGXmsacjV7FWmSJ8j5zup2LSBN8Fa8n48ibxMFx1U3cORmP2OratO5ErLDjDbiBGzqC1Lr-arRN31Rs87kHb6x3i7y/s1600/previous.png) center;z-index:100;cursor:pointer;}
    #carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVgdiMcfP-8mefdiuVtbaXMvFZINtdccSCaPF-F4nhxW8ciyAQx96hogWpN0b9ngXGGS9Xvw4cjGthtAonUBcYkdecgxRwc53fYaf4lWwc9FQ_wr_QqUOAA6oOxktLeTcFU3QpBdow32l_/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.
  7. 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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpi44pJNMZ9B1Iwn_yW61SbgbItP3nqi9yugZDEXuf2FxSsvNOaaavS7ptbUv8yZkqK-N1ZuJYcxUcEgKNmx6pINJe2aXLFHd_NRQ8CSrGTKKqiSMRqrFH-j_IEuYDs3ZWykzGDDb6xlg/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>

    8. 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.   
  8. 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 :
    9. 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.
  9. Langkah terakhir Save Template sobat
    10. Demikian tutorial tentang Membuat Slider Carousel Otomatis dari Blogger Tutorial semoga bermanfaat sobat :) , jika ada yang ditanyakan, silahkan komentar di bawah.
     
Diposting oleh di