Menambahkan Slideshow Manual Responsive pada Blog Terbaru

Pada tutorial kali ini saya akan menginformasikan bagaimana cara menambahkan slideshow manual responsive pada blog. Itung-itung sudah terlalu lama saya tidak membahas tentang tutorial blogger.

Penggunaan slideshow bersifat optional, bisa diperlukan bisa juga tidak, akan tetapi kebanyakan untuk website berita widget tersebut sering muncul, kekurangannya semakin banyak widget bergerak dalam sebuah blog, dapat memperlambat proses loading blog itu sendiri.

1. Login pada akun Blogger
2. Masuk ke Template → Edit HTML
3. Gunakan Ctrl+F lalu cari kode ini ]]></b:skin>
4. Tambahka kode dibawah diatas kode tersebut

.easyslider-wrapper { 
    width: auto; 
    float: left; 
    position: relative; 
    padding-right: 2%; 
    padding-top: 10px; 
    }
.easyslider { 
    overflow: hidden; 
    position: relative; 
    width: 100%; 
    height: 350px; 
    background: #eee; 
    }
.image_reel { 
    position: absolute; 
    top: 0; 
    left: 0; 
    }
.image_reel img { 
    float: left; 
    width: 20%; 
    height: 350px;
    }
.paging { 
    background: none; 
    position: absolute; 
    bottom: 15px; 
    right: 20px; 
    padding:4px 0 2px; 
    z-index: 100; 
    display: none; 
    }
.paging a { 
    margin: 3px; 
    background: #fff; 
    width: 10px; 
    height:10px; 
    display: inline-block; 
    border: none; 
    outline: none;
    }
.paging a.active { 
    background: #15E3FF; 
    border: 1px solid #15E3FF; 
    }
.paging a:hover {
}
.easytitledes { 
    width:70%; 
    display: none; 
    position: absolute; 
    bottom: 20px; 
    left: 20px; 
    z-index: 101; 
    background: #000A3F;
    background: rgba(2, 0, 51, 0.6); 
    padding: 10px 15px; 
    }
.easytitledes a { 
    color: #15E3FF; 
    font: 14px sans-serif; 
    text-transform: uppercase; 
    font-weight: bold; 
    }
.easytitledes a:hover { 
    color:#29FF00 
    }
.easytitledes p { 
    color: #fff; 
    font: 12px Arial; 
    }

5. Masukan kode di bawah ini, diatas kode </head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
/*<![CDATA[*/$(document).ready(function() {
    $(".paging").show(); 
    $(".paging a:first").addClass("active");

var imageWidth = $(".easyslider").width(); 
var imageSum = $(".image_reel img").size(); 
var imageReelWidth = imageWidth * imageSum;

    $(".image_reel").css({'width' : imageReelWidth});

rotate = function(){ var triggerID = $active.attr("rel") - 1; 

var image_reelPosition = triggerID * imageWidth;

    $(".paging a").removeClass('active');
        $active.addClass('active');

    $(".easytitledes").stop(true,true).slideUp('slow');
    $(".easytitledes").eq( 
    $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); 
    $(".image_reel").animate({left: -image_reelPosition}, 400 );
    };

rotateSwitch = function(){
    $(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");

play = setInterval(function(){
    $active = $('.paging a.active').next();

if ( $active.length === 0) {
    $active = $('.paging a:first'); } rotate(); }, 8000); };

rotateSwitch(); $(".image_reel a, .easytitledes a").hover(function() {
    clearInterval(play); }, function() { rotateSwitch();
    });
    $(".paging a").click(function() { $active = $(this);
    clearInterval(play); rotate(); rotateSwitch();  return false;
    });
});
/*]]>*/</script>

Keterangan:
warna merah : jangan digunakan jika pada website sobat sudah terpasang jquery, usahakan jquery versi 2.x.x

6. Kemudian masuk ke Layout → Add a Widget
7. Copy/Paste kode di bawah ini kedalam widget HTML/Javascript, dan tempatkan dimanapun sesuai keinginan

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='easyslider'>
   <div class='image_reel'>
<a href="#"><img src="...image1.jpg" /></a>
<a href="#"><img src="...image2.jpg" /></a>
<a href="#"><img src="...image3.jpg" /></a>
<a href="#"><img src="...image4.jpg" /></a>
<a href="#"><img src="...image5.jpg" /></a>
   </div>
   <div class='descriptionslider'>
<div class="easytitledes"><a href='...post1.html'>Post-Title 1</a><p>Description / Caption 1</p></div>
<div class="easytitledes"><a href='...post2.html'>Post-Title 2</a><p>Description / Caption 2</p></div>
<div class="easytitledes"><a href='...post3.html'>Post-Title 3</a><p>Description / Caption 3</p></div>
<div class="easytitledes"><a href='...post4.html'>Post-Title 4</a><p>Description / Caption 4</p></div>
<div class="easytitledes"><a href='...post5.html'>Post-Title 5</a><p>Description / Caption 5</p></div>
   </div>
   <div class='paging'>
<a class='' href='#' rel='1'/>
<a class='' href='#' rel='2'/>
<a class='' href='#' rel='3'/>
<a class='' href='#' rel='4'/>
<a class='' href='#' rel='5'/>
   </div>
</div>
</b:if>

Keterangan:
Warna ungu adalah untuk link image/gambar, Hijau untuk link Url posting/artikel, Orange untuk Title/Judul, dan Biru untuk deskripsi. Semuanya dimasukan satu persatu ke dalam baris kode HTML.

Penempatan kode diatas bisa juga dilakukan pada Edit HTML, sobat tinggal mencari letak dimana ingin dipasangnya.

Tutorial ini bisa juga tidak dapat diterapkan pada blog sobat, akibat dari bentroknya jquery yang ada di kode ini dengan jquery blog sobat. Silahkan trial dan error ya. dengan mengganti versi jquery yang ada pada blog sobat.

8. Save dan Finish, silahkan lihat hasilnya.

---

Itu saja informasi mengenai tutorial cara menambahkan slide manual responsive pada blog terbaru, semoga bermanfaat dan silahkan di praktekan.