Cara merubah tampilan featured post

Halo sahabat FARONESIA, pastinya kamu sudah tahu dong apa itu featured post? Kalau kamu belum tahu admin akan menjelaskan sedikit pengertian dari featured post, featured post adalah suatu artikel yang sengaja ditonjolkan atau sengaja diperlihatkan dan biasanya ditujukan untuk salah satu artikel yang menurut si pemilik blog sangat penting.

Sebelum melanjutkan, apakah para pembaca FARONESIA menggunakan template viom*gz? Apakah kamu sudah pernah mencoba featured post versi viom*gz? Bagi admin template ini sudah sangat bagus bahkan admin sendiri masih memakai template ini, tetapiii, dari template ini saya masih merasa kurang srek (puas) pada tampilan featured post.

Agar lebih jelas melihat perbedaannya gambar dibawah ini:

Before

Sebelum dimodifikasi

After

Sesudah dimodifikasi

Dari gambar diatas featured post dari template viom*gz yang telah dimodifikasi menjadi lebih rapi dan lebih elegan serta nyaman dipandang.

Langsung saja masuk ke tahap tutorial cara mengubahnya agar lebih bagus lagi:
1. Masuk dashboard blog
2. Klik tema>edit HTML
3. Cari bagian featured post, agar mempermudah pencarian silahkan tekan ctrl+f kemudian cari featured post.
4. Kemudian ganti kode yang berada diantara /*featured post */ dan /*profile */ dengan kode dibawah 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; }

5. Lalu simpan tema, SELESAI.

Setelah itu silahkan lihat perubahannya dengan cara klik lihat blog. Semoga tutorial Cara merubah tampilan featured post memberikan manfaat untuk para blogger lainnya dan para pembaca FARONESIA, silahkan share dan komen.

Share this post