Membuat Widget Entri Populer Tampil Lebih Menarik

Pada kesempatan kali ini saya mau berbagi tentang cara membuat widget entri populer yang seperti terpasang di sidebar blog saat ini. Sebenarnya widget ini merupakan widget kepunyaan Blogger sendiri yang ditambahkan kode css tertentu agar tampak lebih menarik dan lain dari pada yang lain.

Bagaimana cara membuatnya? Silakan disimak langkah-langkahnya di bawah ini. Semoga berhasil.

Tampilan Widget Entri Populer

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk berjaga-jaga kalau-kalau nanti terjadi kesalahan dalam pengeditan.

4. Silakan cari kode ]]></b:skin>.

5. Letakkan kode berikut di bawah kode ]]></b:skin>.

<style type='text/css'>
.PopularPosts .item-title{display:yes}
.PopularPosts ul li {
border-radius:50px 0px 0px 50px;
float: left;list-style: none outside none;margin: 1px !important;padding: 1px !important;
border: 1px solid #444;
overflow: hidden;
box-shadow: 0px 0px 1px #333;
font-style: normal;
font-weight:bold;
width: 100%;
height:60px;
border-radius:35px 5px 5px 35px;
}
.PopularPosts ul li:hover{
background: -moz-linear-gradient(top, #FFFFFF 1%, #5c5c5c 50%);
overflow: hidden;
color: #414141;
width: 100%;
height:60px;
border: 1px solid #ffffff;
box-shadow: 0px 0px 2px #ffffff;
}
.PopularPosts ul li img {
padding:1px  ;
margin:1px;
margin-top:3px;
border-radius:35px 35px 35px 35px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
border: 1px solid #333;
height: 50px;width:50px;
overflow: hidden;
}
.PopularPosts ul li img:hover {
border:1px solid #ffffff;
border-radius:25px 25px 25px 25px;
background: -moz-linear-gradient(top, #FFFFFF 1%, #5c5c5c 50%);
box-shadow: 0px 0px 10px #ffffff;
}
</style>

6. Klik tombol SIMPAN TEMPLATE.

7. Pasang widget Entri Populer Anda dan konfigurasikan sesuai keinginan.

Entri Populer dengan Tampilan Gambar Berputar dan Membesar

Adanya widget Popular Posts atau Entri Populer di blog membuat pengunjung dapat mengetahui artikel mana saja yang paling banyak dibaca atau dikunjungi dalam suatu periode tertentu. Blogger sendiri telah menyediakan gadget ini sejak beberapa waktu yang lalu.

Di luar Blogger, para pembuat widget ada yang memodifikasi widget ini agar penampilannya menjadi lebih menarik. Salah satunya adalah widget Popular Posts dengan tampilan berupa gambar-gambar yang tersusun menjadi beberapa baris dan kolom. Selain itu, bila mouse diarahkan atau disorot ke salah satu gambar, maka efek hover-nya akan membuat gambar tersebut membesar dan juga berputar.

Entri Populer dengan tampilan gambar.

Untuk memasang widget Entri Populer keren ini, kita cukup meletakkan skrip pada HTML template blog kita serta menambahkan gadget Entri Populer Blogger tentunya di sidebar. Skrip widget Popular Posts Thumbnail View ini saya dapat dari http://mwcrew10.blogspot.com/2012/01/popular-posts-with-thumbnail-view.html. Terima kasih Sob..

Untuk memasang widget artikel populer dengan tampilan gambar ini, Anda dapat menyimak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan >> Edit HTML.

3. Klik Download Template Lengkap untuk mem-backup template. Jika nanti terjadi apa-apa, kita sudah mempunyai salinannya sehingga mudah untuk mengembalikan template seperti semula.

4. Tempatkan kode berikut di bawah kode ]]></b:skin>.

<style type='text/css'>
.PopularPosts .item-title{display:none}
.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;}
.PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;}
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}
</style>

5. Klik tombol "SIMPAN TEMPLATE".

6. Klik tab Elemen Laman >> Tambah Gadget >> Entri Populer.

7. Konfigurasikan "Entri Populer" sesuai keinginan Anda. Namun, jangan centang pada kotak "cuplikan" karena akan memunculkan deskripsi singkat dari isi posting pada widget.

Mengonfigurasikan widget "Entri Populer".

8. Klik tombol "Simpan".

9. Pindahkan elemen ke tempat yang Anda inginkan.

10. Klik tombol "SIMPAN".

11. Selesai dan lihat blog Anda.

Memasang Widget Artikel Populer Berdasarkan Komentar Terbanyak

Pada kesempatan terdahulu di blog ini telah dibahas mengenai cara memasang gadget entri populer. Gadget tersebut merupakan gadget kepunyaan Blogger sendiri yang disusun berdasarkan banyaknya tayangan laman dari masing-masing posting yang ada di blog. Nah, kali ini kita akan membahas hal yang serupa. Namun, widget artikel populer yang akan kita pasang ini berdasarkan jumlah komentar terbanyak.

Bila Anda tertarik untuk memasang widget artikel populer berdasarkan banyaknya komentar, berikut ini cara pemasangannya.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Elemen Laman > Tambah Gadget.

3. Pilih HTML/JavaScript.

4. Beri judul sesuai keinginan Anda.

5. Copy dan paste kode di bawah ini di Konten.

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ul style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=a7d3195528df5e96181a3d2712266226&url=http%3A%2F%2Fklikmunadi.blogspot.com&num=10" type="text/javascript"></script>

• Ganti klikmunadi.blogspot.com dengan url blog Anda.
• Angka 10 menunjukkan banyaknya posting yang ingin ditampilkan, ini bisa diganti sesuai keinginan Anda.

6. Klik tombol SIMPAN.

7. Pindahkan elemen ke tempat yang Anda inginkan.

8. Klik tombol SIMPAN.

9. Selesai.

Tambah Gadget Entri Populer

Manfaat yang diperoleh dari pemasangan gadget ini adalah kita dapat mengetahui entri atau artikel mana saja yang paling banyak dibaca oleh pengunjung blog kita. Gadget Entri Populer yang saya bahas ini merupakan gadget dari Blogger sendiri. Menurut saya gadget ini mempunyai beberapa kelebihan diantaranya praktis dan mudah dipasang karena kita tidak perlu memasang script. Selain itu, gadget ini juga tidak membuat blog menjadi berat saat dibuka.

Berikut ini langkah-langkah pemasangannya:

1. Masuk ke akun Blogger Anda.
2. Setelah berada di Dasbor, klik Rancangan.
3. Pilih Elemen Laman.
4. Klik Tambah Gadget.
5. Pada bagian Dasar-dasar, pilih Entri Populer.

6. Silakan konfigurasikan Entri Populer sesuai dengan kebutuhan Anda.

7. Jangan lupa klik SIMPAN.

8. Selesai dan lihat hasilnya.