Cara Mengubah Tampilan Popular Post Viomagz Menjadi Lebih Style

Jagoandzgn.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Mengubah Tampilan Popular Post Viomagz Menjadi Lebih Style, Widget popular post yang menarik sangat berpengaruh pada tampilan blog, di semua blog para blogger didunia tentu memakai widget ini, bukan hanya untuk memperindah tampilan namun popular post berfungsi menampilkan artikel mana saja yang terpopoler di blog kamu.


Widget ini terinspirasi dari sebuah blog legendaris yang sudah berdiri lama, nama blog tersebut adalah IDNXMUS, nah disini saya akan memberikan sebuah tutorial bagaimana cara membuatnya yang hampir mirip dengan aslinya, namun ada sedikit perbedaan dibagian judul widget tersebut, tapi sebelum itu aktifkan terlebih dahulu widget popular postnya.

Cara Mengubah Tampilan Popular Post Viomagz Menjadi Lebih Style

1. Silahkan kamu login ke blogger.com dengan menggunakan akun Gmail kamu.
2. Masuk ke menu TEMA > klik Edit HTML
3. Lalu silahkan kamu 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 kamu yang widget popular postnya masih memiliki nomor silahkan kamu hapus kode dibawah ini.
<b:includable id='numberedpopularposts'>
<style> /* HAPUS DARI SINI */
DISINI ISI CSS NOMORNYA
</style> /* SAMPAI SINI */
</b:icludable>

4. Kalau sudah silahkan klik SIMPAN dan Selasai.

Untuk memunculkan widget tersebut kamu cukup masuk ke TATA LETAK > Widget Sidebar > Label, Kemudian kamu setting dan konfigurasi seperti gambar dibawah ini.



Bagaimana mudah bukan untuk tutorial Cara Mengubah Tampilan Popular Post Viomagz Menjadi Lebih Style untuk kamu yang ingin melihat demonya silahkan klik demo diatas, apabila kamu memiliki pertanyaan seputar blogger silahkan komen dikolom komentar dibawah artikel ini.
Seorang yang memiliki kepribadian yang menyendiri, tanpa mengenal dunia luar hanya melalui dunia online saja.
  • Facebook
  • WhatsApp
  • Instagram
  • Tampilkan Komentar
    Sembunyikan Komentar

    0 Komentar

    Posting Komentar

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel