Hallo sahabat blogger Indonesia, kali ini saya berbagi cara memodifikasi bagian Featured Post Template Viomagz agar lebih keren, dari versi defaultnya. Kenapa saya membahas pada template Viomagz? Karena Template Viomagz ini, menjadi template yang sangat populer dikalangan blogger. Kamu juga dapat membaca cara membuat Fitur Dark Mode pada blog kita, agar pengunjung blog menjadi lebih nyamana.

Apa itu Featured Post? Seharusnya para blogger, sudah mengetahui tentang Featured Post ini. Sebenarnya istilah ini sudah tidak asing lagi untuk kalangan blogger, namun tidak apa-apalah saya akan membahas kembali tentang Featured Post ini.

Featured Post ini adalah sebuah Postingan yang dimunculkan pada blog kita, karena postingan terebut sering dibaca oleh banyak orang yang sedang berkunjung ke blog kita. Dan ini biasanya terletak di widget, sidebar sebelah kanan pada layar kita jika dilihat dari desktop.

Nah dimana pada postingan kita kali ini, kita akan memodifikasi bagian tersebut pada template viomagz yang kita miliki. Karena menurut pandangan saya sebagai seorang blogger, bagian Fetaured Post pada template Viomagz ini kurang menarik. Untuk itu disini kita akan membuatnya menjadi lebih menarik dan lebih keren jika dilihat dari perangkat manapun.

Untuk mengubah Featured Post yang lama pada template kita ternyata sangat mudah sekali, kalian cukup menambahkan kode css berikut pada template yang kamu gunakan.

Berikut langkah-langkah untuk mengubah tampilan Featured Post kita agar terlihat lebih keren:

  1. Silakan login terlebih dahulu ke Dasboard Blogger kamu
  2. Pilih Template >> With HTML
  3. Silakan cari bagian Featured Post, atau bisa melalui keyboard Ctrl+ F
  4. Kemudian ganti kode diantara /*fetured post*/ dan /*profile*/ dengan kode berikut ini:
.FeaturedPost .post-summary { background: #f7f7f7; position: relative; padding: 0; min-height: 200px; max-height: 350px; overflow: hidden; } .FeaturedPost .post-summary h3 { font: 500 20px Roboto, Arial, sans-serif; background: rgba(0, 0, 0, 0.37); position: absolute; bottom:0; padding:20px; z-index: 1; font-size: 25px; margin: 0; width:94%; } .FeaturedPost .post-summary h3:after { content:""; position:absolute; top:-0.25em; right:100%; bottom:-0.25em; width:0.25em; } .FeaturedPost .post-summary h3 a { color: #fff; padding:0; -webkit-box-decoration-break: clone; -o-box-decoration-break: clone; box-decoration-break: clone; } .FeaturedPost .post-summary h3 a:hover { color: #fff;text-decoration: underline; } .FeaturedPost .post-summary p { position: absolute; background: #ffffff; color: #5a5a5a; padding: 3px 8px; bottom: 15px; margin: 0 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 90%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .FeaturedPost .image { display: block; }

Setelah kamu rubah jangan lupa save. Dan lihat perubahannya sekarang di bagian Featured Post pada blog kamu. Saya yakin kamu akan lebih nyaman dengan tampilan yang sekarang saat ini, dibanding sebelum kamu rubah sama sekali.

Coba kamu lihat sekarang, tentunya tampilan pada fetured post kamu menjadi lebih oke kan. Dan mudah-mudahan bermanfaat postingan kali ini, sampai jumpa di tutorial lainnya.