Customize Blogger Widget Popular Posts Dengan CSS

Menyesuaikan widget rasmi blogger tidak begitu mudah, tetapi dengan tutorial ini, anda akan dapat untuk menyesuaikan blogger rasmi posts widget popular menggunakan CSS. Idea saya gunakan dalam menyesuaikan widget ini berasal dari kod CSS.













Langkah 1 : Bagaimana Untuk Tambah Popular Posts Untuk Blog Anda

Sebelum anda boleh menyesuaikan rasmi blogger widget popular posts, anda akan perlu untuk menambah ia dari susun atur halaman anda,

•     Pergi ke papan pemuka blogger anda
•     Klik pada Layout> Tambah Gadget (New blogger muka)
•     Sekarang memilih Popular Posts Baru! daripada pilihan yang muncul dalam tetingkap  pop-up.
•     Tetapkan seperti yang ditunjukkan di bawah, tetapi anda boleh mengubah beberapa kiriman untuk dipaparkan dari 10.

• Sekarang klik pada butang Save

Langkah 2 : Bagaimana Untuk Customize Widget Popular Posts

   

•     Pergi ke Template > Edit HTML > Proceed (New blogger interface)
•     Guna ctrl F untuk cari ]]></b:skin>  
•     Setelah anda jumpa anda perlu copy kode dibawah ini dan pastekan di atas/sebelum kode  ]]></b:skin>

/*--- Customize Popular Posts Widget Design By www.jeritanblog.com --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCSpBgBo-9KI3lqQQpUtnCDQCbzHXdIlZWQyGFeb-m29ljzvpNZw8iwwzGgjC1Dum0OeNeo5GD9Igz1nTgahETum6DeSJK0wbxhiJQ8JRBdCB1O6mbNIPjDTexj_601dR0-1hSHiJ-uwM/s1600/rb+cancel+icon...jpg) no-repeat scroll 5px 10px;
list-style-type: none;
margin: 0 0 5px 0px;
padding: 5px 5px 5px 33px !important;
border: 1px dashed #dddddd;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.popular-posts ul li:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpaadCbtT3EolZOVWO5tK-hlahXZT4W_E7FlwnL7WlCkrUkZIQbsvKzjg9wPHvi6fPhKc4M3dodjZB44hM6_TNjQf1BvjyluHQfnaewr64kitgK_OzpSeIS9pjcTzL8e9LVcwlYncplJU/s1600/rb+mark+icon...jpg) no-repeat 2px;
border: 2px solid #b60000;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
.popular-posts ul li a:hover {
text-decoration:none;
}

•     Sekarang menyimpan template anda dan anda telah selesai.

Apa yang anda fikir tentang penyesuaian ini, adakah ia bernilai cuba?
Kami ingin mendengar maklum balas anda dan berkongsi post ini dengan kawan-kawan / pengikut.