Cara Membuat Slideshow Postingan di Atas Postingan Blog

Tips-dan-Triks-Ngeblog / Cara Membuat Slideshow Gambar di Atas Postingan 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 tutorialnya.

Cara Membuat Slide Show Gambar di Blog

1. Login Terlebih Dahulu ke blog saudara.
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/AVvXsEg9eRRme0TmqN1QQdTkgUiU23SqKv2Qqa34j0dXg_C-qkv-U7HS-3r_iZ86H5LR_MO7JETtR19uHNXMgDSluqRkr8p2k7M5aunN9_-yV8S3FVB_z31s1-TbJc2ysC9ja02fM55wMIQAcZlu/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://yourjavascript.com/40107930212/aab-slider-pribadie.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://tipsblogbaru.blogspot.com",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

Cara Memasangnya Silahkan Taruh diatas kolom postingan blog, Lihat Gambar.

Jika saudara ingin slide show tersebut hanya tampil pada Halaman Homepage silahkan saudara cari kode pada HTML-nya. Masuk Ke Template => Edit Html, Perhatikan Gambar.

Maka anda akan menemukan HTML dari script yang anda pasang tadi seperti dibawah.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
    </b:if>

Tambahkan Tag kondisional pada html tersebut.

NOTE. Warna Biru adalah tag kondisional yang ditambahkan

Simpan template dan lihat hasilnya.

Sekian untuk Tips Membuat Slide Show Gambar diatas Postingan Blog hari ini, semoga bermanfaat. Jangan lupa tinggalkan komentar yaa...

Tweet