Tips Blog Cara Mudah Membuat Widget Populer Post Warna Warni

Tips Blog Cara Mudah Membuat Widget Populer Post Warna Warni - Membuat tampilan dari widget populer post sangat lah mudah, namun pada kali ini saya ingin membagikan tutorial bagaimana cara merubah tampilan widget populer post menjadi warna warni, tidak hanya enak di lihat namun widget ini dapat membantu blog kita agar blog kita terlihat lebih cantik dan menarik.

Widget populer post merupakan sebuah widget yang memperlihatkan artikel yang paling populer dikunjungi oleh para pengunjung blog. Jadi untuk membuat tampilan dari blog kita lebih menarik dan banyak yang mengunjungi blog kita kita dapat membuat widget populer post ini menjadi lebih menarik dengan membuatnya menjadi warna warni seperti pada gambar diatas. 

Artikel terkait
Tips Blog Cara Membuat Random Post SEO Friendly Yang Simple dan Ringan

Untuk menambahkan nya tidaklah sulit kita hanya perlu memasang kode css pada template blog kita dan berikut ini cara mudah untuk menambahkan kode css tersebut pada blog milik kita ini.

1. Silahkan masuk ke akun blogger anda
2. Tambahkan widget populer post dengan cara layout > add gedget > widget populer post/ entri populer

Setelah kita menambahkan widget populer post maka untuk tahap selanjutnya saya memiliki 2 cara untuk merubah tampilan populer post anda menjadi warna warni.

Cara pertama 

Cara yang pertama ini kita hanya mencopykan kode yang saya berikan nanti ke widget html/javascript untuk merubah tampilan populer post menjadi warna warni.

1. Masuk ke blog kita
2. Pilih layout > add gedget > HTML/Javascript
3. Copykan kode dibawah ini ke form yang ada pada HTML/Javascript tersebut.

<style type='text/css'>

/*----- POPULAR POST WARNA WARNI -----*/

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}

#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}

#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}

#PopularPosts1 ul li:first-child:after,

#PopularPosts1 ul li:first-child + li:after,

#PopularPosts1 ul li:first-child + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}

#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}

#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}

#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}

#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}

#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}

#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}

#PopularPosts1 ul li:first-child + li + li:after{content:"3"}

#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}

#PopularPosts1 ul li:first-child + li:after{content:"2"}

#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}

#PopularPosts1 ul li:first-child:after{content:"1"}

#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}

#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

</style> 

Lalu kita dapat menyimpannya dan kita dapat melihat tampilan widget populer post berubah menjadi tampilan warna warni yang cantik.

Cara ke dua

Pada cara yang kedua ini, kita akan menempatkan kode yang saya berikan ini pada template dari blog anda, untuk merubahnya silahkan ikuti langkah-langkah berikut ini.

1. Masuk ke blog anda
2. Pilih template > edit html
3. Cari kode ]]></b:skin> dengan cara klik bagian dalam template html tersebut lalu kita tekan kombinasi tombol Ctrl + F didalam dan pada kotak pencarian silahkan cari kode ]]></b:skin>
4. Setelah ketemu tempatkan kode dibawah ini diatas kode ]]></b:skin>

/*----- POPULAR POST WARNA WARNI -----*/

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}

#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}

#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}

#PopularPosts1 ul li:first-child:after,

#PopularPosts1 ul li:first-child + li:after,

#PopularPosts1 ul li:first-child + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}

#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}

#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}

#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}

#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}

#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}

#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}

#PopularPosts1 ul li:first-child + li + li:after{content:"3"}

#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}

#PopularPosts1 ul li:first-child + li:after{content:"2"}

#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}

#PopularPosts1 ul li:first-child:after{content:"1"}

#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}

#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px} 

Sekarang jangan lupa disave template nya dan kita lihat apakah tampilan dari widget populer post sudah berubah menjadi warna warni seperti pada gambar saya di atas. Jika sudah anda telah berhasil membuat widget blog populer post menjadi warna warni.

Sekian dulu artikel saya yang berjudul Tips Blog Cara Mudah Membuat Widget Populer Post Warna Warni. Semoga artikel saya kali ini dapat berguna dan dapat dipergunakan untuk pemercantik blog milik anda. terimakasih

Share this post