Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Mengubah Posisi Thumbnail Postingan ke Kanan di VioMagz

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.
2. Pilih dan masuk ke menu tema.
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

Cara Mengubah Posisi Thumbnail Postingan ke Kanan di VioMagz

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%; }


Atau

Cara Mengubah Posisi Thumbnail Postingan ke Kanan di VioMagz

6. Simpan perubahan Tema.
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