Skip to main content
JEJAK UNIK

follow us

Modifikasi Widget Popular Post Pada Template VioMagz

Modifikasi Widget Popular Post Pada Template VioMagz - seperti kita ketahui template VioMagz merupakan salah satu template blog yang banyak dipergunakan oleh para blogger. Baik pemula maupun blogger tingkat lanjut.

Saya tidak heran jika template ini sangat laris manis di pasaran sebab memang tampilannya menurut saya sangat simple dan bagus.

Baca juga: VioMagz Template Sejuta Umat Blogger, Yang Sukses di Pasaran

Namun saya melihat tampilan standar bawaan template viomagz widget popular postnya menurut saya kurang bagus, untuk itu saya mencoba mengganti tampilan atau modelnya biar kelihatan lebih modern saja.

Buat kalian yang ingin mencoba mengganti tampilan popular post widget dari template viomagz bisa ikuti langkahnya di bawah ini.


Modifikasi Widget Popular Post Pada Template VioMagz
(Widget popular Post Yang Akan Kita Buat)

Masuk dalam editor template blog Anda lalu hapus semua kode CSS Popular Post yang sebelumnya sudah terpasang dengan kode CSS di bawah ini.

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: #444444; } .PopularPosts ul li .item-title a:hover, .PopularPosts ul li a:hover { color: #0000ff; } .PopularPosts ul li .item-thumbnail-only:before, .PopularPosts ul li .item-content:before, .PopularPosts ul li > a:before { content: counter(num) !important; font-size: 30px; font-weight: 500; display: block; position: absolute; top: 0; left: 0; bottom: 0; background: linear-gradient(#dc36a6, #fff); color: #fff !important; width: 26px; padding-top: 10px; text-align: center; } .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; }

Oia widget ini bukan hanya untuk template viomagz namun kalian bisa terapkan disemua template blog. Hanya saja untuk template lain ditakutkan tidak pas dan kalian harus sesuaikan lagi CSS nya.

Baca juga: Template Kompi Flexible dan VioMagz Siapa Yang Lebih Baik?

Save template dan lihat hasilnya! Selamat mecoba Modifikasi Widget Popular Post Pada Template VioMagz. Semoga informasi bermanfaat.

You Might Also Like:

Jika tertarik dengan artikel yang anda baca saat ini, berikan tanggapan melalui kolom komentar di bawah ini. Berkomentarlah yang cerdas, karena pintar saja tidak cukup.
Buka Komentar