Terbaru

Memasang Slider Responsive (ElasticSlideshow) untuk Blogger

at Mar 5, 2013
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


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://www.mkrsite.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


PropertyDeskripsi
blogURLIsikan dengan link blog anda misal:https://www.mkrsite.com
MaxPostMaksumal jumlah post/artikel yang ingin ditampilkan
idcontaintID tempat slideshow akan ditampilkan
ImageSizeukuran gambar yang ingin ditampilkan
SummaryJumlah karakter/huruf pada summary yang ingin ditampilkan
animationjenis animasi. Pilihan sides atau center
speedKecepatan animasi pada background, satuan dalam milidetik
easingJika ingin menambahkan efek easing pada background. Untuk aktif harus ada script easing yang terpasang
titlesFactorPersentase dari kecepatan animasi bakcground terhadap judul(akan menjadi seperti ini speed * titlesFactor)
titlespeedKecepatan animasi pada Judul
titleeasingJika ingin menambahkan efek easing pada Judul. Untuk aktif harus ada script easing yang terpasang
thumbMaxWidthMaksimal lebar dari thumbnail
IntervalWaktu pergantian slide. satuan dalam milidetik
autoplayJika ingin menampilkan slide yang bergerak secara otomatis: pilihan true atau false
pBlankBackup gambar jika artikel tidak memiliki gambar
tagNameJika 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.

Design by MKRSite Copyright © 2012 ~ 2018 Powered by Blogger