Widget Popular Posts Judul dan Nomor Mirip Situs-Situs Berita

Widget Popular Posts Judul dan Nomor Mirip Situs-Situs Berita

POPULAR Posts atau Entry Terpopuler adalah widget wajib di blog. Ia menampilkan posting yang paling banyak dikunjungi secara otomatis.

Widget ini biasa dipasang di sidbar blog. Fungsinya sebagai Internal Link sekaligus Navigasi bagi pengunjung untuk melihat tulisan terbanyak dibaca di sebuah blog.

Berikut ini kode Widget Popular Posts Judul dan Nomor Mirip Situs-Situs Berita, seperti Popular News Detikcom dan lainnya.

Daftar posting hanya menampilan judul plus nomor (angka). Tidak disarankan menampilkan popular post dengan gambar thumbnail karena memberatkan loading, bahkan terkadang mengurangi seo blog.

LIVE DEMO Widget Popular Posts Judul dan Nomor Mirip Situs-Situs Berita ini bisa dilihat di sidebar blog ini.

Cara Memasang Widget Popular Posts Judul dan Nomor Mirip Situs-Situs Berita

1. Template > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin> atau </style>

#PopularPosts1 ul{list-style-type:none;margin:0;padding: 0}
#PopularPosts1 img{float:left;margin-right:10px;width:72px;height:75px;display: block;transition:all .3s ease-in-out}
#PopularPosts1 ul li {padding:8px 0 11px !important;margin:0; list-style: none; border-bottom: 1px solid #e9e9e9;font-size:11px;line-height: normal;}
#PopularPosts1 ul li:first-child  {  border-top:none;  }
#PopularPosts1 ul li:last-child  {  border-bottom:none;  }
#PopularPosts1 a:link, #PopularPosts1 a:visited, #PopularPosts1 a:active {font-size:13px; color: #016FBA !important;  display: block;font-weight:bold;padding:0 !important;margin:0 !important;line-height:1.4em}
#PopularPosts1 a:hover {color: #B80103 !important;  text-decoration: none;}
.PopularPosts h2{
padding-right:.4em;
padding-left:1em
}
.popular-posts ul {  padding-left: 0;
  counter-reset: trackit;
 }
.popular-posts ul li {
border-bottom: 1px solid #f0f0f0;
list-style: none outside none !important;
margin-left: 0 !important;
overflow: hidden;
padding: 10px 0 !important;
transition: all 0.25s linear 0s;
counter-increment: trackit;
  }
.PopularPosts ul li:before{
content: counters(trackit, &quot;.&quot;);
    padding: 0 .1em 0 10px;
    font-size: 20px;
    font-weight: bold;
    color: #F66;
    float: left;
    margin-right: 10px;
}

.PopularPosts li:first-child{
border-top:1px solid #f0f0f0
}

.PopularPosts li:nth-child(odd)
{background:#f5f5f5
}
.PopularPosts .item-thumbnail, .PopularPosts .item-snippet {
display: none!important}/* Hides Thumbnail and Snippet */
.PopularPosts a, .PopularPosts a:hover{
color:#959595;
font-size:.9rem
}
#PopularPosts1 li{
padding-right: 1em !important;
padding-left: 1em !important;
}
.widget.PopularPosts{padding:1.2em 0em !important}

3. Save Template! Lihat hasilnya.

Jika NOMOR atau ANGKA-nya tidak muncul, coba ubah kode warna merah di atas, yaitu kode (trackit, &quot;.&quot;) menjadi (trackit, '.')

Demkian cara membuat Widget Popular Posts Judul dan Nomor Mirip Situs-Situs Berita.*

Share This