Artikel ini menjelaskan cara memasang featured post dengan efek slider yang responsive menggunakan elasticslideshow pada blogspot/blogger untuk membuat tampilan blog menjadi lebih menarik

Memasang Slider Responsive (ElasticSlideshow) untuk Blogger - MKR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

Artikel ini menjelaskan cara memasang featured post dengan efek slider yang responsive menggunakan elasticslideshow pada blogspot/blogger untuk membuat tampilan blog menjadi lebih menarik

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(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 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: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 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
Bagikan kepada teman!
Garis

44 comments:

  1. Alhamdulillah,,,dapet ilmu baru... Thanks admin cheer

    BalasHapus
  2. One of the best widgets that you experienced.

    thanks

    BalasHapus
  3. kk pas gw pasang di template (MyExtraNews) kog LATEST POST nya ketutupan pas di slide show nya ;( http://3.bp.blogspot.com/-rV1tB8cdT7Q/UTazIT8DExI/AAAAAAAAAoc/7aK16hsghxw/s1600/Untitled-1.jpg

    BalasHapus
    Balasan
    1. itu karena z-index dari slideshow lebih tinggi dari latest-post..
      coa cari kode ini: #labelxnya

      dan pada z-indexnya dirubah jadi 9999.. yang awalnya z-index:3 jadi z-index:9999

      Hapus
    2. Work kk, Thanks kk memang jago nya :-d =)) (h)

      Hapus
  4. mas buatin postingan
    cara buat recent post perkategory
    buat disidebar
    tapi gaya seperti featured post
    kemarin

    BalasHapus
    Balasan
    1. postingan featured post yg diatas sja belum..
      nanti klo sudah featured post untuk yg diatas baru bikin yang di sidebar..
      karena kalo disidebar lebih sederhana dari yang di atas postingan..
      karena hanya bermain di lebar pseudo elements..
      berbeda dengan yang di atas postingan seperti di MyExtraNews dan MyTimeLine yang harus mengukur lebar dan posisinya..

      Hapus
  5. mas kemarin FB kan kagak ada
    twitter... twitter
    ada dong mas
    :-)

    BalasHapus
    Balasan
    1. sama jg tdk ada..
      tp untuk blog ini nanti saya buat..
      FB page, Google+ page, dan Twitter,...
      mungkin jg Linkedin.. (o)

      Hapus
  6. mas kok Slider Responsive tidak bisa bergerak otomatis ya...?

    BalasHapus
    Balasan
    1. kalau tombol thumbnail yang ada di bawah sudah ditekan slidernya tdk bergerak secara otomatis lagi karena itu memang bawaan dari scriptnya..

      Hapus
  7. mas Satank Mkr, kok ketika saya ubah blogURL:"http://mkr-site.blogspot.com", jadi blogurl blog saya misal blogURL:"http://jokoew.blogspot.com"
    malah slidernya gak jalan???
    padahal pas pakai yang mkr-site bisa mas???
    binggung ane :-?

    BalasHapus
    Balasan
    1. karena alamt blognya tidak ada..

      Hapus
    2. hmm alamat blog nya http://aksesoriscute20.blogspot.com/
      slidernya loading trs kagak pernah muncul gambar

      Hapus
    3. blognya tdk bisa dikunjungi..
      harus di invited dulu..

      Hapus
    4. Elasticslideshow Responsive Slider ini terkadang tidak muncul, tapi saat koneksinya bagus, Elasticslideshow Responsive Slider ini muncul sempurna. apakah ini ada kaitannya dengan koneksi ? karena hal ini yang saya alami, saya menggunakan template DarkRed. Mohon pencerahannya gan.

      Hapus
  8. fail sob :/
    kaya gini :
    http://i.imgur.com/J0B9VoS.png
    s3o-cyb3r.blogspot.com

    BalasHapus
    Balasan
    1. sama nih di blog saya juga begini
      help dong master ....
      www.cpartikel.com

      Hapus
  9. menu categories di template Gremble kok tenggelam ya gan... ;(

    BalasHapus
  10. gak bisa mas,,
    saya cukup kebingungan ,,minta bantuanya dong,,kok setiap aku bikin slide bagian footer naek keatas mas,,bagian footernya tuh diatas ,dan berantakan jadinya,,
    mohon pencerahanya mas di www.monyetstres64.blogspot.com
    karena itu template dari sini ,,semoga bisa membantu mas

    BalasHapus
  11. siang mas, mas tolong di cek dong kok slidenya gak jalan yah , mohon solusinya, Triims mas :D www.belitungku.com

    BalasHapus
    Balasan
    1. sudah cek tapi saya tdk lihat scriptnya disimpan dimana???

      Hapus
    2. Mas, mohon coba dicek lagi, apa ada yg kurang yah mas..slide-nya gak jalan (alisa gak geser sendiri).. makasih bnayk mas
      .Kim

      Hapus
    3. hal itu mungkin karena anda memakai jQuery yg paling baru..
      coba ganti :
      <script src="http://code.jquery.com/jquery-latest.js"></script>
      dengan :
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
      walaupun ada yang mengatakan yg terbaru adalah yg terbaik tapi pada jQuery 1.91+ ada beberapa fungsi yg dibuang agar nantinya mendukung browser yg lebih modern..
      sehingga untuk jQuery 2.0 nantinya tdk lagi mendukung untuk IE6,IE7, dan IE8..

      Hapus
    4. Slamat malem mas, sudah coba saya ganti dan sekarang sudah saya ganti mas , akan tetapi blm bisa :) , saya bingung mas.. ;(

      Hapus
  12. Salam kenal, saya sudah memasang slide ini di blog saya, dan saya (maaf) edit sedikit, :d di padukan dengan template mdf-blog.blogspot*com. silahkan berkunjung, dan saya sudah memasukkan blog sampean di daftar Sahabat Blogger Saya, Jika Berkenan, dan tidak memakan space blog sobat, Silahkan jadikan blog saya sebagai Partner Link (Zool Share >> Share Anything and Everything). Terima Kasih. Mohon Mampir ya,,

    BalasHapus
  13. makasie kang,,, wapik tenan rekkk
    mampir neg kene eo
    http://vimaxdisurabayadenpasar.blogspot.com/
    x-) x-) x-) x-) x-) x-) x-) x-) x-) x-) x-) x-) x-) x-) x-) x-) x-) x-) x-) x-) x-) x-)

    BalasHapus
  14. ok gan makasih bgt suhu.....berhasil di my blog http://inilahmisteri.blogspot.com/ (h) (h)

    BalasHapus
  15. klow slide seperti sobat gimana

    BalasHapus
  16. @-) di Google Chrome ga muncul isi slidenya...

    BalasHapus
    Balasan
    1. ya sama seperti punyaku, slidenya gak bergerak...

      Hapus
  17. mas kok fungsi dropdownnya jadi di dalem ya .. gak bisa keluar.. mohon bantuannya
    http://analisx.blogspot.com

    BalasHapus
  18. ada error Google Code Subversion Repository

    BalasHapus
  19. google code error mas (k) (k) (k)

    BalasHapus
  20. maaf gan.. google codenya eror.. kalo boleh minta mntahanyya ajha gan

    BalasHapus
  21. kok disuruh masukan username + paswod itu maksudnya gmna ya? tlong pencerahannya, thx

    BalasHapus
  22. jsnya ilang gan... tolong kasih tau posisinya biar bisa dihapus (p)

    BalasHapus
  23. hahahahaha ketemu juga masalahnya... yang ketemu masalah error Google Code Subversion Repository coba hapus widget About nya (jahat sih, tapi kalo jadi masalah mau gimana lagi) :-#

    BalasHapus
  24. puyeng oeyy udah utak atik gagal terus,gak muncul elastic slide nya, kodenya amburadul di template saya ;((

    BalasHapus
  25. after trying this. all i got was just the actual text of the code displaying on my homepage and not the slider itself. i am using the My Extra News template.

    Also can someone also help me with thumbnails not displaying on the home page of my blog?

    thanks

    BalasHapus
  26. mas ko script yang dari mas pas dipasang diblog saya jadi minta login google code mulu ya? sama demonya ga jalan om...

    BalasHapus
  27. Bagus sekali artikelnya mas...sip lah.

    Tapi sudah saya coba beberapa kali mas sudah sesuai intruksi di atas (menurut saya yang bodoh ini) tapi kok masih belum berasil.
    Maaf mas. apa bisa dibantu mas....

    ini blog saya yang aburadul mas http://dameldalem.blogspot.com/
    terima kasih

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB: Jangan menuliskan link aktif karena akan terhapus secara automatis.

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah

 
Design by MKR Copyright © 2012 ~ 2013 Powered by Blogger
TOP