Cara Merubah Thumbnail Viomagz Mirip Seperti Blog Mastimon

Cara merubah thumbnail viomagz mirip seperti blog mastimon untuk versi mobile dengan posisi gambar berada disebelah kanan dan berukuran sedang, tidak terlalu besar atau terlalu kecil.

Untuk sobat blogger yang menggunakan template viomagz versi terbaru pastinya sudah tau lah ya bagaimana posisi thumbnail blog kita jika dilihat pada beranda atau homepage.

Ya benar banget, gambar atau thumbnail akan berada sejajar dengan snippet dan judul postingan kita sehingga gambar terlihat memenuhi layar apalagi jika diakses melalui perangkat mobile seperti smartphone.

Tetapi, kok saya lihat blog mastimon berbeda tampilan thumbnailnya dengan blog milik saya ya, padahal sama-sama menggunakan template viomagz dari mas sugeng.

Penyebab Blog Mastimon Memiliki Thumbnail Disebelah Kanan

Eits tunggu dulu sob, template yang digunakan oleh mastimon merupakan template viomagz versi lama yaitu versi 2.4 yang rilis sekitar Mei 2018.

Nah mungkin untuk versi saat itu tampilan thumbnail versi mobilenya akan seperti punya nya mastimon.

Tentu hal ini berbeda jika sobat menggunakan template viomagz terbaru atau setidaknya versi 2.7 keatas.

Maka tampilan yang didapat akan seperti yang saya jelaskan diatas tadi yaitu gambar akan memenuhi layar dan sejajar dengan judul dan snippet postingan.

Pertanyaannya, apakah bisa template viomagz 2.7 keatas atau versi terbaru dibuat mirip seperti thumbnail milik blog mastimon.com?Cara Merubah Thumbnail Viomagz Mirip Seperti Blog Mastimon

Tentu jawabannya sangat bisa sob, coba deh lihat gambar diatas. Hal yang perlu kita lakukan hanya perlu merubah sedikit kode css nya saja, dan ini pun sangat mudah banget kok sob tidak sampek 5 menit.

Nah biar enggak bingung berikut saya berikan tutorial cara edit kode css nya. Baca juga: Mengatasi Thing Bukan Jenis Target Valid Yang Dikenali Untuk Properti ItemReviewed

Hal pertama yang harus sobat pastikan sebelum mempraktekkan cara berikut ini yaitu, blog atau situs sobat harus sudah menggunakan template viomagz versi berapapun, mau 2.7, 2.8, 2.9, 3.0, 3.1, 3.2, terserah semuanya bisa.

Setelah itu kita akan masuk ke bagian coding nya, untuk blogger pemula jangan langsung down ya denger kata-kata "coding", enggak sulit kok cuma copas and save, gitu doang kok, enggak sulit kan..

Cara Merubah Thumbnail Template Viomagz Mirip Seperti Blog Mastimon.com

  • Langkah pertama pergi ke menu Tema/Theme lalu klik Edit HTML.
  • Setelah editor HTLM terbuka silakan aktifkan kursor pada halaman editor dengan cara klik sembarang atau dimana saja, contoh: klik disamping tulisan ini
    <?xml version="1.0" encoding="UTF-8" ?>
  • Jika sudah baru tekan CTL + F di keyboard untuk membuka jendela pencarian.
  • Lalu ketikkan
    .img-thumbnail
    kemudian Enter.
  • Jangan bingung ya jika terdapat banyak kata yang disorot berwarna kuning, tugas sobat hanya mencari kata .img-thumbnail yang dibawahnya ada kode seperti ini:
    .img-thumbnail {
    width: 100%;
    height: 160px;
    margin: 0px 0px 15px 0px;
    overflow: hidden;
    }
  • Lalu ganti kode diatas dengan kode berikut:
    .img-thumbnail {
    float: right;
    width: 100px;
    height: auto;
    margin: 3px 0px 0px 10px;
    }
  • Kemudian cari lagi kode berikut
    .img-thumbnail img
    Nah untuk kode diatas sobat tidak usah bingung mencarinya karena kode tersebut terletak tepat dibawah kode yang diatasnya tadi, tampilan kodenya akan seperti ini.
    .img-thumbnail img {
    width: 100%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    height: auto;
    display: inline-block;
    }
  • Setelah itu ganti kode diatas dengan kode berikut:
    .img-thumbnail img {
    width: 100px;
    height: 67px;
    }
  • Maka tampilan kodenya setelah semua diganti akan seperti ini.
    .img-thumbnail {
    float: right;
    width: 100px;
    height: auto;
    margin: 3px 0px 0px 10px;
    }
    .img-thumbnail img {
    width: 100px;
    height: 67px;
    }

Jika sudah silakan klik tombol Simpan Tema/Save Teheme lalu coba buka blog sobat menggunakan hp atau smartphone, gimana sekarang? Apakah sudah berubah seperti punya nya mastimon?

Nah mudah banget kan ternyata caranya. Oiya, jangan lupa untuk share postingan ini ya.. supaya makin banyak blogger-blogger lain yang mengetahui cara tersebut, terimakasih.

Iklan Tengah Artikel 2

Iklan Bawah Artikel