Merubah Tampilan Widget Popular Post Jadi Lebih Keren: Baiklah shobat kali ini saya akan coba memberikan tutorial untuk mengubah tampilan widget popular post kamu jadi lebih keren, membuat tampilan web/blog jadi lebih keren itu idaman pasti setiap pemiliknya.
Nah cara penerapanya pun cukup terbilang mudah hanya harus melewati sedikit langkah-langkah di bawah ini maka widget poplart kamu akan terlihat lebih menarik dari sebelumnya.
Populart post dengan tampilan thumbnails bisa memberikan kesan menarik bagi pengunjung (visitor) blog kmau,
Nah bagai mana tertarik memasangnya??? Langsung saja ikuti tutorialnya di bawah ini.
Merubah Tampilan Widget Popular Post Jadi Lebih Keren
1. Pertaman-tama buka Blogger>Tema>Edit Html, nah pada edit html silahkan kamu cari kode ]]></b:skin> lalu pastekan kode berikut tepat di atasnya. untuk mempercepat pencarian kamu bisa klik tombolCTRL
+F
di keyboard kamu..PopularPosts h6{color:#e51c23}
.PopularPosts .item-thumbnail{margin:3px 10px 10px 0;border:1px solid #E6E6E6;border-radius:50%;overflow:hidden;display:inline}
.PopularPosts .item-thumbnail a img{height:40px;width:40px;display:block;margin:0;padding:0;border-radius:50%}
.PopularPosts ul{list-style-type:none;background:#fff}.PopularPosts li{margin:0;padding:10px!important}.PopularPosts ul li{margin:10px 5px;padding:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12)}.PopularPosts li a{font-weight:700;font-family:'Roboto',sans-serif;font-size:13px;color:#828282!important;transition:all .5s;border:none}.PopularPosts li a:hover{color:#07ACEC!important;border:none}.cloud-label-widget-content{margin-top:10px!important}
.PopularPosts .item-thumbnail{margin:3px 10px 10px 0;border:1px solid #E6E6E6;border-radius:50%;overflow:hidden;display:inline}
.PopularPosts .item-thumbnail a img{height:40px;width:40px;display:block;margin:0;padding:0;border-radius:50%}
.PopularPosts ul{list-style-type:none;background:#fff}.PopularPosts li{margin:0;padding:10px!important}.PopularPosts ul li{margin:10px 5px;padding:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12)}.PopularPosts li a{font-weight:700;font-family:'Roboto',sans-serif;font-size:13px;color:#828282!important;transition:all .5s;border:none}.PopularPosts li a:hover{color:#07ACEC!important;border:none}.cloud-label-widget-content{margin-top:10px!important}
Jika di template shobat sebelumnya sudah terpasang css populart post, shobat tinggal ganti dengan css di atas2. Terakhir silahkan kamu save/simpan tema kamu, lalu lihat hasilnya jika sudah selamat yaa!!
Nah mungkin sampe di sini tutorial saya, bagai mana shobat mudah bukan, jika penerapan di atas tidak memberikan hasil seperti yang di inginkan. shobat bisa mengeluhkan kesalahan ini dalam bentuk komentar di bawah ini terimakasi
# Saya akan coba merespon komentar baru secepatnya.
# Harap berkomentar dengan bahasa baku tanpa singkatan.
# Komentar promosi, spam, dan komentar satu kalimat yang tidak bermutu akan saya hapus langsung.
# Jangan menggunakan nama pengomentar dengan nama yang berbau porno, judi, dan yang negatif lainnya.
# Setiap komentar akan dimoderasi secara manual sebelum muncul. EmoticonEmoticon