Mengganti Header Template Pada Blogger

Posted by Herman on Friday, October 17, 2008 59 comments

blogger template headerSupaya blog Anda terlihat unik atau beda dari yang lain. Maka Anda harus mengganti tampilan blog Anda.

Ada banyak cara untuk melakukannya. Misalnya dengan mengganti template yang dibuat oleh pihak ketiga tapi rata-rata template tersebut sudah ada yang menggunakannya.

Terkecuali Anda membuat template sendiri namun cara ini memerlukan waktu yang lama dan tidak mudah untuk membuat sebuah template yang bagus. Jadi salah satu cara yang paling mudah dan efektif adalah mengganti header pada template.

Header merupakan unsur yang paling penting dalam sebuah template karena setiap pengunjung yang datang ke blog Anda pertama kali yang dilihat adalah headernya. Jadi mengganti header merupakan cara yang paling tepat.

Header tidak harus berupa gambar. Anda juga bisa menggunakan teks sebagai header yang penting enak dilihat. Jika anda ingin menggunakan gambar sebagai header tetapi tidak bisa membuatnya. Jangan khawatir, karena saat ini ada banyak situs yang menyediakan gambar header secara gratis jadi Anda tinggal mendownload saja. Beberapa website yang memiliki header yang cukup bagus seperti: 100pixel.blogspot.com, freewebpageheaders.com, smashingmagazine.com, dan masih banyak lagi.

Pada postingan ini saya akan membahas tentang mengganti header dari freewebpageheaders.com. Untuk mendowloadnya, silahkan ikuti langkah-langkah dibawah ini:

1. Buka situs http://freewebpagesheaders.com/gallery

2. Untuk mendownload header. Anda harus memiliki account terlebih dahulu. Klik register untuk mendaftar.

3. Klik Agree. Kemudian Anda akan diminta untuk mengisi Registration form. Form ini terdiri dari 2 bagian yaitu : Required info dan Optional info.

Required info merupakan info yang harus Anda berikan untuk pendaftaran sedangkan Optional info merupakan info yang digunakan untuk menampilkan data Anda kepada pengunjung saat Anda login. Jika Anda merasa tidak perlu maka diabaikan saja untuk bagian ini

4. Kemudian klik Submit Registration Form. Jika sudah Anda akan mendapat pesan seperti ini.

5. Buka email yang Anda gunakan untuk mendaftar. Klik pada link yang diberikan untuk mengakftifkan account Anda.

6. Jika sudah, Anda akan mendapat pesan bahwa account Anda sudah diaktifkan.

7. klik Return to the front page of free Web Page Headers.

8. Lalu klik Login untuk mendowload gambar header.

9. Pilih kategori header yang Anda inginkan. Jika Anda sudah menemukan gambar yang cocok. Klik pada gambar tersebut lalu klik Download.

10. Kemudian gambarnya akan terbuka pada halaman baru. Klik kanan pada gambar lalu pilih Save Image As lalu tekan Save.

11. Selesai. Sekarang gambar sudah tersimpan di komputer Anda

Langkah selanjutnya yang harus Anda lakukan adalah mencari tahu berapa ukuran header pada template Anda supaya pada saat mamasang ukurannya pas dengan header template Anda. Caranya:

1. Klik Layout->Edit HTML.

2. Cari kode #header-wrapper. Supaya mudah untuk mencarinya, tekan Ctrl+F ketik "header-wrapper" lalu tekan Next.

3. Jika sudah ketemu biasanya ada kode width dan height disekitarnya. Misalnya #header-wrapper { background: url } no-repeat; width:980px; height:100px;

Width
adalah panjang header dan Height adalah lebar header. Berarti Anda harus meresize gambarnya menjadi 980x100 pixel. Anda bisa menggunakan program pengolah gambar seperti Ms Paint, ACD See, photoshop untuk meresizenya.

4. Setelah selesai. Buka Blogger, masuk ke menu Design->Page Elements.

5. Klik Edit pada bagian Header.


6. Kemudian akan muncul halaman baru.


7. Pilih Browse from your computer jika gambarnya disimpan dikomputer atau Browse from the web jika gambarnya disimpan di image hosting seperti: Imageshack, Photobucket, dan Geocities.

8. Pada bagian "Placement". Pilih Behind title and description jika Anda ingin manampilkan gambar dibelakang judul dan deskripsi blog atau pilih Instead of title and description jika Anda ingin menutupi judul dan deskripsi blog.

