Cara Merubah Ukuran Gambar Thumbnail di Viomagz Versi Mobile

Didalam sebuah dunia blogger, banyak para blogger yang ingin mendapatkan template terbaik yang pastinya mempunyai loading blog yang sangat cepat, salah satunya adalah template karya mas Sugeng ini. Baik secara resmi membeli dari mas sungeng maupun mencari bersi Gratis yang dibagikan oleh para blogger yang tidak bertanggung jawab.


Nama template tersebut adalah Viomagz, template ini dari segi desain memiliki tampilan yang sangat elegan dan pastinya simple, memiliki beberapa peningkatan baik score maupun SEO. Jika kamu ingin serius membangun sebuah blog, lebih baik kamu membelinya secara resmi dari mas sungeng agar kamu bisa mendapatkan update terbaru dari viomagz tersebut.

Keuntungan Membeli Secara Resmi dari Mas Sugeng
  • 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.

Selain itu apabila kamu tidak begitu paham tentang coding da cara edit HTML. tentunya kamu bisa setting langsung di SESUAIKAN tanpa harus edit HTML, tentunya sangat membantu bagi blogger yang masih pemula. Berjalannya waktu saya sedikit kurang puas dengan tampilan thumbnailnya akhirnya saya memodifikasi secara ringan dan mengatur dibagian CSSnya.

Cara Merubah Ukuran Gambar Thumbnail di Viomagz Versi Mobile

1. Silahkan kamu login ke blogger.com dengan menggunakan GMAIL kamu.
2. Masuk ke menu TEMA > Edit HTML.
3. Cari kode CSS berikut ini :

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

4. Pada CSS Height : 160px; silahkan ganti angkanya menjadi height : 250px;
5. Kalau sudah diganti, maka kodenya akan jadi seperti berikut :


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

6. Selanjutnya klick SIMPAN dan Lihat hasilnya.



A. Tampilan Mobile Menjadi Kecil di Kiri


1. Cari kode CSS berikut ini 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;
  }

2. Silahkan ubah 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. Tampilan Mobile Menjadi Kecil di Kanan

1. silahkan tambahkan kode CSS di .img-thumbnail dengan kode float: right; contohnya seperti berikut ini :

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


C. Kalau Hanya Judul dan Gambar

1. Selanjutnya, Silahkan kamu cari kode berikut ini :

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

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

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

3. Selanjutnya, jangan lupa untuk mengatur CSS dibawah ini untuk mengatur judul artikelnya dengan menambahkan CSS di h2.post-title dengan kode Font-weight: 400, sebagai berikut :

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

4. Kalau sudah klik SIMPAN dan Selesai.


Setelah semua selesai klik simpan dan lihat hasilnya di versi mobile, apakah sudah sesuai tampilan gambar yang anda inginkan, jika anda masih kurang puas bisa di atur angkanya sesuai keinginan anda, sampai sini dahulu artikel kali ini apabila ada kendala silahkan koment di kolom komentar dibawah artikel kali ini.
Tampilkan Komentar
Sembunyikan Komentar

0 Response to "Cara Merubah Ukuran Gambar Thumbnail di Viomagz Versi Mobile"

Post a Comment

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar semua.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel