Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget Atas Posting

Cara Membuat Widget Popular Post Keren Warna Warni Pada Blogspot

Cara Membuat Widget Popular Post Keren Warna Warni Pada Blogspot

Chuwee.xyz - Popular post dikenal sebagai kumpulan artikel yang paling sering dibaca oleh pengunjung atau juga bisa diartikan sebagai widget yang menampilkan artikel terpopuler pada blog atau website. Popular post bawaan dari blogger sangat terlihat sederhana karena hanya menampilkan background putih. Tetapi kalian bisa merubahnya dengan tampilan yang lebih berwarna agar tampilannya terlihat lebih segar dimata para pengunjung. 

Pembahasan pada artikel kali ini saya akan berbagi koleksi widget popular post keren serta unik dengan model yang full color dan elegan untuk memperindah tampilan blog kalian, mulai dari popular post yang berwarna cerah atau pilihan warna keren lainnya yang bisa di terapkan pada blog milik kalian. 

Beberapa Koleksi Widget Popular Post Keren Untuk Kalian Para Blogger 

Berikut adalah beberapa koleksi widget popular post dengan berbagai macam tampilan warna, silahkan pilih mana yang paling disukai dan yang paling sesuai menurut kalian. 

Popular Post Warna Warni Style Pertama

Popular Post Warna Warni Style Pertama

/*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{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li a{color:#fff!important}
.PopularPosts ul li a:hover{color:#2c3e50!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;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;bottom:0;right:0;padding-right:0!important}
/* Pengaturan Warna */
.PopularPosts ul li:nth-child(1){background-color:#f1c40f;}
.PopularPosts ul li:nth-child(2){background-color:#f39c12;}
.PopularPosts ul li:nth-child(3){background-color:#2ecc71;}
.PopularPosts ul li:nth-child(4){background-color:#27ae60;}
.PopularPosts ul li:nth-child(5){background-color:#e67e22;}
.PopularPosts ul li:nth-child(6){background-color:#d35400;}
.PopularPosts ul li:nth-child(7){background-color:#3498db;}
.PopularPosts ul li:nth-child(8){background-color:#2980b9;}
.PopularPosts ul li:nth-child(9){background-color:#ea6153;}
.PopularPosts ul li:nth-child(10){background-color:#c0392b;}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}

Popular Post Warna Warni Style Kedua
 
Popular Post Warna Warni Style Kedua

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

Popular Post Warna Warni Style Ketiga

Popular Post Warna Warni Style Ketiga

/* 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 {color:#444 !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;}
.PopularPosts ul li:nth-child(1) {background-color:#E1F3FD;margin-right:1% !important}
.PopularPosts ul li:nth-child(2) {background-color:#EDE3F2;margin-right:1% !important}
.PopularPosts ul li:nth-child(3) {background-color:#EFF8DD;margin-right:1% !important}
.PopularPosts ul li:nth-child(4) {background-color:#FEF6E1;margin-right:1% !important}
.PopularPosts ul li:nth-child(5) {background-color:#FEE4E3;margin-right:1% !important}
.PopularPosts ul li:nth-child(6) {background-color:#E1F3FD;margin-right:1% !important}
.PopularPosts ul li:nth-child(7) {background-color:#EDE3F2;margin-right:1% !important}
.PopularPosts ul li:nth-child(8) {background-color:#EFF8DD;margin-right:1% !important}
.PopularPosts ul li:nth-child(9) {background-color:#FEF6E1;margin-right:1% !important}
.PopularPosts ul li:nth-child(10) {background-color:#FEE4E3;margin-right:1% !important}
.PopularPosts .item-thumbnail {margin:0 0 0 0;}
.PopularPosts .item-snippet {font-size:11px;}
.profile-img{display:inline;opaciry:10;margin:0 6px 3px 0;}

Cara Menerapkan Script atau Kode Widget Popular Post Warna Warni Pada Blog 

Cara untuk memasang atau menerapkannya cukup simple dan mudah, perhatikan langkah - langkah dibawah ini : 

1. Langkah pertama kalian pilih terlebih dahulu widget popular post mana yang ingin kalian pakai, lalu copy script atau kodenya diatas. 

2. Login pada akun blogger kamu lalu pilih menu Tema dan pilih Edit HTML. 

3. Lalu letakkan script atau kode widget popular post warna warni yang sudah kalian copy tadi tepat diatas kode ]]></b:skin

4. Klik save Template dan kemudian lihat hasilnya. 

Dengan cara ini kamu bisa merubah tampilan popular post default atau bawaan blogger menjadi lebih cantik dan keren dengan beberapa pilihan model diatas, pilih yang paling menarik serta sesuai dengan keinginan dan terapkan pada blog kamu. 

Demikian artikel tentang Cara Membuat Widget Popular Post Keren Warna Warni Pada Blogspot dengan berbagai pilihan yang unik dan menarik untuk mempercantik blog kamu. Sekian semoga artikel ini dapat bermanfaat.