Cara Mengatur Ukuran Gambar/Logo Header pada Template VioMagz

ARDINTORO |dot| COM - Bagi Kalian yang sudah lama di dunia blogger pasti nggak asing lagi dengan template VioMagz. Ya template ini buatan Mas Sugeng yang cukup menjadi primadona di kalangan blogger Indonesia, karena design template yang simple, ringan dan mudah di edit sesuai keinginan. Termasuk template blog ardintoro.com juga menggunakan template VioMagz V.2.4 tapi sudah saya modifikasi.

Bila Kalian juga pengguna template VioMagz  silahkan di simak beberapa tutorial berikut ini agar tampilan template bisa menarik sesuai dengan milik si empunya Mas Sugeng. Bagi yang baru menggunakan template ini biasanya mengalami beberapa kendala misalnya saat memasang logo header, gambar menjadi kecil dan tampak nggak menarik akhirnya di hapus dan di ganti menggunakan header teks atau tulisan.

Untuk itu saya sudah menemukan cara agar logo header di template VioMagz bisa terlihat besar seperti di tampilan template resmi VioMagz. Sebelum Kalian upload  logo ke blog alangkah baiknya Sobat mengedit terlebih dulu logo tersebut dengan ukuran yang pas, adapun ukuran logo header yang di sarankan 300 x 50 px sedangkan gambar di postingan adalah 800 x 450 px.

Cara merubah logo di template VioMagz agar lebih besar

Tahap pertama Kalian harus mengatur ukuran logo sesuai dengan ukuran yang pas yaitu 300 x 50 px. Setelah itu Kalian masuk Dasbor blogger masing-masing, langkah selanjutnya pilih Tema dan Edit HTML, seperti biasa untuk menghindari kesalahan dalam mengedit kode script sebaiknya Kalian simpan dulu template-nya.

Setelah masuk Edit HTML Kalian tekan Ctrl+F untuk memunculkan kotak pencarian kode. Setelah itu Kalian cari kode (.header img {) setelah kodenya ketemu silahkan diamati sambil masuk langkah selanjutnya.

Setelah itu Kalian ubah Margin dan Max-Height nya seuai keinginan. Tapi saya rekomendasikan seperti yang sudah saya terapkan di blog ini misalnya Margin: 6px 0; dan Max-height: 35px; seperti contoh di bawah ini.

.header img {
display: block;
width: auto;
margin: 6px 0;
max-height: 35px;
}

Sebagai catatan margin di situ adalah jarak logo dari batas garis atas blog. Jadi semakin besar Kalian mengisi angkanya maka gambar atau logo akan semakin turun ke bawah sedangkan Max-height adalah pengaturan untuk mengatur besar kecilnya gambar logo, sebaiknya Kalian isi sesuai dengan keinginan.

Baca Juga: Cara Membuat Night Mode (Dark Mode)

Bila semua sudah di lakukan tinggal Kalian save dan lihat hasilnya. Mungkin cukup sampai di sini tutorialnya. Bila di antara Sobat ada pertanyaan menyangkut pembahasan ini, bisa di tanyakan di kolom komentar. Terakhir jangan lupa bahagia ya.

Share :