9. Lalu klik Save. Klik View Blog untuk melihat hasilnya.

Catatan:
Tidak semua template bisa dipasang gambar. Ada yang menggunakan teks saja. Jadi pilihlah template sesuai kebutuhan.

Selamat mencoba. Semoga berhasil...


Recent Posts:

59 comments

Anonymous said... 26 January, 2009
kenapa ya saya coba ganti header pakai file gif tapi kok jadinya gambar biasa? tidak mau bergerak/ tidak animasi lagi.

trims
Herman said... 30 January, 2009
Ketua RT: Tidak semua file gif bisa bergerak pak. Coba anda cek dulu gambarnya apakah benar-benar gambar animasi. jika iya. Ikuti saja langkah-langkah pemasangan gambar diatas. Hasilnya, headernya akan menampilkan gambar animasi. Silahkan dicoba lagi semoga berhasil.
Unknown said... 10 May, 2009
satu lagi tehnik yang baru makasi moga blog anda menjadi blog terbaik n banyk pengunjungnya
the RedZonEdition said... 11 May, 2009
sangat membantu dalam pengeditan blog saya, maklumlah bro..masih awam hehehe..thanks
lili said... 23 May, 2009
Gimana klau mo nambah halaman menu horizontal pada blog mas? Aq masih pake template standar,aq baru belajar bikin blog dan masih bingung nih. Mohon bantuannya ya mas.
wiena_sudharmanto said... 24 May, 2009
blognya bagus..tips2nya berguna banget :)
Bisnis Online GRATIS!!! said... 26 May, 2009
Tambah terus bro tips tips nya....sukses buat anda...
myspaceblog said... 09 June, 2009
trus gmn cara mengganti logo blogger itu?
herman said... 10 June, 2009
@efaproditus: amin

@the Redzon: sama bro. mari kita sama2 blajar ya ^^

@lili: baca disini lili http://hermanblogtips.blogspot.com/2009/05/panduan-membuat-menu-navigasi.html

@wiena: makasih. smoga bermanfaat :)

@bisnis online: makasih bro. sukses juga untuk anda

@myspaceblog: mungkin yg dimaksud logo favicon y? coba baca disini
Anonymous said... 11 June, 2009
gimana buat judul seperti blog seperti diatas?(herman blog) thanks.http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif
herman said... 11 June, 2009
@anonymous: judul diatas saya buat pake photoshop dengan format .gif. stlah itu baru diupload ke bagian header. caranya bisa anda baca pada tuturial diatas :)
heri said... 28 July, 2009
oiya makasih ya
Anonymous said... 17 August, 2009
wiiih bagoes ,nusaardi.blogspot.com
Lowongan Kerja di Bali said... 05 October, 2009
Bisa kasi panduan buat ganti header di wordpress gak?
facebook hacker said... 23 October, 2009
kok site nya ga isa ya mas??
insanitis37 said... 05 December, 2009
trims ilmunya mas,,,
salam kenal..
Anonymous said... 08 February, 2010
Trims wat ilmunya mas. Hebat tenan. Mampir mas ke blog ku di http://kingoffortune.blogspot.com
blog_Q_(ABDEE_CS) said... 12 June, 2010
mantap memang nte punya blog bang,,, maksih ya,,, kalo ada masukn buat ku posting aja disini bang http://csabdee.blogspot.com/

lm knl

