Cara Membuat Widget Popular Post Seperti Viomagz

Sobat blogger yang ketinggalan update postingan di blog ini, saya akanmembagikan atau mensharing kepada sobat blogger Cara membuat widget popular posts mirip template VioMagz Amp jika sobat ingin atau berminat menggunakannya bisa langsung lihat cara dibawah ini.

Untuk cara membuatnyapun tidak terlalu sulit, hanya saja sobat harus mengganti CSS popular posts sobat yang lama dengan CSS popular posts dibawah ini, cara menerapkannya sobat buka Blogger.com > Tema > Edit HTML > 
letakan code css ini tepat sebelum </style> atau bisa juga sebelum </b:skin>

/* Popular Posts */
.PopularPosts .widget-content ul, .PopularPosts .widget-content ul li {
 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: #444;
}
.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, .PopularPosts ul li > a:before {
 font-size: 30px;
 font-weight: 500;
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 background: linear-gradient(#49ACE1, #fff);
 width: 26px;
 padding-top: 10px;
 text-align: center;
 content: counter(num);
 color: #fff;
}
.PopularPosts ul li > a {
 display: block;
 padding-left: 32px;
 min-height: 45px;
}
.PopularPosts .item-title, .PopularPosts .item-thumbnail, .PopularPosts .item-snippet {
 margin-left: 32px;
}
.PopularPosts .item-title {
    line-height: 1.6;
 margin-right: 8px;
 min-height: 40px;
}
.PopularPosts .item-thumbnail {
 float: left;
 margin-right: 8px;
}
.PopularPosts .item-snippet {
    line-height: 1.6em;
 font-size: 14px;
 margin-top: 8px;
}

Sebelum sobat meletakan code diatas, alangkah baiknya sobat hapus terlebih dahulu yang sudah saya jelaskan di atas tadi, yaitu silahkan sobat hapus css code popular posts lama dan ganti dengan code css diatas, Hal ini agar tampilannya menjadi rapih.

Itulah cara singkat dari saya tentang Cara membuat Popular Posts di blogger keren semoga bisa bermanfaat, terimakasih

Share this post