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:
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
Jika diblog anda belum tampil tombol/tulisan add gadget di atas Blog Posts ikuti langkah berikut untuk menampilkannya:
- Pada dashbord pilih Template kemudian klik tombol Edit HTML
- 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'>.
- Klik Simpan
Jika diblog anda belum tampil tombol/tulisan add gadget di atas Blog Posts ikuti langkah berikut untuk menampilkannya:
- Pada dashbord pilih Template kemudian klik tombol Edit HTML
- 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'>. - Klik Simpan
Menambahkan gadget Popular Post dan Script Slideshow CoinSlider
- Pada dashbord pilih Layout/Tata Letak kemudian klik tulisan Add a Gadget diatas Blog Post Area
- Setelah itu scroll kebawah hingga menemukan Popular Post lalu klik tombol tambah yang ada disudut kanan Setelah itu klik Save/Simpan
- 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
- Kemudian Ganti Widget Popular Post yang tadi dengan Kode berikut:
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647<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.
- 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.
- Pada dashbord pilih Layout/Tata Letak kemudian klik tulisan Add a Gadget diatas Blog Post Area
- Setelah itu scroll kebawah hingga menemukan Popular Post lalu klik tombol tambah yang ada disudut kanan Setelah itu klik Save/Simpan
- 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
- Kemudian Ganti Widget Popular Post yang tadi dengan Kode berikut:
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
NB: CoinSlider merupakan jQuery Plugin. Sehingga untuk dapat bekerja pada blog anda harus meliliki jQuery library.<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>
Widget ini telah saya bungkus dengan tag kondisional yang hanya tampil pada halaman depan (Home/Beranda) kodenya pada baris 3 dan penutupnya baris 45. - 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.
+(2).png)
