Cara Memasang Slideshow Keren di BLogspot Posted by : Dhimas AP

Slideshow tampaknya sangat berguna sekali untuk kita terapkan dalam blog kita terutama di bagian depan, banyak pencipta feature post berbentuk slide/bergantian untuk menampilkan postingan agar terlihat lebih menarik di mata pengunjung, salah satunya elasticslideshow karya louis_remi pada tahun 2011 bernama smartresize yang menggunakan jQuery.

Demo SlideShow

Umumnya artikel yang sering muncul di slideshow adalah artikel-artikel terbaru, sehingga visitor bisa dengan mudah menemukan artikel terbaru itu dalam blog kita, selain itu slideshow yang saya share ini tampil lebih cepat dan tidak berat dan sangat cocok untuk blog yang padat artikel, kalau anda tertarik untuk menggunakannya, silahkan baca disini :

Langkah Pertama :
Silahkan login di blogger, lalu menuju TATA LETAK, pada kolom Postingan buatkan widget baru di atasnya, caranya :

• Kembali menuju dashbord, pilih Template kemudian klik tombol Edit HTML
• Lalu cari kode <b:section class='main' id='main' showaddelement='no'> dan rubah showaddelement menjadi yes , seperti ini <b:section class='main' id='main' showaddelement='yes'>
• Klik Simpan

Hasilnya seperti ini

Langkah Kedua :
Sekarang tinggal menambahkan widget-nya, caranya klik Tambahkan Gadget lalu cari dan pilih HTML/JavaScript

Setelah itu masukkan kode di bawah ini tepat di kolom Konten

<style scoped="" type="text/css">
.ei-slider{position:relative;width:100%;max-width:1000px;height:250px;margin:0 auto 35px;padding:0;background-color:white}
.ei-slider-loading{width:100%;height:100%;z-index:997;position:absolute;top:0;left:0;background-color:white;text-indent:-9999px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMi9lmtoptRfcvHpbANLWFY33t4rvom7QmbDomepNPnZippC2FxIqO-KlnHmrNgKRIRBIJleh4uZx0iARsh3nntrInfrr5vgYWQASsX45XN0RnDwNuIpDhj0pkM2EFvdZN9UyxeubM-vk/s1600/loading.gif);background-position:50% 50%;background-repeat:no-repeat}
.ei-slider-large{height:100%;position:relative;overflow:hidden;margin:0 0 10px;padding:0;border:5px solid #9E0505;border-radius:2px}
.ei-slider-large li{position:absolute;top:0;left:0;overflow:hidden;height:100%;width:100%;list-style:none}
.ei-slider-large li img{width:100%;border:0;padding:0}
.ei-title{position:absolute;right:8%;left:8%;bottom:20%;color:#fff;opacity:0.8}
.ei-title p{text-align:left}
.ei-title h2{font-family:Georgia,Times,"Times New Roman";text-align:right;margin-left:auto;font-size:18px;line-height:20px;color:#b5b5b5;max-width:80%;text-transform:capitalize;background:#000;padding:5px}
.ei-title h2 a{color:white}
.ei-title h2 a:hover{text-decoration:none;color:#9E0505}
.ei-title p{font-family:Verdana,Geneva,sans-serif;margin-left:auto;font-size:11px;line-height:15px;width:85%;clear:both;background:#000;padding:5px 10px;position:relative;left:-5%}
.ei-slider-thumbs{padding:0 0;height:13px;margin:0 auto;width:100%;position:relative}
.ei-slider-thumbs li{position:relative;float:left;height:100%;width:20%;list-style:none}
.ei-slider-thumbs li.ei-slider-element{top:0;left:0;position:absolute;height:100%;z-index:10;text-indent:-9000px;background:#9E0505}
.ei-slider-thumbs li a{display:block;text-indent:-9000px;background:#666;width:100%;height:100%;cursor:pointer;-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);-webkit-transition:background 0.2s ease;-moz-transition:background 0.2s ease;-o-transition:background 0.2s ease;-ms-transition:background 0.2s ease;transition:background 0.2s ease}
.ei-slider-thumbs li a:hover{background-color:#f0f0f0}
.ei-slider-thumbs li img{position:absolute;bottom:50px;opacity:0;z-index:999;width:100%;padding:0;background-color:white;border-radius:2px 2px 0 0;border:0;max-width:100%;height:60px;max-height:70px;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-o-transition:all 0.4s ease;-ms-transition:all 0.4s ease;transition:all 0.4s ease;-webkit-box-reflect:below 0 -webkit-gradient( linear,left top,left bottom,from(transparent),color-stop(50%,transparent),to(rgba(255,255,255,0.3)) );-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}
.ei-slider-thumbs li:hover img{opacity:1;bottom:13px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"}
@media only screen and (max-width:479px){
  .ei-slider{height:200px}
  .ei-title{bottom:5%}
  .ei-title h2{font-size:14px;line-height:17px}
}
</style>
<div id="autoelastic"></div>
<script src="https://ivyth.googlecode.com/svn/js/autoelastic.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
AutoElasticSlideshow({
blogURL:"http://alamatblogmu.blogspot.com",
MaxPost:5,
idcontaint:"#autoelastic",
ImageSize:400,
Summary:100,
animation:'center',
speed:800,
easing:'',
titlesFactor:0.60,
titlespeed:800,
titleeasing:'',
thumbMaxWidth:150,
Interval:3000,
autoplay:true,
pBlank:'http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif',
tagName:false
});
});
//]]>
</script>

Perhatian : ganti url berwarna merah dengan alamat website atau blog anda.

Langkah Ketiga :
Bila anda tertarik untuk memasang widget slideshow ini hanya di home page atau beranda blog website anda, maka anda perlu melakukan cara ini.

• Pada dashbord pilih Template lalu klik tombol Edit HTML
• Kemudian tekan F3 untuk cari kode <b:section class='main' id='main' showaddelement='yes'> jika ketemu letakkan teks <b:if cond='data:blog.url == data:blog.homepageUrl'> dan </b:if> seperti pada teks merah dibawah ini.

<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
<b:include name='quickedit'/>
</b:if>
</b:includable>

Setelah itu klik SIMPAN dan Selesai,

Okeh sobat, saya kira itulah tutorial saya kali ini, semoga bisa bermanfaat untuk kita semu, kemudian tidak lupa saya tuturkan terima kasih kepada catatan kk yang telah berbagi ilmu dengan kami, hehe.. dan buat anda selamat mencoba dan semoga berhasil .!