Cara Membuat Featured Images VioMagz Menjadi Lebih Keren

Cara Membuat Featured Images VioMagz Menjadi Lebih Keren
Bagikan :
Cara Membuat Featured Images VioMagz Menjadi Lebih Keren

RIANSEO.COMFeatured Images Post ini adalah dimana tampilannya akan berada di bagian layar awal homepage blog Anda, fungsi dari fiktur Images Post ini adalah untuk lebih menarik perhatian para pengunjung untuk membaca artikel yang lebih Anda rekomendasikan dari pada artikel lainnya.

Ada banyak macam jenis Images Post yang tersedia buat blog Anda yang pakai platrom Blogspot, contohnya saja seperti Featured Images post template VioMagz sudah ada akan fiktur ini. Namun di template VioMagz hanya menampilkan 1 gambar dan 1 artikel saja.

Jika ingin yang lebih keren Anda bisa gunakan Featured Post Images Slider yang bisa menampilkan lebih dari 4 gambar sekaligus dan itu tergantung gaya sytle CSS dan juga javascript yang digunakan.


Hanya saja, saya tidak menyarankan bagi Anda menggunakan Slider Images ini jika platrom Anda Blogspot, sebab jika Anda menggunakan wigdet ini, maka Anda harus mengatur feed postingan menjadi Penuh! Dan potensi blog Anda bakal mudah di curi semua isi kontennya oleh para AGC (Auto Generate Content).


Ada beberapa alasan wigdet images slider post ini banyak yang menggunakan untuk tampilan blog.

  • Tampilan yang lebih keren dibagian homepage
  • Lebih menarik untuk di buka bagi pengunjung blog
  • Tampilan desain blog terlihat perposional

Dalam ulasan kali ini, saya tidak membagikan trik membuat Images slider post, melainkan kita hanya akan belajar meredesign ulang tampilan Featured Post Images yang ada di template VioMagz.
Jika Anda bukan pengguna template VioMagz bisa Anda lewati langkah yang akan saya bagikan ini.
Panduan ini, saya buatkan untuk memenuhi permintaan dari pembaca blog rianseo.com yang minta dibuatkan tutorial meredesign tampilan featured images post mirip seperti template VioMagz v5 yang pernah saya bagikan sebelumnya.

Untuk demonya, Sahabat bisa membuka tampilannya lewat link demo dibawah ini.


Padahal template VioMagz ini sudah di desain oleh ahlinya yaitu mas sugeng, tapi entah kenapa banyak yang suka mengubah tampilan standarnya.

Yah mungkin hanya ingin terlihat lebih lain dari pada yang lain, sebab template ini saya anggap sebagai template sejuta umat untuk blog yang berbasis blogspot. Kalau untuk tema Wordpress saya rasa adalah Newspaper dari TagDiv sebagai tema Wordpress sejuta umat.


Membuat Desain Featured Images Post Blogger Responsive


Saya katakan sekali lagi, trik ini hanya untuk pengguna template VioMagz dan trik ini berfungsi untuk semua template VioMagz versi berapapun.

Salin kode CSS dibawah ini
/* Featured Post */
.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;
}
Dan letakan dibagian atas kode </style>, atau ganti CSS Featured Post sebelumnya dengan kode diatas.

Itu hanya untuk tampilan versi Desktop, untuk membuat tampilannya menjadi responsive silahkan kamu salin lagi kode CSS dibawah ini.
.FeaturedPost .post-summary h3 {
    font-size: 20px;
    margin: 0;
}
Letakan kode diatas dibagian CSS @media only screen and (max-width:480px)

Simpan

Saat ini VioMagz sudah memasuki versi 3, dimana tampilan sedikit berbeda dari pada sebelumnya untuk bagian Featured Images Post.

Jika sahabat tertarik ingin menggubah Featured Post VioMagz menjadi versi 3, Kamu bisa baca tutorialnya di blog saya satunya.

Penutup


Demikian beberapa tutorial desain yang dapat saya sampaikan dalam ulasan kali ini, tentang Featured Post template VioMagz. Jika ada pertanyaan maupun masukan silahkan tulis di kolom komentar blog ini ya.

Subscribe to our Newsletter

Jangan lupa untuk Berlangganan update artikel terbaru via email:

Previous article
Next article

4 Responses to "Cara Membuat Featured Images VioMagz Menjadi Lebih Keren"

  1. Admin, ada tutorialnya gak supaya tampilan di hompage versi mobile di bagian aritkelnya gak ada deskripsinya... Jdi hanya thumbnail sama judul artikel saja.. Kaya di blog admin... Mohon di bantu min..

    ReplyDelete
    Replies
    1. cari kode .post-snippet ubah menjadi display: none; versi mobile media only screen 480px

      Delete
    2. post-snippet diubah jadi yang display none itu kh gan? Dan Yg media only screen 480px itu diaapin gan?

      Delete
    3. Work gan.. Tapi nampilin penulis sama tanggal postingannya gimana

      Delete

Read Comment Policy Click Here

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel