Membuat Fitur Slideshow Diatas Header

Membuat Fitur Slideshow Otomatis Diatas Header - Slideshow merupakan fitur yang ditampilkan dengan cara berganti, fitur pada slide banyak ditemukan pada website atau Blog. Fitur slide dapat dimanfaatkan untuk website atau Blog yang menawarkan produk terbaru karena dengan fitur slide dapat membuat tampilan menjadi lebih menarik.

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 dan slider yang bergeser akan berhenti secara otomatis ketika mouse hover dan dikonfigurasi dalam kode Script.

Slideshow ini menggunakan JavaScript, Fitur slider berikut ini sangat sederhana namun cukup menarik, dan sangat ringan karena ukurannya yang kecil hanya sekitar 2kb, sehingga loading halaman berjalan normal. untuk memasangkan  Fitur Slideshow Diatas Header diperlukan beberapa langkah :

L1-Pemasangan CSS
Dalam pemasangan CSS berikut ini yang anda lakukan dengan membuka Editor Template, kemudian anda cari kode ]]></b:skin> , selanjutnya anda terapkan kode dibawah ini diatasnya :

/*slideshow*/
.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;
    }

L2- Pemasangan Javascript

Untuk pemasangan Javascript anda mencari kode </head> lalu anda letakan kode dibawah ini diatasnya :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

Note :

Jika sebelumnya pada Template anda sudah terinstal kode diatas dalam versi yang sama atau yang lain, maka anda lewati langkah diatas

Masih dalam letak yang sama dibagian </head>, selajutnya anda letakkan kode bibawah ini diatasnya atau dibawah kode diatas.

<script type="text/javascript">
$(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(); }, 4000); };
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>

L3- Pemasangan HTML

Dalam pemasangan HTML anda cari kode  <div id='outer-wrapper'> atau <div class="main-wrapper" > atau kode yang sejenis mirip dengan kode tersebut, karena struktur pada 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="URL Gambar" /></a>
<a href="#"><img src="URL Gambar" /></a>
<a href="#"><img src="URL Gambar" /></a>
<a href="#"><img src="URL Gambar" /></a>
<a href="#"><img src="URL Gambar" /></a>
   </div>
   <div class='descriptionslider'>
<div class="easytitledes"><a href='URL Link post1'>Post-Title 1</a><p>Description / Caption 1</p></div>
<div class="easytitledes"><a href='URL Link post2'>Post-Title 2</a><p>Description / Caption 2</p></div>
<div class="easytitledes"><a href='URL Link post3'>Post-Title 3</a><p>Description / Caption 3</p></div>
<div class="easytitledes"><a href='URL Link post4'>Post-Title 4</a><p>Description / Caption 4</p></div>
<div class="easytitledes"><a href='URL Link post5'>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>

Note:

Perhatikan pada kode yang saya beri Warna:

• Kode warna merah pertama adalah URL gambar
• Kode warna merah kedua adalah URL Link post
• Kode berwarna hijau adalah untuk title Judul
• Kode warna abu-abu adalah Deskripsi singkat pada Judul atau gambar tersebut
• Silahkan semuanya anda masukan satu persatu ke dalam baris kode HTML.

Demikian Membuat Fitur Slideshow Diatas Header, semoga bermanfaat!

Share this post