Cara Mudah Membuat Slideshow Thumbnail di Atas Posting Blog

Slideshow 

Slide Show Gambar Pada Blog - Memang widget ini sangatlah cocok untuk dipasang pada blog, selain untuk mempercantik tampilan blog widget ini juga keren untuk dipasang pada blog kita, Cara membuatnya cukuplah mudah, dan yang pasti saya akan membuat tutorial yang bisa  dengan mudah saudara mengerti.
jadi simak saja baik-baik tutorialny
Cara Mudah Membuat Slideshow Thumbnail di Atas Posting Blog

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/AVvXsEhRYgRl4Afy_uD0TJzzzIqXaoF10EN9CyZWMRaidWfXm9mJrwUq6g742Y6pgbxnBALpbXK99f4dTbw2_K4a5nBlFWoerjM-NWqn2mJuY9WwhUIPjT_HVJ-uPHhvYh0MoXrywiCpnhg8NT2R/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="http://riyantoseo.blogspot.co.id/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 Merah 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 merah adalah tag kondisional yang ditambahkan Simpan template dan lihat hasilnya.