Cara Memasang Widget Popular Post Bernombor Di Blogger

Ramai blogger baru suka hias blog, So saya akan kongsikan cara membuat widget popular post bernombor di blogger, dan berikan sedikit keunikan untuk blog anda.
Saya akan kongsikan beberapa code css untuk menampilkan nombor di widget popular Posts, sama seperti yang saya gunakan di dalam blogger O4U ini.
Cara Memasang Widget Popular Post Bernombor Di Blogger

Selain itu anda juga boleh mengubah style widget ini dengan senang, asalkan anda mempunyai pengetahuan dalam code css, taip sekiranya anda inginkan pertolongan silakan tinggalkan comment di ruangan yang di sediakan.

Ok jom mulakan dengan tutorialnya.

Sekiranya anda tlah membuat widget popular posts , silakan semak id widget anda, di sini saya menggunakan id PopularPosts1 kerana saya mempunyai 2 widget popularpost di hompage dan di posting area.

Saya ingatkan, sebelum memulakan pengeditan, silakan buat backup tempelate anda untuk keselamatan anda.

Sekiranya id widget anda PopularPosts silakan tukar PopularPosts1 menjadi PopularPosts.

Seterusnya login ke blogger anda , tab theme > Html editor dan masukan css berikut ke dalam css style anda.

/* popular posts bernombor */
#PopularPosts1 .widget-content.popular-posts{margin:4px; padding:10px;font-size:12px;background:#008c5f;border-radius:10px;color:#fff;}
#PopularPosts1 .widget-content.popular-posts a {color:#fff;padding-left:10px;}
#PopularPosts1 .widget-content ul li {display:flex; list-style:none; width:auto; margin-bottom:6px; padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,.3);}
#PopularPosts1 .widget-content ul li:first-child {border-top:none}
#PopularPosts1 .widget-content ul li:last-child {border:0px; margin-bottom:0px; padding-bottom:0px}
#PopularPosts1 .widget-contentul li a {font-size:13px; color:#fff; line-height:18px; margin-left:10px}
#PopularPosts1 .widget-content ul li a:hover {color:#fff}
#PopularPosts1 .widget-content {counter-reset: O4U}
#PopularPosts1 .widget-content ul li:before {counter-increment: O4U; content: counter(O4U) ". "; font-weight:500; font-size:14px; font-style:italic}

Setelah selesai memasang css code di atas silakan save template anda. dan lihat hasilnya.
anda boleh mengubah warna sesuai kemahuan anda,

Baiklah sampai di sini sajala posting saya tentang cara membuat widget popular post bernombor di blogger, Moga apa yang saya kongsikan ini dapat menjawap pertanyaan anda berkaitan widget popular post bernombor ini.

Sekiranya ada apa apa pertanyaan silakan tinggalkan commen di ruangan yang di sediakan, wasalam dari kami.