Hal yang membuat blog menjadi personal adalah header yang mencerminkan blog tersebut milik kita. Untuk blogspot blog, tampilan header (pakai gambar atau hanya tulisan saja) biasanya tergantung dari template yang kita gunakan. Ada kalanya, format keseluruhan template blogspot sudah sesuai dengan keinginan kita, namun gambar headernya tidak cocok dengan isi blog kita. Jika demikian kasusnya, kita perlu mengganti header blog agar sesuai dengan konten. Bagaimana mengganti header blog blogspot ? (Sebelum ini, aku pernah menulis cara mengganti header blog wordpress)
Untuk mengganti header blogspot, ada beberapa cara yang bisa kita lakukan. Cara termudah adalah dengan melalui pengaturan add and arrange page element (tergantung template yang digunakan. sebagian besar template blogspot mendukung penambahan gambar di header lewat menu ini). Untuk mengganti header blogspot dengan cara ini, login ke dashboard blogger.
Masuk ke tab Layout. Pada kotak Header (sesuai judul blog anda) klik Edit.
Pada jendela baru yang muncul, klik Browse untuk mencari gambar yang akan digunakan sebagai header. Sebaiknya sebelum melakukan ini, kita harus menyediakan image yang akan kita pakai sebagai header, dengan ukuran sesuai ukuran header (jika tidak tahu ukuran headernya, beri tanda centang pada Shrink to fit dimana ukuran gambar akan disesuaikan dengan ukuran header). Pilih behind title and description jika gambar yang anda masukkan tidak mengandung teks judul, karena ini berarti judul dan deskripsi blog akan ditampilkan. Sebaliknya, jika anda membuat gambar header komplit dengan tulisan judul dan deskripsinya, pilih instead of title and description yang mana pilihan ini akan menyembunyikan judul dan deskripsi. Klik Save.
Kini blog anda sudah mempunyai header yang sesuai dengan keinginan anda (tentunya disesuaikan dengan tema blog).
Cara lain untuk mengganti header blogspot adalah melalui pengaturan kode CSS. Caranya, dari dashboar blogger, masuk ke blog yang akan kita ganti headernya. Masuk ke tab Layout > Edit HTML. Pastikan anda selalu membackup template sebelum mengubahnya (caranya dengan klik Download full template) agar sewaktu-waktu ada kejadian yang tidak kita harapkan, kita bisa kembalikan lagi template seperti semula.
Pada menu Edit HTML, beri centang Expand Widget Template. Tekan tombol Ctrl + F bersamaan untuk memanggil fungsi pencarian. Ketikkan header pada kolom Find untuk mencari kode css header. Anda juga bisa menscroll mouse untuk melakukan pencarian ini, tapi tidak praktis.
#head{Pada kode css yang mengatur header (penamaan tidak harus sama dengan contoh disini, tergantung template yang digunakan), cari tulisan background karena inilah yang mengatur tampilan header blog kita. Adakalanya background ini berisi kode #000000 (atau yang lainnya) yang berarti backgroundnya berisi warna. Untuk menggantinya menjadi berlatar image yang telah kita siapkan, berikan kode url(alamat image). Sebelumnya, anda harus mengupload image yang akan digunakan ke situs penyimpanan (hosting) gambar, dan ganti alamat image dengan url gambar anda. Setelah itu klik tombol save template untuk menyimpan hasil kerja anda.
margin:auto;
padding: 0;
width: 100%;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjUKelmq4JkXStexnQ-N7KCwzPn6g3YrsP8la5GIXHcsY4z_caYnMODeG-9i1Iw_lk-KMpSZh_x8OXciYVqTaP2E2TmHllprTjR_z8nY2-o2SwQnwUnDevW7YFOrKKfuh4c-2ijku-bq0/s400/deadly-stars.jpg) no-repeat;
border-bottom:1px solid #383838;
border-top:1px solid #474747;
}
Demikianlah cara mengganti header blogspot. Semoga bermanfaat.
15 comments:
makasih atas infonya ya
salam
bro klo ada ebook gua beli deh
mkasih mas info nya,segera di praktekin nich..
salam kenal..
wah, kok sulit ya..terus simpan gambar backgroud..gimana...tolong bantu...ya
Terimakasih atas postingan ini saya pusing edit my header
Wah, cantik bro.. Simple dan menarik...
wah kode yang saya ko beda nih klo mau lihat templet saya yang tidak menemukan kode diatas masuk aja ke www.sholeh.co.tv
wow..trims banget yaa
wew keren... izin yg gan bwat langsung d coba..
Thanks :)
thanks atas infonya
akhirnya ketemu deh..
lagi di praktikkan ni..
Boleh di coba tuh gan...
terima kasih infonya mas. akan saya coba.
keren sob, makasih buat panduannya. posting juga cara bikin menu di blog sob?
info yang bagus dan juga artikelnya bermanfaat banget buat gue loe, ok dan makasi dari mico ok thanks a lot
Post a Comment