Membuat Popularpost Seperti JalanTikus

Cara membuat popular post seperti Jalantikus.com - pada kesempatan kali ini saya akan berbagi tutorial cara untuk membuat populer post di sidebar blog mirip dengan website ternama yaitu jalan  tikus.
oke langsung aja

Ikuti tutorialnya dibawah ini!

1. silahkan masuk ke HTML editor di blog sobat masing-masing.
2. lalu letakan kode CSS dibawah ini, diatas kode </head>

<style type='text/css'>
/* Popular Post */
.PopularPosts ul{list-style:none;margin:0 auto;padding:0;}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img {margin:0;padding:0;list-style:none;border:none;background:none;outline:none;}
.PopularPosts ul li {margin:0 0 5px;padding:0;position:relative;line-height:1.4em!important;list-style:none;text-align:left!important;font-size:15px !important;box-shadow: 0 3px 5px 0 rgba(0,0,0,0.17);border-radius: 4px;border: 1px solid #eee;}
.PopularPosts ul li a:hover {color:#f80538!important}
.PopularPosts li a{color:#000 !important;font-weight:500 !important;list-style:none}
.PopularPosts .item-thumbnail {display: flex;align-items: center;justify-content: center;width:72px;height:66px;margin: 6px 20px 7px 3px;overflow:hidden;float:left;border-radius:4px;}
.PopularPosts ul li img {width:auto;height:72px;transition:all .3s ease-in-out;border-radius:4px;overflow:hidden;display:block}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title {padding:0 0 5px}
.PopularPosts .widget-content ul li:before{color: #fff;counter-increment: count;content: counter(count);position: absolute;left:57px;text-align: center;top:20px;z-index: 51;transition: all .4s;height:25px;min-width:25px;font-size: 14px;line-height:25px;background:#f80538;font-weight:600;border-radius:99em;border:2px solid #fff;text-align: center;padding:0;overflow:hidden;}
.PopularPosts ul{counter-reset:count;}
@media screen and (max-width:414px){
.PopularPosts ul li {font-size:15px!important}

}
</style>

3. jika sudah ada kode CSS popular post di template sobat, tinggal replace saja dengan yang diatas.
4. save template!

nah, sekarang lihat hasilnya, popular post ini mirip dengan jalan tikus.

Demikian tutorial Cara Membuat Popularpost Seperti JalanTikus, semoga bermanfaat.

Share Share Tweet Share Share Share

KLIK

DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi Anda membantu Admin untuk lebih giat lagi dalam membagikan template blog yang berkualitas. Terima kasih.