Media Informasi Tentang Cara Praktis Ngeblog, Tutorial Blog, Monetisasi Blog,Tips Dan Trik Blogger, Template Blog, Adsense Dan Aplikasi Android

Breaking

April 29, 2019

Cara Praktis Membuat Widget Popular Post Bernomor

loading...


Pernahkah anda membaca sebuah blog dan menemukan widget populer post bernomor di blog tersebut yang tampilannya cukup menarik ? Kadang kita merasa kalau tampilan widget bawaan template aslinya kurang sesuai dengan keinginan kita dan kita ingin merubahnya agar tampil lebih menarik.

Coba perhatikan contoh widget populer post berikut ini :

Source: onet4u

Jika anda tertarik dengan widget populer post seperti di atas caranya cukup mudah. 

Anda copy saja kode HTML berikut ini dan pastekan di bagian CSS blog atau di atas kode </style>.

/* 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}

Bagaimana sobat, cukup mudah bukan ? Selamat mencoba dan berkreasi.
loading...

No comments:

Post a Comment