Widget popular post yang ada pada blogger/blogspot dapat dirubah menjadi slideshow misalnya menjadi slideshow coinslider yang memiliki efek yang menarik. Artikel ini menjelaskan bagaimana cara merubah popular post tersebut.

Merubah Widget Popular Post Menjadi Slideshow Coinslider - MKR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

Widget popular post yang ada pada blogger/blogspot dapat dirubah menjadi slideshow misalnya menjadi slideshow coinslider yang memiliki efek yang menarik. Artikel ini menjelaskan bagaimana cara merubah popular post tersebut.

Merubah Widget Popular Post Menjadi Slideshow Coinslider

Merubah Widget Popular Post Menjadi Slideshow Coinslider

Artikel terpopuler (Popular Post) merupakan salah satu widget bawaan dari blogger. Widget ini dapat menampilkan gambar, judul serta deskripsi dari artikel dan biasanya diletakkan pada bagian sidebar. Nah tahukah kalian widget popular post ini dapat dirubah menjadi slider. Untuk membuatnya menjadi slider kita harus mengetahui struktur HTML yang menyusun slider yang akan dibuat.
Jika sudah mengetahui struktur HTMLnya yang perlu kita lakukan yaitu merubah strutur widget tersebut menjadi seperti HTML dari slider tersebut. Nah kali ini saya akan membuat popular menjadi slideshow coinslider. Berbeda halnya dengan widget recent post coinslider ini tidak menggunakan JSON Feed.
Karena widget popular post ukuran gambarnya hanya 72px yang sudah dicrop maka perlu JS untuk mengubah ukuran gambarnya. Bagi yang penasaran bagaimana cara memasangnya bisa mengikuti cara berikut ini:

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 klik pada area Edit HTML lalu tekan Ctrl+F pada keyboard lalu tulis <b:section class='main' id='main' showaddelement='no'>.
  3. Klik Simpan

Menambahkan gadget Popular Post dan Script Slideshow CoinSlider

  1. Pada dashbord pilih Layout/Tata Letak kemudian klik tulisan Add a Gadget diatas Blog Post Area
  2. Setelah itu scroll kebawah hingga menemukan Popular Post lalu klik tombol tambah yang ada disudut kanan Setelah itu klik Save/Simpan
  3. Setelah itu pilih Template kemudian klik tombol Edit HTML Lalu Cari tempat Widget Popular Post yang tadi. Untuk mempermudah bisa dengan mengklik Jump to widget Lalu pilih Blog1. Diatas Widget Blog1 tersebut merupakan Widget Popular Post yang sebelumnya telah ditambahkan
  4. Kemudian Ganti Widget Popular Post yang tadi dengan Kode berikut:
    <b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'>
    <b:includable id='main'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <style scoped='' type='text/css'>
    #coin-slider-pop img {width: 100%;height: 300px;}
    #coin-slider-pop {margin: 0 auto;}
    .coin-slider { overflow: hidden; zoom: 1; position: relative; }
    .coin-slider a{ text-decoration: none; outline: none; border: none; }
    .cs-buttons { font-size: 0px; padding: 10px; float: left; }
    .cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
    .cs-active { background-color: #B8C4CF; color: #FFFFFF; }
    .cs-title {width: 97%;padding: 10px 1.5%;background-color: #000000; color: #FFFFFF;}
    .cs-prev, 
    .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }
    </style>  
      <div class='widget-content popular-posts'>
        <div id='coin-slider-pop'>
          <b:loop values='data:posts' var='post'>
          <a expr:href='data:post.href' expr:title='data:post.title'>
    	  <b:if cond='data:post.thumbnail'>
    	  <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
    	  <b:else/>
    	  <img expr:alt='data:post.title' src='http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif'/>
    	  </b:if>
    	  <span>
    	  <strong><data:post.title/></strong>
    	  <p><data:post.snippet/></p>
    	  </span>       
          </a>
          </b:loop>
        </div>
    <script type='text/javascript'>
    //<![CDATA[
    function resizeimage(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b);d[a].width=b}}
    resizeimage("PopularPosts2",630);
    //]]>
    </script> 	
    <script src='http://ivyth.googlecode.com/svn/js/coin-slider.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[
    $('#coin-slider-pop').coinslider({width:630,height:300});
    //]]>
    </script> 
    </div>
    </b:if>
    </b:includable>
    </b:widget>
    NB: CoinSlider merupakan jQuery Plugin. Sehingga untuk dapat bekerja pada blog anda harus meliliki jQuery library.
    Widget ini telah saya bungkus dengan tag kondisional yang hanya tampil pada halaman depan (Home/Beranda) kodenya pada baris 3 dan penutupnya baris 45.
  5. Klik Simpan


