Cara Mudah Merubah Ukuran Gambar Header Agar Sesuai Tampilan

Selamat Datang di Wahyu Development, kali ini saya akan membagikan bagaimana cara mengganti Judul Website dengan Gambar. Dalam mengganti judul website dengan gambar biasanya gambar akan terlihat sangat kecil dan tidak sesuai dengan yang anda harapkan atau sebaliknya terlihat sangat besar.

Berikut tutorial cara mengatur gambar agar sesuai dengan header.

Pertama buatlah sebuah gambar header, bebas dengan ukuran apa saja, bila sudah jadi silahkan save gambar tersebut dengan ekstensi .JPG atau .PNG. Kemudian masukan gambar tersebut ke blogger anda, dengan cara klik Tata Letak --> lalu klik Header.

Selanjutnya atur posisi gambar header seperti ini. Dengan memilih Instead of title and description. Lalu klik Save.

Langkah berikutnya anda harus mengetahui CSS dari gambar tersebut, disini saya mencontohkan dengan template Viomagz, jika anda menggunakan template yang lain silahkan ikuti cara berikut.

Buka halaman website anda, kemudian lakukan klik kanan dan pilih Inspact.

Selanjutnya lakukan inspact untuk mencari CSS dari header IMG. Biasanya saat melakukan inspact gambar header tidak dapat langsung di ketahui, contoh seperti ini.

Arahkan saja cursor anda lalu klik pada gambar, pada tabel Inspact di samping silahkan lakukan scroll keatas, jangan terlalu cepat, sembari di arahkan cursor ke code tersebut. Ketika saya mengarahkan cursor ke salah satu code Inspact menunjukan ke arah gambar header seperti ini.

Jika masih terdapat space (ditandai dengan warna coklat) berarti code itu masih code secara keseluruhan, silahkan anda klik tanda panah pada code tersebut untuk membuka lebih dalam lagi. Ketika membuka code di dalamnya, usahakan selalu cek satu per satu, sehingga ketika anda mengarahkan cursor ke code Inspact menunjukan hanya ke gambar header seperti ini.

Selanjutnya klik tanda panah pada code tersebut, maka di dalamnya anda menemukan URL tentang gambar header tersebut, silahkan anda klik satu, secara otomatis CSS dari gambar tersebut akan tampil seperti ini.

Disinilah anda dapat mengujinya terlebih dahulu sebelum menerapkan di Edit HTML. Disini saya hanya merubah dan menghilangkan code yang tidak dibutuhkan, sehingga tampil seperti ini.

Kini anda hanya perlu menerapkan code tersebut di Edit HTML. Caranya silahkan anda copy tag CSS diatasnya, contohnya .header img. Buka Edit HTML --> lalu tekan CTRL+F --> paste tag CSS tersebut. Maka akan tampil seperti ini.

Silahkan ubah code CSS seperti yang ada di Inspact. Maka akan menjadi seperti ini.

Langkah terakhir anda hanya perlu menyimpan perubahan tema, dengan demikian gambar header anda sudah sesuai dengan keinginan anda.

[Catatan] anda tidak harus menyamakan nilai ukuran, karena nilai tersebut tergantung tampilan template anda.

Itulah cara merubah ukuran gambar header agar sesuai dengan keinginan anda, berikan komentar anda dan semoga bermanfaat . . .

Wahyu Development

Situs download software lengkap dan mudah - Tutorial lengkap tentang website, sosial media, dan komputer - Sumber referensi tugas sekolah dan informasi lainnya

Share this post

Related Post