Cara Mengubah Posisi Thumbnail Postingan ke Kanan di VioMagz
Halaman utama (homepage) pada template blogger VioMagz di versi terbarunya menggunakan tampilan thumbnail postingan yang berukuran kecil dengan posisi disebelah kiri judul dan deskripsi postingan. Tipe tampilan thumbnail postingan seperti itu tentunya sangat menarik dan terlihat tidak memenuhi halaman blog karena lebih simpel.
Namun, bagi sebagian pengguna, tampilan thumbnail postingan seperti itu tampak kurang menarik karena posisi thumbnail-nya berada disebelah kiri judul dan deskripsi postingan. Apalagi jika judul postingan yang panjang akan membuatnya jadi tidak rapi dan kurang nyaman untuk dilihat.
Maka dari itu, di artikel ini akan diulas bagaimana cara mengubah posisi thumbnail postingan manjadi di sebelah kanan pada template blogger VioMagz versi 4.7.0 Bagaimana caranya? Simak ulasan berikut ini.
Cara Mengubah Posisi Thumbnail Menjadi di Kanan pada VioMagz
1. Masuk ke dashboard blogger.
3. Tekan tombol segitiga terbalik, kemudian pilih Edit HTML.
4. Cari kode img-thumbnail-wrap , kemudian ubah left (kiri) pada float menjadi right (kanan).
Sebelum:
.img-thumbnail-wrap {
position: relative;
float: left;
width: 39%;
margin-top: 3px;
overflow: hidden; }
Sesudah:
.img-thumbnail-wrap {
position: relative;
float: right;
width: 39%;
margin-top: 3px;
overflow: hidden; }
Atau
5. Cari kode h2.posts-title yang tepat berada dibawah .info-1, kemudian ubah 41% pada margin-left menjadi 0%.
Sebelum:
.info-1,
h2.post-title,
.post-snippet {
margin-left: 41%; }
Sesudah:
.info-1,
h2.post-title,
.post-snippet {
margin-left: 0%; }
7. Setelah itu, tambahkan pula kode CSS berikut pada Custom CSS di Tata Letak agar judul tidak terlalu dekat dengan thumbnail postingan.
@media screen and (max-width: 480px) {
.img-thumbnail-wrap {
margin-left: 12px;
}
}
Penutup
Itulah tutorial terkait cara mengubah atau mengganti posisi thumbnail postingan manjadi di sebelah kanan pada template blogger VioMagz versi 4.70. Untuk kedepannya jika telah rilis template VioMagz versi terbaru lagi, mungkin posisi kode bisa berubah atau kode itu sendiri yang berubah. Semoga bermanfaat.
Ditulis oleh: Syahrul Hanafi