VEzcwOIzJo2ocMRnvNfZmXylSxSqdBdXDBtRZkxw
Bookmark

Cara Membuat Widget Popular Post Keren Dengan Nomor Di blogger

Serieswans.com - Hallo sahabat blogger semua, pada kesempatan kali ini saya akan membagikan tutorial tentang bagaimana cara membuat Widget Popular Post dengan nomor di blogger dengan mudah. widget popular post merupakan widget yang menampilkan rekomendasi artikel terbaik dan paling sering di kunjungi. mungkin anda sudah bosan melihat tampilan popular post default bawaan blogger, yang di nilai kurang menarik. jadi lebih baik ganti.
Cara Membuat Widget  Popular Post Keren Dengan Nomor Di blogger
Widget Popular Post Versi Viomagz

Sebenarnya juga anda bisa mengedit warna background atau tulisannya agar tampil lebih keren dan menarik untuk pengunjung blog anda. oleh sebab itu saya akan buat tutorialnya di bawah ini.

Cara Membuat Widget Popular Post dengan Nomor di Blogger 

  • Pertama, buka Dashboard Blogger, pilih Tema => Edit HTML
  • Silahkan gunakan tombol CTRL + F untuk mencari kode .PopularPost  
  • Lalu anda hapus kode css popular post bawaan dan ganti dengan kode berikut 

/* Popular Posts */
.PopularPosts .widget-content ul, .PopularPosts .widget-content ul li, .PopularPosts .widget-content ul li img, .PopularPosts .widget-content ul li a, .PopularPosts .widget-content ul li a img {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
outline:none;
}
.PopularPosts .widget-content ul {
margin: 0;
list-style:none;
counter-reset:num;
}
.PopularPosts .widget-content ul li img {
display: block;
width: 70px;
height: 70px;
float: left;
}
.PopularPosts .widget-content ul li {
margin: 0 0 10px;
counter-increment: num;
position: relative;
}
.PopularPosts ul li:last-child {
margin-bottom: 0px;
}
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight: 500;
text-decoration: none;
color: #444444;
}
.PopularPosts ul li .item-title a:hover, .PopularPosts ul li a:hover {
color: #49ACE1;
}
.PopularPosts ul li .item-thumbnail-only:before, .PopularPosts ul li .item-content:before {
content: counter(num) !important;
font-size: 30px;
font-weight: 500;
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
background: linear-gradient(#49ACE1, #fff);
color: #fff !important;
width: 26px;
padding-top: 10px;
text-align: center;
}
.PopularPosts .item-title, .PopularPosts .item-thumbnail, .PopularPosts .item-snippet {
margin-left: 30px;
}
.PopularPosts .item-title {
line-height: 1.6;
margin-right: 8px;
}
.PopularPosts .item-thumbnail {
float: left;
margin-right: 8px;
}
.PopularPosts .item-snippet {
line-height: 1.6em;
font-size: 14px;
margin-top: 8px;
}


  • Apabila anda memang belum pernah memasangnya, silahkan cari kode ]]></b:skin>
  • Dan letakan kode tersebut di atasnya
  • Setelah itu simpan tema
  • Pergi ke Tata Letak => Sidebar => Tambahkan Widget dan cari Popular Post
  • Setelah itu simpan setelan dan cek hasilnya

Jika anda kurang suka dengan tampilan widget popular post di atas, di bawah ini juga saya sudah sediakan 3 versi wdiget popular post yang keren dan berwana.

Widget Popular Post Versi Kang Mousir

Cara Membuat Widget  Popular Post Keren Dengan Nomor Di blogger
Widget Popular Post Versi Kang Mousir

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


Widget Popular Post Versi EvoMagz Mas Sugeng

Cara Membuat Widget  Popular Post Keren Dengan Nomor Di blogger
Widget Popular Post Versi EvoMagz Mas Sugeng

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

Widget Popular Post Versi Dengan Nomor Keren

Cara Membuat Widget  Popular Post Keren Dengan Nomor Di blogger
Widget Popular Post Versi Dengan Nomor Keren

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


Silahkan anda pilih untuk versi widget popular postnya, cari yang anda suka dan yang menurut anda keren. 

Nah, mungkin itu saja pembahasan kali ini mengenai Cara Membuat Widget  Popular Post Keren Dengan Nomor Di blogger. Semoga bermanfaat.

Referensi : https://penaindigo.com/cara-membuat-popular-post-keren/ dan viomagz.com

Posting Komentar

Posting Komentar