Cara membuat slider (slideshow) di blog

 Slider ini memiliki fitur menampilkan gambar otomatis dengan efek geser dilengkapi judul dan deskripsi/keterangan, juga memiliki navigasi menggunakan persegi/titik untuk memberikan pada pengunjung agar dapat memilih konten lebih mudah dengan melompat langsung untuk setiap slide. Slider Geser akan berhenti secara otomatis ketika mouse hover dan ini dikonfigurasi dalam kode.

Langkah-langkah Membuat Slider

Slider, dibuat dari beberapa baris “HTML” sederhana dan jika kita memiliki pengetahuan dasar “CSS”, maka kita dapat menyesuaikan atau memodifikasi seperti yang kita inginkan, dan memang benar-benar dapat dimodifikasi sehingga terlihat lebih bagus. jika tertarik, maka ikuti langkah-langkah berikut.

1. Masukan kode berikut diatasnya ]]></b:skin> atau </style> di bagian head template. 

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; 

    }

2. Maasukan 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

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

4. 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/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 ungu itu copy alamat link gambar, warna hijau untuk alamat link, warna biru untuk judul blognya dan warna orange untuk deskripsinya. ganti aja sesuai kebutuhan kalian gan sist.

5. Save Template, dan lihat hasilnya.

sumber: https://danytrikusuma.blogspot.com/2017/06/cara-membuat-slider-slideshow-di-blog.html