Cara Mengubah Widget Popular Posts Keren dan Simple ! Dari bungfranki

Nah kayaknya ini tutorial pertama di blog ini bagi kalian yang penasaran dengan Widget Popular Postsnya yang di pake disini kali ini saya akan membagikan Tutorial Style Css Widget Popular Posts Ala bungfrangki yang simple (hanya menggunakan kode css saja)


Kenapa saya bilang ala bungfrangki karena memang template ini buatan beliau nama template yang di gunakan blog ini adalah Viralisme[Free Version] 

Baik kita ke cara pemasangannya

Cara mengubah Style CSS Widget Popular Posts

Hati-hati sebelum edit template untuk backup terlebih dahulu agar bisa mengantisipasi hal-hal yang tidak diinginkan

1.Buka Blogger
2.Buka tab tata letak > Pasang widget popular post
3.Klik tab Tema > Edit HTML > Cari kode 

</style>

4.Lalu Masukan Kode ini tepat di atasnya

.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 10px;padding:0;position:relative;line-height:1.4em!important;list-style:none;text-align:left!important;font-size:15px !important;}
.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:72px;margin:0 20px 15px 0;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} 

5.Setelah itu Klik simpan Template !
6.Enjoy it

Sekian artikel sekarang jika ada request tentang Template dan tutorial blogging kalian boleh request di bawah

Semoga bermanfaat dengan artikel Cara mengubah tampilan widget popular posts dengan kode CSS yang simple dan Ringan

Author : Hiruko Kagetane

Share this