Cara Membuat Widget Popular Post Keren Dan Tampil Menarik

Cara Membuat Widget Popular Post Keren Dan Tampil Menarik - Apakah anda merasa bahwa widget popular post di blog anda kurang menarik? Tampilan default dari widget popular post ternyata bisa diubah menjadi lebih menarik bila kita sedikit menambahkan kode CSS. Saya akan memberi solusi untuk anda yang ingin membuat widget popular post agar lebih keren dan menarik menggunakan kode CSS yang diciptakan TipsTrikBlogging.com. Simak tutorial di bawah ini.

Pertama, anda tambahkan dulu widget popular post ke blog anda.

1. Masuk ke akun blogger anda.

2 . Pergi ke tata letak -> tambah gadget -> Entri Populer

3. Setelah itu klik "simpan"

Sekarang, tambahkan kode CSS untuk memodifikasi widget popular post.

4. Pergi ke template -> edit HTML

5. Cari kode ]]></b:skin> dengan bantuan ctrl+f

6. Masukkan script berikut di atas kode ]]></b:skin>

.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 #ff3030; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } .popular-posts ul li:hover { background: #ffb6c1;border:1px solid #ff3030; } .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);}

Text berwarna oranye bisa anda ganti dengan kode warna lain untuk warna garis border.
Text berwarna biru bisa anda ganti dengan kode warna lain untuk warna background.

7. Jangan lupa klik "simpan".

8. Sekarang periksa widget popular post blog anda. Kini widget popular post tampil lebih menarik dan keren.

Selamat mencoba ^_^