Cara membuat slider/ slideshow di blog 100% work

Untuk memberikan kenyamanan pada pengunjung blog salah satunya adalah dengan memberikan slideshow pada blog kesayangan kalian , slide semacam ini bisa kalian temukan pada blog atau website- website besar. Slide seperti ini juga tidak akan membuat loading kalian menjadi lambat karena ukurannya yang sangat ringan. Slide ini juga dibuat dari beberapa baris HTML sederhana,  kalau kalian pahama dengan CSS, kalian akan mudah memodifikasi kode script menjadi bentuk yang kalian inginkan. Slider ini bisa kalian pasang secara manual maupun otomatis, tetapi pada postingan ini cara otomatis kita abaikan dulu, yang akan kita praktikkan adalah dengan cara manual,  Jika kalian ingin memasangnya ikuti cara berikut ini.

Perhatikan langkah berikut :
1. Masuk ke akun blog kalian
2. Masuk ke Tema >Edit HTML>Masukan kode berikut diatasnya ]]></b:skin> atau </style>di bagian head template (supaya cepat tekan tombol CTRL+f)

Kode :

.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;
    }

3. Masukan kode Jquery berikut diatasnya </head>

Kode :

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>

Catatan: Lewati langkah ini, jika sudah memasang Jquery dalam versi yang lain, tapi usahakan Jquery versi 2.x.x

4. Masukan kode JavaScript berikut diatasnya </head>

Kode :

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

5. Masukan kode berikut di suatu bagian dalam HTML body, contoh setelah/dibawah <div class="main-wrapper"> atau <div id="main-wrapper"> atau baris kode yang sejenis atau mirip karena struktur setiap blog memiliki nama yang berbeda-beda.

<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='...post-link2.html'>Judul 1</a><p>Description 1</p></div>
<div class="easytitledes"><a href='...post-link2.html'>Judul 2</a><p>Description 2</p></div>
<div class="easytitledes"><a href='...post-link2.html'>Judul 3</a><p>Description 3</p></div>
<div class="easytitledes"><a href='...post-link2.html'>Judul 4</a><p>Description 4</p></div>
<div class="easytitledes"><a href='...post-link2.html'>Judul 5</a><p>Description 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>

Warna Biru itu copy alamat link gambar,
warna merah untuk alamat link,
warna ungu untuk judul blognya
warna orange untuk deskripsinya

6. Save Template, dan lihat hasilnya.

Lokasi:

Share :