Kamis, 18 Agustus 2016

Cara Merubah Header Blogspot dengan gambar / Logo milik kita "Bonus edit dengan HTML"

Mengubah header blog dengan gambar sendiri. Mempercantik blog sering di lakukan oleh para blogger pemula atau yang sering saya sebut "blogger imut".

Gairah ngeblog para blogger imut ini di mulai dengan menata desain blog agar lebih sedap di pandang mata.

Display pada header pun tak luput dari aksi mereka saat menghias tampilan blog. Berbagai eksperimen di terapkan demi mendapatkan gambar header yang keren.

Banyak blogger yang mengubah header blog dengan gambar dari file pribadi. Mereka beralasan, rata-rata tampilan header bawaan dari template di pandang kurang artistik.

Alasan lain yang paling dominan biasanya untuk menambah nilai estetika blog. Header blog yang menarik akan memberi kesan tersendiri buat pengunjung.

Bagaimana cara mengganti atau mengubah header blog dengan gambar pilihan kita sendiri?

Bagi para senior, pertanyaan tersebut di anggap sepele. Tidak demikian buat blogger pemula, mereka sering kesulitan ketika mengganti header blog. Don't worry my friend, I'll help you.


mengubah header blog dengan gambar
header blog

Ikuti terus artikel ini sampai habis, saya jamin Anda bisa.


Jenis Header pada Blog

Header blog letaknya paling atas. Pembuat template blog sering memodifikasi header yang di kemas (wrapper) bersama dengan halaman pendukung seperti about, contact, dan privacy policy.

Header bisa di pecah menjadi beberapa kolom bisa 1, 2, 3 atau bahkan 4 tergantung dari si pembuat template. Pemecahan ini sengaja di buat untuk tujuan tertentu contohnya untuk menaruh iklan atau logo blog.

Jenis header pada template yang sering di pakai yaitu header 1 kolom dan header 2 kolom (lihat gambar di bawah).


header 1 kolom - blog must teguh

header 2 kolom - blog must teguh

Itulah adalah jenis header yang sering kita temui. Silahkan cek pada menu tata letak di dasbor blogger, termasuk jenis yang mana header blog Anda.


Persiapan Sebelum Mengubah Header

Pertama yang mesti di persiapkan adalah gambar atau logo yang akan di pasang. Untuk gambar, kita bisa mengambilnya dari file di komputer atau mengunduh dari situs penyedia gambar.

Untuk logo, Anda bisa berkreasi sendiri melalui photoshop atau membuat langsung melalui situs pembuat logo via on line.

Persiapan kedua , Anda harus tahu ukuran width dan height dari header pada blog Anda. Melalui inspect element kita bisa mengetahui langsung ukuran header pada blog. Caranya mudah, cari saja di Google.

Cara Mengubah Header Blog

Ada dua cara untuk mengganti header, yaitu melalui tata letak di dasbor dan edit html pada template.

Mengubah header dari dasbor

1. Dari dasbor, masuk ke menu tata letak.




2. Pada slot header, klik tulisan edit. Khusus untuk header 2 kolom pilih slot yang ada nama blog anda. Untuk header 1 kolom, langsung saja klik edit.


3. Tampilan pop up yang muncul seperti gambar di bawah ini. Ikuti sesuai urutan nomor. Pada tombol 'browse", ambil gambar hasil unduhan atau kreasi logo buatan Anda yang tersimpan pada file di komputer.

mengubah header pada blogspot



4. Klik Save.

Mengubah header dari edit HTML

1. Dari dasbor pilih template lalu klik edit html.

2. Temukan kode #header-wrapper. Ganti kode tersebut dengan kode di bawah ini.

#header-wrapper{background:url(http://www.marinirseo.web.id); width:952px;margin:0 auto 0;height:118px;)

Ubah tulisan warna merah dengan url gambar yang telah anda persiapkan. Untuk ukuran headernya (tulisan warna biru) sesuaikan dengan width dan height pada header anda.

3. Klik Pratinjau template untuk melihat hasil sementara.

4. Jika tidak muncul error dan hasil sudah sesuai, simpan template.


Kendala dan Solusi

Berikut beberapa masalah atau kesulitan yang mungkin muncul saat mengganti header. Ikuti pula solusi yang saya berikan.

Muncul tumpang tindih antara gambar header dengan deskripsi blog

Solusinya mudah. Cari kode ini #header-description, lalu tambahkan kode ini display:none; atau visibility:hidden; setelah itu pratinjau template, jika sudah ok klik save.

URL gambar yang di pasang pada header wrapper, gimana buatnya?

Kesulitan ini sering di alami blogger pemula. Caranya mudah, ini yang saya lakukan. Pertama ukuran gambar harus sudah sesuai dengan ukuran header.

Berikutnya, edit salah satu artikel kita, lalu pasang gambar tersebut (letakkan paling bawah). Klik gambar dan pilih original size lalu publikasi kan.

Buka artikel, arahkan mouse ke gambar lalu klik kanan, pilih salin url gambar dan simpan sementara pada notepad. Setelah itu hapus lagi gambar dari artikel tersebut.

Buka edit html, paste kan url dari notepad tadi ke url pada #header-wrapper. Klik save.


Itulah cara mengganti header dengan gambar. Jika Anda masih menemukan kesulitan, silahkan masukkan pada kolom komentar. Saya selalu siap membantu Anda.