Cara Mudah Membuat Slideshow Thumbnail di Atas Posting Blog - Hallo sahabat TIPS BELAJAR BISNIS ONLINE DAN INTERNET MARKETING, Pada Artikel yang anda baca kali ini dengan judul Cara Mudah Membuat Slideshow Thumbnail di Atas Posting Blog, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogging, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Mudah Membuat Slideshow Thumbnail di Atas Posting Blog
link : Cara Mudah Membuat Slideshow Thumbnail di Atas Posting Blog

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/AVvXsEic97Mm_v8MVDyIORLCo2BPXfFfq4zY7GkyAdD73Is5FupEnMpERVKeUeHG3eo_08MqMBfXm4lVYuU_2gFaxgX_6H-bBuG6EWeacp-j-7xmLRYoFHpS-pXWD7v6L7uXGENRJpBZxlu3CqFa/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.

Demikianlah Artikel Cara Mudah Membuat Slideshow Thumbnail di Atas Posting Blog

Sekianlah artikel Cara Mudah Membuat Slideshow Thumbnail di Atas Posting Blog kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Mudah Membuat Slideshow Thumbnail di Atas Posting Blog dengan alamat link https://tipstopmarketing.blogspot.com/2016/08/cara-mudah-membuat-slideshow-thumbnail.html

Tweet