Cara Membuat Slideshow Thumbnail di Atas Posting Blog

Pengertian slideshow adalah tampilan objek foto, gambar, dan objek lainnya yang dalam beberapa saat saling bergantian, dari slide foto atau gambar pertama,berganti ke slide kedua, begitu selanjutnya sampai kembali ke slide pertama dan akan berulang terus menerus.Tujuan menggunakan slideshow adalah untuk mempercantik sebuah tampilan, contohnya seperti tampilan pada Blog akn terlihat lebih cantik dan menarik.

Seperti yang akan saya tuliskan kali ini yaitu membuat slidersahow gambar, sedikit memperkenalkan slidshow berikut ini terdiri dari 4 colom slider, dari ke-4 slider tersebut terdapat 1 inti yang menapilkan gambar begitu nyata dan gambarpun akan bergerak secara otomatis silih berganti. berikut ini adalah contoh tampilan slide.

Tentunya jika slide berikut diterapkan disebuah Blog akan terlihat lebih menarik, dan membuat para visitor betah berlama-lama diblog anda, jika anda ingin menerapkannya berikut langkah-langkahnya :


 Anda dua cara dalam penerapannya, cara pertama yaitu :

1. Login ke blog anda.
2. Silahkan ke Tata Letak => add gadget => HTML/Javascript
3. CopyPaste Script dibawah pada kolom yang tersedia.

<style type="text/css">
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:250px}
#slides li{width:49.9%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUvXFsFtpkQT7iw-YV1K6SFUBhDz_1WzsSp-rzLgz4-v4rgFKTdEj8HCTMIRdir6qOAhdMVEFsjogqzvEiGW6v_ahynKWX1X-BQcmSmy1_zodE0LPFLxyqNin4TOHzlmAKULVVJHhoyW5Q/s1600/fadebg.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #00BD79;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides h4{position:absolute;bottom:30px;margin:0;font-size:11px;font-family:Arial;left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}
#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:10px;line-height:15px}
#slides .label_text{font-size:8px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:49.8%}
  #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
  #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
  #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
}
</style>
<div id="featuredpost"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://aakyos.googlecode.com/svn/slideshow.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://aak-share.blogspot.com",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

Keterangan : Kode warna biru silahkan anda ganti dengan kode URL anda

Cara kedua menampilkan diHomepage

Jika anda ingin menampilkan slide show tersebut pada Halaman Homepage pertama anda buka Editor Templte, selanjunya anda cari kode berikut, perhatikan gambar berikut ini

Penjelasan : Anda perlu menambahkan pada Tag kondisional pada html tersebut. NOTE. Warna Biru adalah tag kondisional yang ditambahkan Simpan template dan lihat hasilnya.

Demikian cara membuat slideshow gambar semoga bermanfaat!

Share this post