Pada kesempatan kali ini aku akan membahas sedikit mengenai cara modifikasi widget popular post biar terlihat keren dan full color warna-warni menyerupai pelangi dilengkapi dengan nomor urut 1 hingga 10.
Widget popular post atau yang kita kenal sebagai widget artikel populer termasuk salah satu widget yang paling banyak dipakai oleh blogger.
Widget ini berfungsi untuk menampilkan artikel atau postingan yang paling banyak di cari oleh pengunjung dan paling terkenal di blog atau website tersebut.
Pernahkah Anda berpikir bahwa widget popular post sanggup kita modifikasi sehingga mempunyai tampilan yang keren dan penuh dengan warna-warni yang sanggup memanjakan mata ketika melihatnya?
Jika widget popular post blog Anda sudah di modifikasi atau di edit dengan isyarat css lainnya, sebaiknya isyarat tersebut di hapus terlebih dahulu kemudian di ganti dengan isyarat css yang gres dari sini.
Baca juga: Cara Membuat Efek Gradasi Warna Pada Teks dan Background Blog
Nah pribadi saja kali ini aku akan coba menciptakan tutorial edit widget popular post supaya terlihat keren dan menarik dilengkapi imbas warna-warni menyerupai pelangi, silahkan ikuti langkah-langkahnya di bawah ini.
Cara Modifikasi Widget Popular Post Keren Warna-Warni
Pastikan dulu blog Anda sudah memasang widget popular post, jikalau Anda belum memasang widget popular post silahkan ikuti langkah-langkahnya dari pertama hingga akhir, tapi kalau blog Anda sudah memasang widget popular post pribadi saja ke langkah nomor 3 dan ikuti hingga akhir.1. Masuk ke Blogger.com.
2. Klik Tata Letak > Tambahkan Gadget > Postingan Populer > Simpan.
3. Klik Tema.
4. Cari isyarat
]]></b:skin> atau </style>.5. Copy isyarat CSS di bawah ini, kemudian Paste sebelum isyarat
]]></b:skin> atau </style>./* Popular Post */ .PopularPosts ul, .PopularPosts li, .PopularPosts li img, .PopularPosts li a, .PopularPosts li a img { margin: 0 0; padding: 0 0; list-style: none; border: none; background: none; outline: none; } .PopularPosts ul { margin: .5em 0; list-style: none; color: black; counter-reset: num; } .PopularPosts ul li img { display: block; margin: 0 .5em 0 0; width: 50px; height: 50px; float: left; } .PopularPosts ul li { background-color: #eee; margin: 0 10% .4em 0 !important; padding: .5em 1.5em .5em .5em !important; counter-increment: num; position: relative; } .PopularPosts ul li:before, .PopularPosts ul li .item-title a, .PopularPosts ul li a { font-weight: normal; color: #000 !important; text-decoration: none; } .PopularPosts ul li:before { content: counter(num) !important; display: block; position: absolute; background-color: #333; color: #fff !important; width: 22px; height: 22px; line-height: 22px; text-align: center; top: 0px; right: 0px; padding-right: 0px !important; } /* Set color and level */ .PopularPosts ul li:nth-child(1) { background-color: #A51A5D; margin-right: 1% !important } .PopularPosts ul li:nth-child(2) { background-color: #F53477; margin-right: 2% !important } .PopularPosts ul li:nth-child(3) { background-color: #FD7FAA; margin-right: 3% !important } .PopularPosts ul li:nth-child(4) { background-color: #FF9201; margin-right: 4% !important } .PopularPosts ul li:nth-child(5) { background-color: #FDCB01; margin-right: 5% !important } .PopularPosts ul li:nth-child(6) { background-color: #DEDB00; margin-right: 6% !important } .PopularPosts ul li:nth-child(7) { background-color: #89C237; margin-right: 7% !important } .PopularPosts ul li:nth-child(8) { background-color: #44CCF2; margin-right: 8% !important } .PopularPosts ul li:nth-child(9) { background-color: #01ACE2; margin-right: 9% !important } .PopularPosts ul li:nth-child(10) { background-color: #94368E; margin-right: 10% !important } .PopularPosts .item-thumbnail { margin: 0 0 0 0; } .PopularPosts .item-snippet { font-size: 11px; } .widget-content ul li { margin: 0; padding: 6px 0px; border-bottom: 1px solid #ededed } .widget-content ul li:last-child { border-bottom: medium none !important } .widget-content ul li a { color: #333 } .widget-content ul li a:hover { color: #C80441 } .item-date { font-size: 11px; font-style: italic; font-weight: bold; color: #FFCC00 }6. Klik Simpan tema.
Catatan:
Anda sanggup mengganti warnanya sesuai dengan keinginan, silahkan gunakan tools online Kode Warna HTML.
Itulah artikel mengenai cara menciptakan widget popular post keren warna warni di blog, caranya cukup gampang bukan? Anda hanya perlu menambahkan isyarat css untuk melaksanakan modifikasi widget popular post. Selamat mencoba, semoga bermanfaat.
Sumber http://www.caramanual.com