Nofantz Nofantz 5/16/2019

Widget Popular Post berwarna pada Blogspot

Cara membuat Widget Popular Post berwarna pada Blogspot


Setelah kemarin membagikan tutorial tentang Cara memasang Widget Recent Post pada Blog, kali ini saya akan membagikan tutorial cara membuat Widget Popular Posts berwarna pada Platform Blogspot.

Widget Popular Posts merupakan widget yang berfungsi untuk menampilkan Artikel-artikel pada blog yang paling banyak di kunjungi. Dengan adanya Widget Popular Posts, kita akan tahu minat pengunjung terhadap artikel-artikel yang kita publish.

Macam-macam model Widget Popular Posts

Biasanya Widget Popular Posts ini memiliki latar belakang warna putih saja, tetapi kita bisa merubahnya menjadi berwarna agar tampilan lebih menarik.
Berikut contoh-contoh Widget Popular Posts

#1.Popular Posts Model 1


/*Popular Post Model 1*/
.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}

#2. Popular Posts Model 2 (evomagz)


/* Popular Post Mas Sugeng*/
.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}

#3. Popular Posts Gradasi Hitam Putih


/*Popular Post Hitam Putih*/
.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}
.PopularPosts ul li:nth-child(1){background-color:#111;}.PopularPosts ul li:nth-child(2){background-color:#222;}.PopularPosts ul li:nth-child(3){background-color:#333;}.PopularPosts ul li:nth-child(4){background-color:#444;}.PopularPosts ul li:nth-child(5){background-color:#555;}
.PopularPosts ul li:nth-child(6){background-color:#666;}.PopularPosts ul li:nth-child(7){background-color:#777;}.PopularPosts ul li:nth-child(8){background-color:#888;}.PopularPosts ul li:nth-child(9){background-color:#999;}.PopularPosts ul li:nth-child(10){background-color:#aaa;}
.PopularPosts .item-thumbnail{margin:0 0 0 0}.PopularPosts .item-snippet{font-size:11px}

#4. Popular Posts Putih Bernomor


/* Popular Post Putih Bernomor*/
.popular-posts ul {padding-left: 0px;counter-reset: popcount;}
.popular-posts ul li:before {list-style-type: none;margin-right: 15px;padding: 0.3em 0.6em;counter-increment: popcount;content: counter(popcount);font-size: 16px;background: #292D30;color: #ffffff;position: relative;font-weight: bold;font-family: georgia;float: left;border: 2px solid #dddddd;box-shadow: 1px 2px 9px #666666; }
.popular-posts ul li {border-bottom: 1px dashed #dddddd;}
.popular-posts ul li:hover {border-bottom: 1px dashed #696969;}
.popular-posts ul li a {text-decoration:none; color:#5A5F63;}
.popular-posts ul li a:hover {text-decoration:none;}

Langkah-langkah membuat Widget Popular Posts berwarna

Untuk membuat Widget Popular Posts berwarna ini, kita perlu menyimpan kode-kode CSS di atas ke Template yang kita pakai di blog.
  1. Login ke Dashboard Blogger kita.
  2. Masuk kemenu Tema - Edit HTML.
  3. Cari kode ]]></b:skin> pada template blog.
  4. Copy salah satu Kode CSS diatas sesuai selera, dan Paste kan tepat di atas kode ]]></b:skin>. Atau bila pada template sudah terpasang kode CSS untuk Popular Posts, silahkan hapus dan ganti dengan Kode CSS di atas.
  5. Jangan lupa Simpan Tema.
Sekarang lihat hasilnya, bila belum sukes, mungkin ada yang salah dalam penempatan kode nya.
Bila Widget Popular Posts belum terpasang pada blog, buatlah Widget Popular Posts terlebih dahulu. Caranya:
  1. Login ke Dashboard Blogger kita.
  2. Masuk ke menu Tata Letak.
  3. Pilih Tambahkan Gadget pada lokasi yang di inginkan.
  4. Pilih Postingan Populer, kemudian Simpan.

0 Comments