Membuat Widget Popular Posts Keren Fast Loading Image Circle Style

Popular Posts SEO Friendly Fast Loading

Cara Membuat Widget Popular Posts Fast Loading

Berikut adalah cara membuat widget popular posts keren yang fast loading dengan image circle style ditambah efek hover spinning pada thumbnail serta efek hover border & background pada link..

Popular posts merupakan salah satu widget yang wajib dipasang untuk meningkatkan pageviews blog. Dari sinilah banyak orang berlomba-lomba mempercantik tampilan popular posts agar semakin menarik perhatian pengunjung..

Tertarik membuat widget popular posts seperti yang terpasang di blog ini..?

Cara membuatnya sangat mudah, widget ini merupakan widget bawaan blogger yang dimodifikasi dengan menambahkan CSS3, jadi dijamin tetap fast loading.. (Sumber)

# Cara membuat widget popular posts fast loading dengan image circle style

1. Login ke akun blogger anda
2. Tata letak >> tambah gadget >> popular posts
3. Centang thumbnail untuk menampilkan gambar dan centang snippet atau cuplikan jika ingin menampilkan ringkasan
4. Simpan

Kemudian kita modifikasi tampilannya dengan masuk ke edit HTML pada template..

1. Edit HTML lalu cari kode ]]></b:skin>
2. Salin dan tempelkan kode CSS berikut di atas kode ]]></b:skin> lalu save template

.popular-posts ul{padding-left:0px;font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0} .popular-posts ul li {background: url(#) no-repeat scroll 5px 5px; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 5px !important;font-size:12px!important;font-weight:550; border: 1px solid #58ACFA; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } .popular-posts ul li:hover { background: #CCE9FD;border:1px solid #58ACFA; } .popular-posts ul li a:hover { text-decoration:none; } .popular-posts .item-thumbnail img { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);height:70px;width:70px;}.popular-posts .item-thumbnail img:hover { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg);}

Catatan : Jika anda ingin mengganti tulisan menjadi rata kiri, ubah text align justify menjadi left. Anda juga dapat mengubah font, ukuran, dan kode warnanya..

Namun perlu diketahui, jika anda ingin widget popular posts yang SEO friendly, anda membutuhkan 1 langkah lagi. Silahkan baca: Memasang Widget Popular Posts SEO Friendly Dengan Default Thumbnail

Demikian tutorial cara membuat widget popular posts dengan image circle style. Semoga bermanfaat..

——○●※●○——

Esha Ardhie
Jum'at, 26 Agustus 2016


Rasulullah shallallahu 'alaihi wa sallam bersabda: "Barangsiapa yang menunjuki kepada kebaikan, maka dia akan mendapatkan pahala seperti pahala orang yang mengerjakannya." [HR. Muslim no. 1893]


Blognya Esha Ardhie Updated at: 20.49.00
Please Feel Free to Share