Cara Membuat Widget Popular Posts Fast Loading
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
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
