Memasang Slider Responsive

Elasticslideshow ini dibuat oleh  louis_remi  pada tahun 2011 dengan nama smartresize dan merupakan script slider dengan menggunakan jQuery...

Elasticslideshow ini dibuat oleh louis_remi pada tahun 2011 dengan nama smartresize dan merupakan script slider dengan menggunakan jQuery. Sehingga setidaknya blog anda sudah terdapat jQuery librarynya agar dapat berfungsi.

Pada slideshow ini saya menggabungnya dengan RSS feed pada blogger sehingga dapat menampilkan artikel terbaru ataupun artikel berdasarkan tag tertentu dari blog yang anda miliki. Awalnya saya hanya berfikir membuat dalam versi manualnya karena melihat struktur htmlnya yang berbeda dari slider bisa, tapi dengan sedikit pengetahuan saya tentang jQuery akhirnya saya berhasil membuat struktur html dari RSS feed yang diload sama dengan struktur dari elasticslideshow sehingga saya memutuskan untuk membuat yang autoslideshow.
Nah bagi anda yang ingin mengetahui cara memasang slideshow ini ikuti langkah-langkah berikut.

Menampilkan Add a Gadget diatas Blog Post

Jika diblog anda belum tampil tombol/tulisan add gadget di atas Blog Posts ikuti langkah berikut untuk menampilkannya:

1. Pada dashbord pilih Template kemudian klik tombol Edit HTML
2. Kemudian cari kode <b:section class='main' id='main' showaddelement='no'> lalu ganti rubah showaddelement menjadi yes sehingga menjadi seperti ini <b:section class='main' id='main' showaddelement='yes'>
   NB: Untuk mempermudah dalam pencarian tekan Ctrl+F pada keyboard lalu tulis <b:section class='main' id='main' showaddelement='no'>.
3. Klik Simpan

Menambahkan gadget HTML dan Script Slideshow

1. Pada dashbord pilih Layout/Tata Letak kemudian klik tulisan Add a Gadget diatas Blog Post Area
2. Setelah itu scroll kebawah hingga menemukan HTML/JavaScript lalu klik tombol tambah yang ada disudut kanan
3. Kemudian Masukkan Kode berikut:
   

   123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051<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(http://2.bp.blogspot.com/-aFHDAB82tQw/UCEoDlHaNOI/AAAAAAAAEUg/J5hyAZvUVxo/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://mkr-site.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>

4. Klik Simpan

Membungkus Gadget HTML dengan Tag Kondisional

Jika tahap diatas sudah selesai sekarang tahap pembungkusan gadget dengan tag kondisionaluntuk mengatur dimana saja slideshow ini mau ditampilkan.
Misalnya gadget itu hanya ingin ditampilkan dihalaman depan/beranda cara sebagai berikut

1. Pada dashbord pilih Template kemudian klik tombol Edit HTML dan centang pada bagianExpand Widget Templates
2. Kemudian cari kode <b:section class='main' id='main' showaddelement='yes'>, karena sebelumnya telah ditambahkan HTML widget maka akan terlihat widget type HTML dengan id HTMLxx (xx: nomor widget HTML).
   Misalnya widget HTML dengan id HTML5 yang akan saya tambahkan tag kondisional hanya pada halaman depan/beranda
   Maka akan menjadi seperti ini:
   

   <b:widget id='HTML5' 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>
   </b:widget>

3. Klik Simpan

Demo ElasticSlideShow

Property

Deskripsi

blogURL

Isikan dengan link blog anda misal:http://mkr-site.blogspot.com

MaxPost

Maksumal jumlah post/artikel yang ingin ditampilkan

idcontaint

ID tempat slideshow akan ditampilkan

ImageSize

ukuran gambar yang ingin ditampilkan

Summary

Jumlah karakter/huruf pada summary yang ingin ditampilkan

animation

jenis animasi. Pilihan sides atau center

speed

Kecepatan animasi pada background, satuan dalam milidetik

easing

Jika ingin menambahkan efek easing pada background. Untuk aktif harus ada script easing yang terpasang

titlesFactor

Persentase dari kecepatan animasi bakcground terhadap judul(akan menjadi seperti ini speed * titlesFactor)

titlespeed

Kecepatan animasi pada Judul

titleeasing

Jika ingin menambahkan efek easing pada Judul. Untuk aktif harus ada script easing yang terpasang

thumbMaxWidth

Maksimal lebar dari thumbnail

Interval

Waktu pergantian slide. satuan dalam milidetik

autoplay

Jika ingin menampilkan slide yang bergerak secara otomatis: pilihan true ataufalse

pBlank

Backup gambar jika artikel tidak memiliki gambar

tagName

Jika ingin menampilkan artikel berdasarkan tag/label, misalnya tag bloggermaka ditulis seperti ini : tagName:"blogger"

NB: Jika ingin merubah warna merahnya dengan warna yang lain silahkan ganti kode warna#9E0505 dengan kode warna Heksa yang anda inginkan menggunakan tool ini Generator Kode Warna Heksa. Kode warna #9E0505 ada 3 jadi harus diganti semua.

dari http://mkr-site.blogspot.com/