Cara Mengubah Tampilan Widget Popular Post Di Template Viomagz

Cara Mengubah Tampilan Widget Popular Post Di Template Viomagz


Pelajar Design - Pada kesempatan ini saya akan membagikan tutorial tentang Cara Mengubah Tampilan Widget Popular Post Di Template Viomagz. Tampilan Widget Popular Post yang keren akan menjadikan tampilan website atau blog kalian manjadi menarik dan enak dilihat.

Widget ini berfungsi untuk menampilkan artikel populer atau yang paling banyak dikunjungi di blog kalian. Sebenarnya sudah ada Widget Popular Post default yang sudah disediakan oleh blogger, namun tampillannya kuran menarik. Ok, silahkan simak tutorialnya dibawah.

Cara Mengubah Tampilan Widget Popular Post Di Template Viomagz

1. Silahkan login ke blogger.com dengan menggunakan akun Gmail kalian.
2. Masuk ke menu TEMA > Edit HTML.
3. Kemudian kalian cari kode ]]></b:skin> dan pastekan kode dibawah ini tepat diatas kode tersebut.

/* Popular Post */
.PopularPosts ul li:hover{background:#3333330f}
.popular-posts ul li a{color:teal}
.popular-posts ul li a:hover{color:#555}
.PopularPosts h2{text-indent:20px;margin-bottom:-6px;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom:none;width:100%;padding-bottom:15px;padding-top:15px;font:400 14px Poppins,-apple-system,BlinkMacSystemFont,'Segoe UI',Oxygen-Sans,'Helvetica Neue',Arial,sans-serif;color:#fff;text-align:left;background:#0c54c1;background-image:linear-gradient(110deg,transparent 75%,rgba(255,255,255,0.1) 75%,rgba(255,255,255,0.1) 81.5%,rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.2))}
.PopularPosts h2 span{margin-left:20px}.PopularPosts .widget-content ul,.PopularPosts .widget-content ul li{margin:0;padding: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;counter-increment:num;position:relative;background:#0c54c1;margin:0 0 10px;padding:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:5px}
.PopularPosts ul li:last-child{margin-bottom:0}
.PopularPosts ul li .item-thumbnail-only::after,.PopularPosts ul li .item-content::after,.PopularPosts ul li > a::after{background:#efefef}
.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;margin-top:8px;opacity:.925}
.PopularPosts ul li > a{font-weight:700;font-size:14px}
.PopularPosts .item-title,.PopularPosts .item-thumbnail,.PopularPosts .item-snippet{margin-left:15px;margin-bottom:9px;margin-top:5px}
.PopularPosts .widget-content ul li a{color:#fff;white-space:nowrap;overflow:hidden;font-size:91%}
.PopularPosts .widget-content ul li a:hover{text-decoration:underline}
.PopularPosts .widget-content ul li:hover{background:#0c54c1;opacity:1;transform:scale(1.02);transition:all .3s ease}
.PopularPosts:hover li{opacity:.7;transform:scale(0.98);transition:all .3s ease}
.PopularPosts .widget-content ul li a{color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:91%}
.popular-posts {padding: 13px;background: #0c54c15e;border-bottom-right-radius: 8px;border-bottom-left-radius: 8px;}

Bagi kalian yang widget Popular Post nya masih memiliki nomor, silahkan hapus kode dibawah ini.

<b:includable id='numberedpopularposts'>
<style> /* HAPUS DARI SINI */
DISINI ISI CSS NOMORNYA
</style> /* SAMPAI SINI */
</b:icludable>

4. Kemudian klik Simpan.

Bagaimana tutorial tentang Cara Mengubah Tampilan Widget Popular Post Di Template Viomagz. Silahkan comment dibawah jika kalian punya pertanyaan seputar blogger, dan comment juga dibawah jika tutorial kali ini bermanfaat.

You may like these posts