Cara Mengganti Header Blogspot

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{
margin:auto;
padding: 0;
width: 100%;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxLkuRQ4e5MQP0S3dPYNEpFTwBdLhxs5e9gS8TxZlI-CDz-pHGWx1bIEfiXJX9pSFx8z6QfBau5ZG2jrECLyKESK8MspslD9_9egMkzobzmNvzmzNw4rFJS9x5_RiM1hOn6dMgCkogoZ4/s400/deadly-stars.jpg) no-repeat;
border-bottom:1px solid #383838;
border-top:1px solid #474747;
}
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.

Demikianlah cara mengganti header blogspot. Semoga bermanfaat.
Share this article :
 

+ comments + 16 comments

July 10, 2009 at 9:18 PM

makasih atas infonya ya
salam

Anonymous
September 25, 2009 at 1:42 PM

bro klo ada ebook gua beli deh

October 4, 2009 at 9:22 AM

mkasih mas info nya,segera di praktekin nich..

salam kenal..

October 22, 2009 at 7:46 AM

wah, kok sulit ya..terus simpan gambar backgroud..gimana...tolong bantu...ya

February 14, 2010 at 6:48 AM

Terimakasih atas postingan ini saya pusing edit my header

March 29, 2010 at 7:18 PM

Wah, cantik bro.. Simple dan menarik...

October 16, 2010 at 1:08 PM

wah kode yang saya ko beda nih klo mau lihat templet saya yang tidak menemukan kode diatas masuk aja ke www.sholeh.co.tv

July 8, 2011 at 11:41 AM

wow..trims banget yaa

July 15, 2011 at 10:18 PM

wew keren... izin yg gan bwat langsung d coba..
Thanks :)

January 17, 2012 at 3:58 AM

thanks atas infonya

January 27, 2012 at 10:44 PM

akhirnya ketemu deh..
lagi di praktikkan ni..

January 29, 2012 at 5:48 AM

Boleh di coba tuh gan...

February 8, 2012 at 8:42 PM

terima kasih infonya mas. akan saya coba.

February 19, 2012 at 6:43 AM

keren sob, makasih buat panduannya. posting juga cara bikin menu di blog sob?

April 13, 2012 at 1:12 AM

info yang bagus dan juga artikelnya bermanfaat banget buat gue loe, ok dan makasi dari mico ok thanks a lot

Post a Comment

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Bewegaleri Blog - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger