Ini Solusinya Cara Membuat SlideShow Sederhana Pada Blogger Atau Website

Hallo sahabat webmuna dimanapun anda berada, pada kesempatan kali ini saya akan membagi sebuah tutorial tentang bagaiamana cara membuat slideshow pada blogger untuk memperindah tampilan blog.

Membuat tampilan slideshow pada blog memang akan membuat blog kita akan terlihat menarik, namun dari segi negatifnya memasang slideshow pada blog akan memperberat atau dapat membuat blog lambat loading.

Tapi jika sobat suka dengan tampilan slideshow pada blog semua itu bisa di akali dengan mengecilkan ukuran gambar pada tampilan slideshow.

Untuk mempermudah mengecilkan ukuran gambar tanpa mengurangi kualiatas gambar sobat bisa lihat di sini Cara Memperkecil Ukuran Gambar Tanpa Mengurangi Kualitas Gambar.

Baiklah sekarang kita langsung saja ketopik perbahasan kita yaitu bagaimana membuat slideshow pada blogger.

Untuk melihat contoh versi demonya sobat bisa klik link demo dibawah ini.

 DEMO 

CARA MEMBUAT TAMPILAN SLIDESHOW PADA BLOGGER

1. Seperti biasa untuk langkah pertama login dulu kedalam blogger.

2. Selanjutnya masuk kedalam menu Edit HTML

3. Kemudian cari kode ]]></b:skin> tekan (Ctrl + F) untuk memudahkan pencarian.

4. Jika sudah ketemu selanjutnya Copy Kode CSS dibawah ini kemudian Paste atau letakkan di atas kode ]]></b:skin>.

.slidesow-wrapper { 
    width: auto; 
    float: left; 
    position: relative; 
    padding-right: 2%; 
    padding-top: 10px; 
    }
.slidesow { 
    overflow: hidden; 
    position: relative; 
    width: 100%; 
    height: 550px; 
    background: #eee; 
    }
.image_reel { 
    position: absolute; 
    top: 0; 
    left: 0; 
    }
.image_reel img { 
    float: left; 
    width: 20%; 
    height: 550px;
    }
.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 {
}
.munaslide { 
    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; 
    }
.munaslide a { 
    color: #15E3FF; 
    font: 14px sans-serif; 
    text-transform: uppercase; 
    font-weight: bold; 
    }
.munaslide a:hover { 
    color:#29FF00 
    }
.munaslide p { 
    color: #fff; 
    font: 12px Arial; 
    }

5. Selanjutnya jika sudah selesai cari kode </head> kemudian Copy kode SCRIPT dibawah ini dan Paste atau letakkan di atas kode </head>

<script type="text/javascript">
/*<![CDATA[*/$(document).ready(function() {
    $(".paging").show();
    $(".paging a:first").addClass("active");
var imageWidth = $(".slidesow").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');
    $(".munaslide").stop(true,true).slideUp('slow');
    $(".munaslide").eq(
    $('.paging a.active').attr("rel") - 1 ).slideDown("slow");
    $(".image_reel").animate({left: -image_reelPosition}, 400 );
    };
rotateSwitch = function(){
    $(".munaslide").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, .munaslide a").hover(function() {
    clearInterval(play); }, function() { rotateSwitch();
    });
    $(".paging a").click(function() { $active = $(this);
    clearInterval(play); rotate(); rotateSwitch();  return false;
    });
});
/*]]>*/</script>

6. Selanjutnya Copy Kode HTML dibawah ini kemudian Paste atau letakkan pada posisi dimana sobat ingin menampilkannya. Biasanya tampilan slideshow berada dibawah menu navigasi.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='slidesow'>
   <div class='image_reel'>
<a href="#"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Xgc8mvYc1Hwvun_QS5OvqjlJjvtQOQ2eXGkb-ifwtxAbei2kgRVXC410feEfiJiGj1FBbQWfzCc3psXkBNjlNhp3NR1AlFPpDjwTFX5VvhECeBVhzdXdPeBJ7tyv5WS5urwFtEd0utI/s1600/1300x600.jpg" /></a>
<a href="#"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2LmU0tkuW5xjeg4aaJBFovUe1J1xQhQEXw5mVtuFgXeaOFOpjx8NcgBagAz8Sy0n142Z_cfdw_KSaZ24vQ6rY8XrdiHwG9vt8AoHhymFUKr1bOQkmf8Ca1QEbqENOyrMNw-KMr_EtI9Q/s1600/dekorasi-1.jpg" /></a>
<a href="#"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR7rawh9gihkPr1G5P2NPQqiEayCpc7QgGWTHesRKA9SNZTcptSBmnLNrlbrONVw2WfoqnJaHtF0PB3w8Y-bPb9xMI6FuXKtCy9QRT0aNk1sALfZ9Ap4TeMSmicj-ZOJFEJ-L3r2qYVM0/s1600/dekorasi-2.jpg" /></a>
<a href="#"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr2hqcFVygMXKDgBvXl9GGhCOzUTd7m8eunRHP8tpjHfRbvDtk9Uiceud_N0ATTtpyRb5XtFzeOaClshRD0xOUE8n7M-6ItK1ytNeo9tdeu5_2CNjhzmZ4CHgeLlNEHOUgFG2K6rAvGSw/s1600/dekorasi-3.jpg " /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIh8_p5m7d-BHqf-CAZqGl68zOSkdu7vLI8V_O84gX5rfjHP5_zweoQe7A-qcIDt12W0_a9L98OdzCNq8xnnREjB3QKg_KmTRvDFOvSidB0NnJqaPGxd9d4xdOtNnolKuC16ZN_-i7nds/s1600/dekorasi-4.jpg" /></a>
   </div>
   <div class='descriptionslidesow'>
<div class="munaslide"><a href='...post-link1.html'>Post-Title 1</a><p>Description / Caption 1</p></div>
<div class="munaslide"><a href='...post-link2.html'>Post-Title 2</a><p>Description / Caption 2</p></div>
<div class="munaslide"><a href='...post-link3.html'>Post-Title 3</a><p>Description / Caption 3</p></div>
<div class="munaslide"><a href='...post-link4.html'>Post-Title 4</a><p>Description / Caption 4</p></div>
<div class="munaslide"><a href='...post-link5.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> 

7. Selanjutnya tambahkan kode Jquery dibawah ini di atas kode </head> Namun jika sebelumnya kode jquery ini sudah ada dalam template blog sobat maka abaikan saja perintah ini.

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

Sedikit tambahan :

Dalam menampilkan menu slideshow biasanya di letakkan pada bagian dibawah menu navigasi blog. Untuk class menu navigasi blog berbeda-beda jadi sobat bisa sesuaikan dengan menu navigasi blog sobat.

Sebagai contoh saya buatkan class menu navigasi kira-kira kurang lebih begini.

<div class='menu-navigasi'>
...Isi dari menu navigasi...
</div>
...Letakkan kode HTML disini...

Demikianlah sedikit penjelasan dari saya tentang bagaimana membuat tampilan slideshow pada blogger untuk memperindah tampilan blog.

Semoga artikel ini bermanfaat dan dapat menambah sedikit pengalaman dalam mengedit template blogger.

Selamat mencoba...