4 Cara Merubah Ukuran Dan Posisi Thumbnail Mobile Di Hompage Viomagz
Cara Mengatur/Mengubah Ukuran Thumbnail Mobile VioMagz
Halo sobat blogger,berapa banyak dari kalian yang memakai template blogger?
Seperti yang kita semua tahu bahwa template buatan Mas Sugeng ini memang cukup populer,baik dari segi desain yang minimalis,keren dan elegan,fitur-fitur menarik dengan penggunaan yang gampang serta kualitasnya yang sudah SEO Friendly dan Fast Loading.
Untuk ketika ini template VioMagz sudah mencapai versi 3.1 dengan banyak sekali perubahan yang membuatnya mempunyai desain dan fitur-fitur yang keren. Namun ada beberapa hal yang di keluhkan oleh para pengguna menyerupai Ukuran thumbnailnya yang terlihat gepeng kalau dilihat dari tampilan mobile.
Cara Mengganti Ukuran Thumbnail di Hompage VioMgaz versi Mobile
Beberapa blogger pengguna template VioMagz ada yang lebih suka dengan tampilan thumbnail mobile versi usang yang ukurannya kecil,oleh alasannya itu.. disini aku akan membagikan tutorial Cara Merubah Ukuran dan Posisi Thumbnail Mobile di Hompage VioMagz.
1. Cara Memperbesar Tampilan Thumbnail VioMagz yang Gepeng di versi Mobile
Seperti yang anda lihat di gambar diatas,itu merupakan tampilan thumbnail VioMagz versi 3.1 kalau dibuka dari perangkat mobile. Disitu tampilan thumbnailnya terlihat gepeng dan agak memanjang ke samping. Entah hanya aku saja atau ada orang lain (termasuk anda) yang merasa kurang puas dengan tampilan tersebut.
Saya sendiri lebih menyukai tampilan thumbnail yang lebih besar,bila anda mempunyai pedoman yang sama maka berikut ini tutorial yang dapat anda ikuti untuk menciptakan tampilan thumbnail di VioMagz lebih besar.
- Buka Blogger.com
- Sign In dengan Akun Google anda
- Masuk ke Dashboard Blogger
- Pilih sajian Tema
- Klik Edit HTML
- Cari arahan berikut ini :
.img-thumbnail {
width: calc(100% + 30px);
margin: 0px 0px 15px -15px;
height: 160px;
position: relative;
overflow: hidden;
}
- Ubah tingginya (height) dari 160px menjadi 250px sehingga nanti kodenya kan menjadi menyerupai berikut :
.img-thumbnail {
width: calc(100% + 30px);
margin: 0px 0px 15px -15px;
height: 250px;
position: relative;
overflow: hidden;
}
- Bila sudah silahkan anda klik Simpan Tema
- Bila anda berhasil mengganti ukurannya maka tampilan thumbnailnya akan berubah menyerupai di gambar berikut :
2. Cara Merubah Ukuran Thumbnail VioMagz jadi Kecil
Bila anda melihat pada desain VioMagz yang usang khususnya versi 2.4 ,tampilan thumbnail mobile di VioMagz mempunyai bentuk yang kecil. Beberapa blogger lebih menyukai tampilan tersebut alasannya dianggap lebih rapi. Jika anda salah satu orang yang menyukai desain tersebut maka disini aku akan memberi tutorial cara menciptakan ukuran thumbnail viomagz menjadi kecil.
- Buka Blogger.com
- Sign In dengan Akun Google anda
- Masuk ke Dashboard Blogger
- Pilih sajian Tema
- Klik Edit HTML
- Cari arahan berikut untuk mengedit ukuran thumbnailnya :
.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;
}
- Ganti yang aku bold menjadi menyerupai berikut :
.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;
}
- Bila sudah silahkan anda klik Simpan Tema
- Bila berhasil nanti tampilan thumbnail di versi mobile akan berubah menyerupai berikut :
3. Cara Merubah Posisi Thumbnail VioMagz Mobile di Sebelah Kanan
Untuk anda yang sebelumnya sudah merubah ukuran thumbnail VioMagz jadi kecil ketika dibuka melalui perangkat mobile,anda juga dapat merubah posisinya menjadi di sebelah kanan. Berikut ini cara biar ukuran thumbnail viomagz kecil dan posisinya di sebelah kanan.
- Buka Blogger.com
- Sign In dengan Akun Google anda
- Masuk ke Dashboard Blogger
- Pilih sajian Tema
- Klik Edit HTML cari arahan berikut :
.img-thumbnail {
width: 40%;
margin: 5px 0px 15px 0px;
height: 80px;
position: relative;
overflow: hidden;
}
- Tambahkan arahan berikut di dalamnya :
float: right;
- Sehingga nanti hasil kesannya arahan tadi menjadi menyerupai berikut :
.img-thumbnail {
width: 40%;
margin: 5px 0px 15px 0px;
height: 80px;
position: relative;
overflow: hidden;
float: right;
}
- Bila sudah silahkan anda klik Simpan Tema
- Bila berhasil nanti tampilan thumbnail akan menjadi menyerupai berikut :
4. Cara Menghilangkan Deskripsi Postingan di Homepage Blogger (Hanya Thumbnail dan Judul)
Anda juga dapat merubah tampilan postingan di homepage blog anda menjadi tanpa deskripsi,sehingga hanya menampilkan judul dan thumbnailnya saja. Berikut ini caranya :
- Buka Blogger.com
- Sign In dengan Akun Google anda
- Masuk ke Dashboard Blogger
- Pilih sajian Tema
- Klik Edit HTML
- Cari script berikut :
.post-snippet {
margin-top: 10px;
}
- Lalu tambahkan arahan ini di dalamnya :
display:none;
- Sehingga nanti akan menjadi menyerupai ini :
.post-snippet {
margin-top: 10px;
display:none;
}
- Setelah itu cari script 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: 18px;
display: inline;
}
- Lalu tambahkan arahan ini :
Font-weight:400;
- Dan ubah Font Size dari 18px jadi 16px
- Sehingga nanti scriptnya akan jadi menyerupai ini
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;
}
- Setelah itu anda klik Simpan Tema
- Bila berhasil nanti tampilannya akan menjadi menyerupai ini :
Penutup
Itulah 4 Cara Merubah Ukuran dan Posisi Thumbnail Mobile di Hompage VioMagz,dengan mengikuti langkah-langkah tersebut anda dapat mengganti ukuran maupun posisi dari thumbnail viomagz biar lebih sesuai dengan harapan anda. Selamat Mencoba
Sumber https://www.dirga.id/
