Saturday, 8 November 2014

Cara Modifikasi Widget Popular Post Bawaan Blogger Menjadi SLIDER

Posted by on Saturday, 8 November 2014

Cara Modifikasi Widget Popular Post Bawaan Blogger Menjadi SLIDER

Salam Blogger, Artikel kali ini bloggingpasuruan tentang tutorial Cara Modifikasi Widget Popular Post Menjadi SLIDE. Dalam modifikasi ini bloggingpasuruan merubah tampilan widget popular post bawaan ( default ) blogger menjadi slide ( gambar berubah ubah ), dalam modifikasi ini widget juga disertai cuplikan teks dari artikel Sobat.

Lihat  Demo

Pada umumnya demo slide bisa Sobat temui pada Template karya lasanta, namun pada slide karya lasanta Sobat harus memasukkan gambar dan teks secara manual. Kelebiahan Modifikasi Widget Popular Post Menjadi SLIDE yang akan saya sajikan ini memiliki kemiripan dengan SLIDE karya lasanta NAMUN Sobat tidak akan melakukan perubahan apapun secara manual. 

Langkah Membuat Modifkasi Widget Popular Post SLIDER

1. Masuk ke Akun Blogger Sobat

2. Pilih TEMPLATE >>EDIT HTML

3. Sebelum melakukan perubahan backup template Sobat terlebih dahulu.

4. Cari kode <head> , Untuk mempercepat pencarian gunakan Ctrl + F untuk mencari kode <head>

5. Letakkan kode di bawah ini sebelum kode tag <head>

Kode Modifikasi Widget Popular Post Bawaan ( default ) Blogger
<script src='https://www.google.com/jsapi' type='text/javascript'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
/**
script ini ditulis oleh konfluen Bentuk LLC http://bloggingpasuruan.blogspot.com setiap pembaruan untuk script ini akan diposting ke Tutorial SEO dan Blogger Tips silakan tinggalkan pesan ini dan sebagai kredit di mana kredit ini disebabkan!
**/
var slideshow_interval        = 4500; //dalam mili detik
var slideshow_fade_duration = 1000; // dalam mili detik
var slideshow_width           = 235; //dalam ukuran pixels
var image_redimension         = (slideshow_width * 1.5).toFixed();

$(document).ready(function() {
    $('#PopularPosts1 ul').each(function(){
            $('<button>').attr('id','prev').css('float','left').text('<<').insertAfter('#PopularPosts1 ul');
            $('<button>').attr('id','next').css('float','right').text('>>').insertAfter('#PopularPosts1 ul');
        function slideshow_jump(index){
            var slide_current = slideshow['slide_current'];
            $(slides[slide_current]).fadeOut(slideshow_fade_duration,function(){
                slide_current = index;
                if( (slide_current < 0) || (slide_current >= slides_count) ) slide_current = 0;
                $(slides[slide_current]).fadeIn(slideshow_fade_duration);
                slideshow['slide_current'] = slide_current;
                if(jumps){
                    var identifier_current = $(slides[slide_current]).attr('id');
                    jumps.children().removeClass('current');
                    jumps.children('[data-target="' + identifier_current + '"]').addClass('current');
                }
            });
        }
        var slideshow = $(this);
        var identifier = $(this).attr('id');
        var slides = $(this).children('li');
        var slides_count = slides.size();
        var jumps = $('#' + identifier + '-jumps');
            /* memproses daftar dan mengulang isi menggunakan thumbnail sebagai latar belakang */
            $('#PopularPosts1 ul').find('li').each(function(n, entry){
                  var entry = $(entry);
                  var image = entry.find('img').first();
                  var imageURL = image.attr('src');
                  if (imageURL){
                        if (imageURL.indexOf("/vi/") > 0){
                              imageURL = imageURL.replace("default","0");
                        } else imageURL = imageURL.replace(/s\B\d{2,4}-c/,'s'+ image_redimension);
                        entry.css({backgroundImage : "url(" + imageURL + ")"});
                        entry.find('.item-thumbnail').remove();
                  }
            });
           
            /* sembunyikan slide kecuali slide pertama, dan mengatur Indeks */
        slides.each(function(index){ if(index) $(this).hide(); $(this).attr('data-index',index); });
        slideshow['slide_current'] = 0;
        var timer = window.setInterval(function() {
            slideshow_jump(slideshow['slide_current'] + 1);
        }, slideshow_interval);

        $('#prev').click(function(){
                  if (slideshow['slide_current'] == 0){
                        slideshow_jump(slides_count - 1);
                  } else slideshow_jump(slideshow['slide_current'] - 1);
            window.clearInterval(timer);
        });

        $('#next').click(function(){
            slideshow_jump(slideshow['slide_current'] + 1);
            window.clearInterval(timer);
        });

    });

});
//]]></script>
<style>
// mengubah dimensi dari elemen lebar dan tinggi agar sesuai kebutuhan situs Anda
// pada dasarnya menyesuaikan ukuran apapun "235" menjadi ukuran yang tepat untuk blog Anda
#PopularPosts1 ul {
      list-style-type: none;
      position:         relative;
}
#PopularPosts1 ul li, #PopularPosts1 .item-content {
      width:                  235px;
}    
#PopularPosts1 ul li {
      height:                 235px;
      display:          none;
      background-repeat:      no-repeat;
      background-size:        auto 100%;
      background-position:    center center;
      margin:                 0;
      padding:          0;
} #PopularPosts1 ul li:first-child{
      display: block;
}
#PopularPosts1 ul  {
      width:                  235px;
      height:                 235px;
      margin-left:      auto;
      margin-right:     auto;
      padding:          0 0 0 0;
}
#PopularPosts1 .item-content {
      position:         absolute;
      bottom:                 0;
      margin:                 0;
      padding:          0;
    background: rgba(54, 54, 54, 0.5);
    -pie-background:  rgba(54, 54, 54, 0.5);
      color:                  #ffffff;
} #PopularPosts1 .item-content a {
      color:                  #ffffff;
      font-weight:      bold;
}
#PopularPosts1 .item-title, #PopularPosts1 .item-snippet {
      padding:    2px;
}
</style>



Catatan :
Jika Sobat ingin merubah ukuran panjang dan tingginya, silahkan rubah nilai width dan hight


6. Save template >> lihat hasilnya

Saya akan sangat berterima kasih jika sobat Blogger berkenan meninggalkan komentar, saran atau tambahan informasi serta pertanyaan seputar artikel Cara Modifikasi Widget Popular Post Bawaan Blogger Menjadi SLIDER . Semoga bermanfaat dan terima kasih...

close