Skip to content Skip to sidebar Skip to footer

Cara Mengatur Ukuran Gambar/Logo Header pada Template VioMagz

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.


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.

8 comments for "Cara Mengatur Ukuran Gambar/Logo Header pada Template VioMagz "

  1. Ga bisa pake ukuran lain ya bang soalnya ngebuat ukuran gitu rada susah

    ReplyDelete
    Replies
    1. Usahakan pake ukuran itu Gan, klo nggak biasanya hasilnya kurang bagus.

      Pake aja photoshop, untuk edit ukuran.

      Delete
  2. Cara ubah ukuran gambar thumbnail related post, seperti thumbnail di blog Ardiantoro gimana om ?

    ReplyDelete
    Replies
    1. Itu bawaan dari template Gan
      Ganti template Viomagz, pastinanti gambar thumbnail jadi begitu.

      Delete
  3. Cara merubah ukuran gambar thumbnail related post viomagz, seperti thumbnail di blog ini gimana om ?

    ReplyDelete
  4. Bang selain cara di atas ada lagi nggak yang lebih mudah soalnya ane pemula

    ReplyDelete
    Replies
    1. Yang saya tau hanya itu Gan, karena menyangkut logo haedar pasti larinya edit html.

      Tapi kalau gunakan template Viomagz terbaru, otomatis nggak usah edit² lagi sepertinya sudah di perbaiki Mas Sugeng.

      Delete

Jika ada yang Ingin Anda Tanyakan Terkait Artikel di atas Silahkan Bertanya Melalui Kolom Komentar Berikut ini, dengan Ketentuan :

1. Berkomentarlah dengan Sopan (No Spam, Sara dan Rasis).
2. Komentar di Moderasi. Bila berkomentar nggak sesuai dengan kebijakan Blogger maka nggak di terbitkan!
3. Centang kotak Notify Me / Beri Tahu Saya untuk mendapatkan notifikasi komentar.
4. Happy Blogging 🙂.