Cara Setting Gambar Thumbnail Viomagz 3.2 Yang Tampil Kecil Di Versi Mobile

Bagi pengguna template viomagz versi 3.2.00 yang paling baru banyak dibahas dikalangan group blogger di facebook, WA, Telegram dan media sosial lainnya. Banyak blogger menobatkan viomagz 3.2.00 merupakan template blogger terbaik tahun 2019.

Banyak blogger mulai berbondong - bondong ingin mendapatkan template terbaik dari karya mas sugeng ini. Baik mendapatkan secara resmi membeli dari mas sugeng sendiri maupun mencari versi  ilegal yang dibagikan oleh blogger. Ternyata dibalik ketenarannya viomagz versi terbaru membuat magnet tersendiri di dunia blogger.

Viomagz versi 3.1.00 ini dari segi desain masih sama dengan versi awal - awal cuma ada perubahan di beberapa hal sama peningkatan score dan SEO. Kebetulan yang versi 3.1.00 ini saya sangat tertarik dan ingin memilikinya secara resmi maka saya membelinya dari mas sugeng dengan harga Rp. 195.000,-

Baca Juga :  Cara Menambahkan Centang Didepan Judul Artikel Blog

Menurut saya jika anda ingin serius membangun blog dan ada dana, lebih baik gunakan template viomagz versi resminya. Kenapa harus versi resmi sedangkan gratisan banyak bertebaran? pertanyaan itu yang sering saya dengar bagi blogger pemula.

Banyak sekali keuntungan jika anda menggunakan template viomagz secara resmi beli di mas sugeng antara lain :

• Mendapatkan support langsung dari Mas Sugeng selaku pembuat jika mengalami masalah.
• Mendapatkan update terbaru, jadi template yang anda gunakan akan selalu update mengikuti perkembangan teknologi.
• Tentunya dengan membeli secara resmi anda akan merasa nyaman beda kalau mendapatkannya secara ilegal.
• Dapat mensupport mas sugeng untuk mengembangkan template viomagz yang lebih baik lagi.

Dari pengalaman yang pertama kali menggunakan template viomagz versi terbaru 2019, saya merasa senang karena settingannya sangat mudah tanpa perlu banyak edit html terutama pemasangan iklan. Slot iklan sudah disediakan di menu tata letak dan disamping itu dapat tutorial panduan secara jelas.

Disamping itu cara mengganti warnanya juga bisa disetting dari menu template tanpa harus edit htmlnya. Tetunya cara tersebut sangat membantu bagi blogger yang tidak paham sama coding dan edit html.

Sambil berjalannya waktu ada sedikit yang kurang puas terhadap tampilannya dan akhirnya saya momidifikasi secara ringan saja di bagian CSS nya. Dan saya mengganti fitur share media sosial dengan fitur share media sosial dengan counter.

Baca Juga : Cara Menghilangkan Duplikat Konten ?m=1 Di webmaster

Template viomagz versi 3.1.00 ternyata jika dibuka menggunakan mobile hp ada yang kurang Pas yaitu dibagian gambar. Tampilan gambar thumbnailnya terpotong dibagian atas dan bawah, hal itu disebabkan oleh aturan CSS yang kurang tepat menurut saya.

Bagi anda yang merasa gambar gepeng sama dengan yang saya alami silahkan ikuti cara dibawah ini :

• Anda perlu sedikit edit di CSS nya lewat menu EDIT HTML.
• Cari kode CSS berikut   

.img-thumbnail {
  width: calc(100% + 30px);
  margin: 0px 0px 15px -15px;
  height: 160px;
  position: relative;
  overflow: hidden;
 }

• Pada CSS Height : 160px; silahkan ganti angkanya menjadi height : 250px;
• Dan kode CSSnya menjadi 

  .img-thumbnail {
    width: calc(100% + 30px);
    margin: 0px 0px 15px -15px;
    height: 250px;
    position: relative;
    overflow: hidden;
   }

• Langkah terakhir Klik SIMPAN

Baca Juga : Ternyata Sangat Mudah Mengetahui Ranking Artikel Di Pencarian Google

A. Atau bagi anda yang menginginkan tampilan di hp gambarnya menjadi kecil bisa merubah CSS dibawah ini :

Kode CSS Gambar Menjadi Kecil di Viomagz Versi 3.1.00 sebelum diubah.

.img-thumbnail {
    width: calc(100% + 30px);
    margin: 5px 0px 15px 0px;
    height: 160px;
    position: relative;
    overflow: hidden;
  }
  .img-thumbnail img {
    width: 100%;
    height: auto;
    position: absolute;
    top: -100%;
    left: 0;
    right: 0;
    bottom: -100%;
    margin: auto;
  }

Kode CSS dirubah menjadi .img-thumbnail > width: 40%, Height: 80px dan .img-thumbnail img > width:80%.

.img-thumbnail {
    width: 40%;
    margin: 5px 0px 15px 0px;
    height: 80px;
    position: relative;
    overflow: hidden;
  }
  .img-thumbnail img {
    width: 80%;
    height: auto;
    position: absolute;
    top: -100%;
    left: 0;
    right: 0;
    bottom: -100%;
    margin: auto;
  }

B. Jika anda ingin memindahkan gambar Thumbnail terletak disebelah kanan silahkan tambahkan kode CSS di .img-thumbnail dengan kode float: right; menjadi

.img-thumbnail {
    width: 40%;
    margin: 5px 0px 15px 0px;
    height: 80px;
    position: relative;
    overflow: hidden;
    float: right;
  }
  

C. Jika anda menginginkan cuplikan postingan di Viomagz versi 3.1.00 dihilangkan sehingga hanya judul dan gambar saja silahkan cari kode CSS  dibawah ini :

.post-snippet {
    margin-top: 10px;
  }

Tambahkan kode CSS display:none; sehingga CSS lengkapnya menjadi dibawah ini :

.post-snippet {
    margin-top: 10px;
    display:none;
  }

Dan jangan lupa atur CSS dibawah ini untuk mengatur judul artikelnya dengan menambahkan CSS di h2.post-title  dengan kode Font-weight: 400:

h1{font-size:170%}
  h2{font-size:150%}
  h3{font-size:130%}
  h4{font-size:120%}
  h5{font-size:110%}
  h6{font-size:100%}
  h2.post-title {
    font-size: 16px;
    display: inline;
    Font-weight:400;
  }

Hasilnya menjadi gambar berikut

Setelah disimpan sekarang cek menggunakan hp anda apakah sudah sesuai tampilan gambar yang anda inginkan, jika anda masih kurang puas bisa di atur angkanya sesuai keinginan anda. 

Begitulah cara sederhana untuk mengatur tampilan gambar template viomagz versi 3.1.00 yang terpotong jika dibuka menggunakan hp. Selamat mencoba tips dan trik dari saya semoga berhasil sesuai dengan keinginan anda.

Jika anda ingin membelinya secara resmi silahkan kunjungi situs resmi mas sugeng.id .

Share :