ubylombok
blog_Q_(ABDEE_CS) said... 14 June, 2010
maskih browwww,, kapan kapan kncungi blogg ku,, n kasih komen kyyy http://csabdee.blogspot.com/
Arhiez said... 20 June, 2010
di template saya gk ada tulisan #header-wrapper, jadi saya harus liat ukurannya dimana ?
ergakandly said... 29 June, 2010
kak.. saya tidak dapat kode #header-wrapper nya.. padahal saya sudah download gambarnya :(
Belajar Optimasi SEO said... 29 July, 2010
inpoh yang menarik gan makasih bgt.Sangat membatu buat blogger pemula yang ingin belajar tentang dunia blogging.
Artikel Belajar Optimasi SEO said... 13 August, 2010
wah infonya mangstab om. Sangat berguna buat blogger pemula seperti ane. Trimakasih buanyak.
Andy Bonter said... 27 October, 2010
infonya sangat berguna buat para blogger...
download film gratis said... 01 November, 2010
kalo headernya diganti mempengaruhi seo nggak ya ?
MungNonton said... 16 November, 2010
salam kenal. makasih postingnya
iDR-Clickit mantab bos said... 19 November, 2010
salam kenalhttp://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif tambah wawasan ane nih kalau masang banner di blog gimana yaganhttp://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif
yahaya said... 27 November, 2010
tips bermanfaat
bowoartstudio said... 18 January, 2011
terima kasih informasinya sungguh bermanfaat ..
Elisita said... 02 March, 2011
sip makasi info nya.
Katel said... 04 March, 2011
Ijin sedot artikel'a mass.. Buat simpenan.. thanks.. pasti saya cantumkan sumber'a
CDS Creative Designer said... 24 March, 2011
Thank's gan....???
Makasih infonya...
mampir dunk...
www.designercreative.blogspot.com
:D :D :D
Admin said... 17 May, 2011
mantaf thx bro wat infonya :D
Papan Seluncur said... 30 June, 2011
very nice info gan:)saya ijin copas y??:-/
Cikal 21 said... 18 July, 2011
maturnuwun
idblogku said... 02 August, 2011
Mantap sob artikelnya sangat berguna dan bermanfaat baget buat sobat bloger yang mencari Cara Menghilangkan Header.
fatohir said... 09 August, 2011
:D
Abdulrohman said... 07 September, 2011
Ga berhasil Kode headernya g ketemu padahal template da ku backup :)
Kalau Mau Kirim Info Atau mau bales ke:abroh02@gmail.com ~x(
Aperta Putra said... 23 September, 2011
thanx for information
Unknown said... 08 November, 2011
http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gifhttp://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif
Jamaris Melayu said... 05 January, 2012
Terima kasih sobat atas infirmasi yang sangat bermanfaat. Saya mau pasang gambar di header blog saya setelah ganti template dulu. Salam kenal
Anonymous said... 05 January, 2012
thanks atas infonya
Anonymous said... 17 January, 2012
thanks atas infonya
Anonymous said... 17 January, 2012
thanks atas infonya
Imam Adi Permono, S.Pd. said... 23 January, 2012
Artikel yang berbobot bos,
salam sukses!
bayyu said... 29 January, 2012
ane mw coba tips2 ente sob...blog udh q tempel d blog ane...mksh seblmnyahttp://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif
Unknown said... 29 January, 2012
Perlu di coba tuh gan... Blog ku masih jelek bngt nih headernya =))
Yusuf ardiansyah said... 22 March, 2012
saya kok gak bisa daftar di http://freewebpagesheaders.com/gallery
mohon pencerahannya
Anonymous said... 01 June, 2012
makasih infonya
Ramzi Ebaz said... 22 June, 2012
Aku belum sempat mensetting header template blog aku ni
nice share :)
IdaQurotulS said... 09 August, 2012
menarik tp gimana klo membagi header menjadi beberapa bagian. misalnya dibuat upload 2 gambar
zahra said... 24 August, 2012
mantap bro....
Mahasiswa Songong said... 15 September, 2012
nahhh.. ini dia...
suhaimi shaamland said... 27 September, 2012
Bisa nggak gambar pada header itu diganti dengan flash? Kalau bisa gimana caranya Gan?
Bagus said... 24 October, 2012
jadi gitu ya caranya..
mantap gan, patut dicoba nih..
mampi ke blog saya juga ya Bagus Blog of Fisheries :)
Dzaky Zhafir said... 28 November, 2012
Gan minta pencerahannya, saya pake template pihak ketiga pengin saya ganti warna backgroundnya dari hitam jadi warna lain yang sesuai tema blog dan agar mudah dibuka browser, udah saya ganti kode htmlnya jadi #ffffff kenapa gak ngaruh ya, tetep nggak mau berubah, mohon dibantu ke laciye@yahoo.com juga boleh.Maklum newbi gan.Makasih sebelumnya, keep posting aja gan.
Roby Wakas said... 06 December, 2012
wow luar biasa artikelnya sangat bermanfaat sekali apalagi bagi seorang newbi seperti saya.... berkunjung ke myblog yah Commonwealth Life Perusahaan Asuransi Terbaik Indonesia :D:D:D:D
domtheo said... 18 March, 2013
kalo pake template header dari design kita sendiri bisa ga ya?

Selai
zona droider said... 31 May, 2014
Thanks gan atas infonya. Praktekin dulu ah..

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* : 8-} ~x( :-t b-( :-L x( =))

Post a Comment