Merubah Widget Popular Post Menjadi Slideshow Coinslider



Merubah Widget Popular Post Menjadi Slideshow Coinslider, Anaktimor17 Blog – Sobat blogger, kembali saya bagi tips blogging terbaru buat Anda. Nah pada kesempatan ini saya akan berbagi tentang cara Merubah Widget Popular Post Menjadi Slideshow Coinslider di blogspot.

            Apa itu Artikel terpopuler (Popular Post)??
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.
            Sobat dengan sedikit sentuhan CSS, widget popular post akan kita modifikasi agar terlihat keren.Sobat  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.
Karena widget popular post ukuran gambarnya hanya 72px yang sudah dicrop maka perlu Java Script untuk mengubah ukuran gambarnya. Bagi yang penasaran bagaimana cara memasangnya bisa mengikuti cara berikut ini:

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 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.
·  Klik Simpan


Sekian artikel MerubahWidget Popular Post Menjadi Slideshow Coinslider . Jangan lupa komentarnya sobat :)
 
Sumber: http://mkr-site.blogspot.com/2013/04/popular-post-blogger-slideshow.html
Post a Comment