Widget Popular Posts Judul dan Nomor Mirip Situs-Situs Berita

February 26, 2016
Popular Posts Judul dan Nomor
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.*

Thanks for reading Widget Popular Posts Judul dan Nomor Mirip Situs-Situs Berita

Related Posts

Next Article
« Prev Post
Previous Article
Next Post »
Your Comments

2 komentar

Tulis komentar
January 31, 2017 delete

saran berikan demo view nya bro

Reply
avatar
February 05, 2017 delete

Silakan lihat di sidebar, sudah dipasang di blog ini.

Reply
avatar

No SPAM, Please...!