Nah itulah cara merubah widget popular post menjadi slideshow coinslider. Saya tidak memberikan keterangan lebih agar kalian dapat belajar serta membedakan disebelah mana letak perbedaan dari widget popular post yang umum dengan struktur dari slideshow diatas.
Sebenarnya bukan hanya coinslider yang dapat diaplikasikan pada widget popular post, tapi hampir semua slideshow. Intinya kita mengerti bagaimana susunan dari kerangka Slideshow tersebut kemudian output dari widget dibuat sesuai kerangka tersebut.
Satank Mkr Beri Komentar
Bagikan kepada teman!
Garis

52 comments:

  1. Mantapp..
    susah dibikin responsive.. :D

    BalasHapus
    Balasan
    1. mantab mas satank ,
      hehehe (h)
      tetap berjuang :-b

      Hapus
    2. Ngomong2 responsive tiba-tiba ingat janjix? Yang ditanyaiin di postingan featured posts slider jg ditunggu lho :-s

      Hapus
  2. Mantap gan!
    Boleh di share gak gan ?

    BalasHapus
  3. saya mau dong mas slideshow yang kayak di MKR ini :)

    BalasHapus
  4. Nice info gan, thanks for share

    BalasHapus
  5. Visit back gan ..

    anymous.net

    BalasHapus
  6. kakak .. cara menyembunyikan css diblog gmna ya [-( kalo di CTRL + U biar cssnya tersembunyi ;-(

    BalasHapus
    Balasan
    1. maksudnya :-?
      saya tdk mengerti..
      kenapa mau disembunyikan??

      Hapus
    2. di sembunyikan atau di encrypt kali mas..
      soalnya banyak template yang rawan di cloning, saya korbanya , dan ada yg bilang juga template mas yang My Magazin pernah di cloning juga.. :-?

      Hapus
    3. klo JS saya tau bisa encrypt tp klo CSS tdk pernah baca..

      Hapus
    4. kalau saya pakai tools ini mas.. http://tools.irvankadhafi.com/jsencrypt/
      sebenernya untuk enscrypt JS, tapi CSS juga bisa.. saya sendiri sudah mencobanya dan cssnya harus dibungkus <style>..</style> sebelum di enscrypt dahn kode hasil enscrypt harus diletakkan diatas </head> dan dibungkus seperti JS.
      http://xpress-community.blogspot.com/2013/01/cara-memproteksi-css-blogger.html
      tapi saya juga masih agar ragu apakah bahaya buat blog atau tidak di SERP.. :-?

      Hapus
  7. saya mohon kepada admin blog ini utuk menjawab pertanyaan saya
    saya memakai template buatana admin (MyTimeLine Responsive) , kenapa gambar emoticon di blog saya setiap di klik tidak muncul kode nya ?
    blog saya = http://fagenzo.blogspot.com/
    mohon kerja samanya

    BalasHapus
    Balasan
    1. sama seperti diblog ini..

      Hapus
    2. iya , saya mau menghapus emoticon di blog saya aja deh , cara nya gimana ?

      Hapus
    3. BLOG SAYA = http://fagenzo.blogspot.com/

      Hapus
  8. kalo mau di buat mendatar (horizontal) gimana ya mas?
    kan kalo default-nya widget popular post itu menurun (vertikal)

    BalasHapus
    Balasan
    1. hanya perlu mengatur CSS dari popularpost tersebut..
      klo saya bisanya saya atur dalam persen..

      Hapus
  9. keren mas ... (h)
    thanks infonya yaa :))

    BalasHapus
  10. Hebat nih mas MKR (h) 100 Buat mas :d

    BalasHapus
  11. (H) adoro esse site deste do web-design parabéns.

    BalasHapus
  12. wah mas, sudah saya coba tapi gak responsive ya? ;(

    BalasHapus
  13. mas cara membuat form yang tampil di saat menklik emotico yang seperti punyamas gimana buatnya

    BalasHapus
  14. kunjungan siang mantep bgt widget nya mas
    cpartikel.com

    BalasHapus
  15. mantab sob bisa dicoba nih. ^_^

    BalasHapus
  16. jadi cantik banget sob tampilannya :)

    BalasHapus
  17. Mantap Bos....ijin coba ya ??? :d

    BalasHapus
  18. Mas,klo popular post nya di sidebar, gmna cara memperkecilnya mas...??
    mhon bantuannya mas.... (h)

    BalasHapus
  19. ngomong-ngomong soal responsive saya gk ngertiii, tolong dong para master buatin saya kode responsivenya, nih blog saya http://yoga-tc.blogspot.com/

    BalasHapus
  20. mau nanya..
    punya saya kenapa hasilnya jadi seperti ini ??
    SS ===> http://prntscr.com/1k5s2a

    BalasHapus
  21. maaf kenapa punya saya jadi seperti in ?
    SS ===> http://prntscr.com/1k5s2a

    BalasHapus
  22. brother please help
    Please see the picture first
    http://4.bp.blogspot.com/-UX-fdhZqlhg/UfIwvNW55II/AAAAAAAAAyc/W8D3MXKb4-A/s1600/MyExtraNews.png

    Now, How to Make this in my blog? Can I increase the number of squares?
    Please provide me with CODE and thank you for your wonderful template
    Waiting for you ...

    BalasHapus
  23. mas dishare juga donk slideshownya yg kayak halaman depan blognya mas ini , bagus banget

    BalasHapus
  24. nice info :)

    http://moeclazh.blogspot.com/

    BalasHapus
  25. (h) mmm....nice gan
    kalau untuk wordpre gmna cara bikinya nih gan,tolong di bantu gan
    vimaxgrowth.blogspot.com

    BalasHapus
  26. Maaf mas, popular post nya kok gk ada? dimana dia berada.

    BalasHapus
  27. Nice Post gan :)

    ditunggu kunjungan baliknya ya :)

    satupijakan.blogspot.com

    tempat download semua aplikasi android apk, games, movie action dan horor, sudah dirangkum disana.

    BalasHapus
  28. terimakasih banyak mas langsung di coba deh untuk popoler postnya, salam kenal ya jangan lupa mampir
    www,volimaniak.com

    BalasHapus
  29. Makasih Mas Satank atas Info ini.
    ijin coba yaa
    :)

    Harga iPhone

    BalasHapus
  30. There are no right and wrong ways to work in this business, but there are some basic common-sense practices. Work very, very hard and always be prepared; never give up; and once you get the job, give them more than they ever expected: - Shine! Obat herbal stroke

    BalasHapus
  31. When you get into a tight place and everything goes against you, till it seems as though you could not hang on a minute longer Pengobatan epilepsi never give up then, for that is just the place and time that the tide will turn. Pengobatan tumor otak Your victory is right around the corner. Never give up. Pengobatan usus buntu

    BalasHapus
  32. Memaksimalkan tampilan blogger dengan modifikasi widget memang bisa menjadi daya tarik tersendiri bagi pengunjung. Sukses terus gan.

    BalasHapus
  33. This news is very interesting, I am very happy to read a good article like this, same like http://kelenjargetahbening.web.id/

    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