Cara Membuat Widget Popular Post Keren Warna Warni di Blog

Pada kesempatan kali ini saya akan membahas sedikit mengenai cara modifikasi widget popular post agar terlihat keren dan full color warna-warni seperti pelangi dilengkapi dengan nomor urut 1 sampai 10.

Widget popular post atau yang kita kenal sebagai widget artikel populer termasuk salah satu widget yang paling banyak digunakan oleh blogger.

Widget ini berfungsi untuk menampilkan artikel atau postingan yang paling banyak di cari oleh pengunjung dan paling populer di blog atau website tersebut.

Pernahkah Anda berpikir bahwa widget popular post bisa kita modifikasi sehingga memiliki tampilan yang keren dan penuh dengan warna-warni yang dapat memanjakan mata saat melihatnya?

Jika widget popular post blog Anda sudah di modifikasi atau di edit dengan kode css lainnya, sebaiknya kode tersebut di hapus terlebih dahulu kemudian di ganti dengan kode css yang baru dari sini.

Baca juga: Cara Membuat Efek Gradasi Warna Pada Teks dan Background Blog

Nah langsung saja kali ini saya akan coba membuat tutorial edit widget popular post supaya terlihat keren dan menarik dilengkapi efek warna-warni seperti 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, jika Anda belum memasang widget popular post silahkan ikuti langkah-langkahnya dari pertama hingga akhir, tapi kalau blog Anda sudah memasang widget popular post langsung saja ke langkah nomor 3 dan ikuti sampai akhir.

1. Masuk ke Blogger.com.
2. Klik Tata Letak > Tambahkan Gadget > Postingan Populer > Simpan.
3. Klik Tema.
4. Cari kode ]]></b:skin> atau </style>.
5. Copy kode CSS di bawah ini, lalu Paste sebelum kode ]]></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 bisa mengganti warnanya sesuai dengan keinginan, silahkan gunakan tools online Kode Warna HTML.

Itulah artikel mengenai cara membuat widget popular post keren warna warni di blog, caranya cukup mudah bukan? Anda hanya perlu menambahkan kode css untuk melakukan modifikasi widget popular post. Selamat mencoba, semoga bermanfaat.

Cara Manual

Cuman hobi nulis tentang tutorial blog jadi deh blog cara manual.

Bagikan Artikel ini