Widget Popular Posts Judul dan Nomor

Allysa December 19, 2021 Komentar

Widget Popular Posts Judul dan Nomor

Penggunaan Widget Popular Posts merupakan widget wajib yang terdapat pada blog. Tentunya karena Ia secara otomatis menampilkan posting yang paling banyak dikunjungi.

Biasanya widget ini terpasang di sidebar blog yang mana berfungsi sebagai Internal Link dan sekaligus sebagai navigasi bagi pengunjung untuk melihat postngan terbanyak yangdibaca pada sebuah blog.

Berikut ini adalah kode Widget Popular Posts dengan menggunakan judul dan Nomor Mirip seperti yang terdapat dalam situs-situs Berita, seperti Popular News media.com dan lainnya.

Daftar posting yang tampil hanya berupa judul dan angka. Mengapa Tidak ada thumbnailnya ? karena menampilkan popular post dengan gambar thumbnail menyebabkan loading blog menjadi berat, bahkan terkadang mengurangi seo blog.

Cara Memasang Widget Popular Posts Judul dan Nomor

1. Silahkan kalian msuk pada edit html yang terdapat pada menu Template > Edit HTML dan kemudian

2. Silahkan Copy kode berikut ini dan pastekantepat diatas 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!

Widget Popular Posts Judul dan Nomor

4/ 5

By Allysa