Sesuai dengan pertanyaan salah satu mitra template KaJe, kali ini saya ingin membuat solusi atau tutorial cara mengatasi gambar logo header blog yang lewat batas atau kegedean sehingga terlihat terpotong. Salah satu contohnya seperti ini:
Disana terlihat gambar logo nya terpotong oleh menu navigasi blog karena terlalu besar. Biasanya hal ini diakibatkan oleh template nya yang belum support untuk gambar besar. Nah kali ini saya ingin membagikan solusinya, mari disimak.
Cara Mengatasi Gambar Logo Header Yang Lewat Batas / Kegedean
Sebenarnya cara yang dapat anda lakukan sudah dapat di terawang dari awal, yaitu jangan menggunakan gambar yang besar. Tetapi pada kondisi khusus anda harus menggunakan logo yang besar.
Seperti biasa, pertama silakan anda buka Edit HTML. Lalu, cari kode berikut disana. Biasanya letaknya di atas, kisaran baris 5-20.
<head>
Bila tidak ada, ini kode penggantinya:
<head>
Setelah itu, masukkan kode berikut ini tepat dibawah kode yang sudah anda cari diatas tadi.
<style>
#header1, #Header1, #header-inner, #header-inner a, #header-inner img {
height: 100%;
}
</style>
Sehingga kurang lebih bentuk akhir dari kode anda menjadi seperti ini:
<head>
<style>
#header1, #Header1, #header-inner, #header-inner a, #header-inner img {
height: 100%;
}
</style>
Atau
<head>
<style>
#header1, #Header1, #header-inner, #header-inner a, #header-inner img {
height: 100%;
}
</style>
Simpan template dan lihat hasilnya. Kegunaan dari kode CSS diatas adalah untuk mengatur berapa batas maksimal dari kontainer dan gambar logo header blog anda. Disitu saya buat 100% alias mengikuti tinggi header. Jadi gambar tidak memotong.
Bagi anda yang sudah mengikuti langkah diatas tetapi masih tidak work, silakan tanyakan ke saya melalui kolom komentar yang tersedia dibawah beserta link blognya...