Memasang Slider Responsive (ElasticSlideshow) untuk Blogger

Memasang Slider Responsive (ElasticSlideshow) untuk Blogger

Featured post yang pada umumnya diletakkan pada halaman beranda bermacam macan model atau tampilannya. Diantaranya ada yang berbentuk carausel dan slideshow. Nah kali ini saya akan memberikan script untuk menampilkan featured post/slider yang responsive menggunakan Elasticslideshow.

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

Menambahkan Gadget HTML 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:
    <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://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:"https://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:'https://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 kondisional untuk 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 bagian Expand 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


Property
Deskripsi
blogURL
Isikan dengan link blog anda misal:https://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 atau false
pBlank
Backup gambar jika artikel tidak memiliki gambar
tagName
Jika ingin menampilkan artikel berdasarkan tag/label, misalnya tag blogger maka 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.

Satank Mkr Beri Komentar
Design by MKRSite Copyright © 2012 ~ 2017 Powered by Blogger