Cara Memasang Popular Post Ala Vio Magz By Mas Sugeng

Dua bulan terakhir jagad blogger Indonesia dihebohkan dengan kehadiran template baru besutan dari mastah template, yaitu Mas Sugeng (bahasamu nak lebay banget :D). Mas Sugeng merilis template terbarunya yang disebutnya sebagai pengganti template sensasional Evo Magz, template tersebut adalah Vio Magz. Sejak peluncurannya hingga kini sudah mengalami beberapa kali pembaruan, hingga yang terakhir saya ketakui adalah versi 2.4. Templatenya cukup keren, simple, responsif, dan fast load tentunya.
Berkaitan dengan kesensasionalan template ini, saya cukup tercuri perhatiannya oleh tampilan Popular Post dari template Vio Magz ini. Tampilannya menurutku unik dan gimana gitu, uniklah pokoknya dengan gradasi warna vertikal di samping thumbnail dalam baris-baris popular post. Karena ketertarikan tersebut akhirnya saya menculik kode css Vio Magz dan saya pasang di laman saya yang sederhana ini (dulu masih memakai Masign Clean) tanpa izin Mas Sugeng dulu hehehe, tapi mas Sugeng orangnya baik pasti boleh, tempelate saja sering dibagikan gratis.

Pemasangan Popular Post Vio Magz
Baiklah, bagi sobat blogger yang tertarik juga ingin tampilan popular post bisa seperti Vio Magz tapi tidak tahu cara menculik script dan cara memasangnya, berikut adalah beberapa langkah cara memasang popular post ala Vio Magz.

1. Sign in dan masuk dashboard blogger.
2. Buka menu Theme dan pilih Edit HTML.
3. Jika template sobat sudah memiliki script popular post, silahkan hapus terlebih dahulu.

CSS Popular Post Terdahulu

4. Jika sudah dihapus, copy dan paste kode berikut menggantikan posisi script popular post yang tadi dihapus, atau bagi yang tidak memiliki popular post sebelumnya bisa paste di atas kode ]]></b:skin>

   /* Popular Posts */
   .PopularPosts .widget-content ul,.PopularPosts .widget-content ul li,.PopularPosts .widget-content ul li img,.PopularPosts .widget-content ul li a,.PopularPosts .widget-content ul li a img{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 0 10px;counter-increment:num;position:relative}
   .PopularPosts ul li:last-child{margin-bottom:0}
   .PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:500;text-decoration:none;color:#444}
   .PopularPosts ul li .item-title a:hover,.PopularPosts ul li a:hover{color:#49ACE1}
   .PopularPosts ul li .item-thumbnail-only:before,.PopularPosts ul li .item-content:before{content:counter(num)!important;font-size:30px;font-weight:500;display:block;position:absolute;top:0;left:0;bottom:0;background:linear-gradient(#49ACE1,#fff);color:#fff!important;width:30px;padding-top:10px;text-align:center}
   .PopularPosts .item-title,.PopularPosts .item-thumbnail,.PopularPosts .item-snippet{margin-left:34px}
   .PopularPosts .item-title{line-height:1.6;margin-right:8px}
   .PopularPosts .item-thumbnail{float:left;margin-right:8px}
   .PopularPosts .item-snippet{line-height:1.6em;font-size:14px;margin-top:8px}
   

5. Setelah itu, klik Save untuk menyimpan perubahan pada template sobat.
6. Apa bila sebelumnya sudah memasang widget popular post maka perubahan tampilan akan langsung terliat.
7. Untuk yang sebelumnya belum memasang widget popular post bisa membuka Layout, dan buat widget baru dengan klik Add a Gadget, scroll ke bawah dan pilih Popular Post.
8. Atur sesuai selera, mulai dari Judul, batas hari post yang paling sering dilihat, diisertai thumbnail dana tau snnipet, dan terakhir jumlah list post. Bila sudah klik Save untuk menyimpan.

NB*
Untuk merubah aksen warna silahkan rubah kode berikut sesuai keinginan
#49ACE1
#fff

Demikan tulisan saya mengenai Cara Memasang Popular Post Ala Vio Magz By Mas Sugeng, kurang lebihnya mohon maaf.

Credit by Mas Sugeng – Sugeng.id