Kamis, Februari 07, 2008

Cara Mudah Mengganti Header Blog !!!

Bagi yang sudah bosen dengan tampilan Gambar Header Blog kita (kayak Ocy) dan pengin mengganti dengan desain kita biar lebih personal, mari simak cara-caranya !!!



Langkah Pertama Buatlah desain Headernya dengan Program pengolah gambar (Corel atau Photosop) dengan ukuran 847px X 240px. Simpan dalam format JPG atau GIF.

Let's Edit !!!
*) Cara Pertama :

1. Sign in di Blogger

2. Klik menu Layout

3. Klik menu Edit HTML

4. Klik tulisan Download Template Lengkap, silahkan save dulu template Anda untuk backup

5. Klik kotak kecil di samping tulisan Expand Template Widget

6. Tunggu beberapa saat sampai proses selesai

7. cari kode berikut pada template Anda :

b:section class="'header'" id="'header'" maxwidgets="'1'"

pada kode maxwidgets='1'. Rubah angka 1 menjadi angka 2, sehingga kodenya menjadi

seperti ini :

b:section class="'header'" id="'header'" maxwidgets="'2'"

8. Klik tombol SIMPAN TEMPLATE

Kemudian ................????????????????

1. Klik menu Elemen Halaman

2. KLik tulisan Edit yang ada pada elemen Header

3. Tunggu beberapa saat

4. Pilih radio button yang ada di samping tulisan dari komputer Anda

5. Klik tombol Browse...

6. Pilih Header yang telah di buat yang ada pada komputer Anda

7. Tunggu beberapa saat sampai proses selesai.

8. Gambar Header Anda akan di tampilkan

9. Klik tombol SIMPAN PERUBAHAN

10. Selesai.

**) Cara Kedua

Kalau kurang puas dengan tampilan di cara pertama, kita akan edit dengan cara yang kedua!
Jika sudah selesai mendesain Headernya, silahkan Upload gambar Anda ! contoh di http://www.photobucket.com/

Let's Edit !!!
Caranya

1. Sign in di blogger

2. Klik menu Layout

3. Klik menu Edit HTML

4. Klik tulisan Download Template Lengkap, silahkan save dulu template Anda untuk backup

5. Klik kotak kecil di samping tulisan Expand Template Widget

6. Tunggu beberapa saat sampai proses selesai

7. Tambahkan kode berikut pada style sheet css Anda.Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan (sesuaikan dengan alamat gambar Anda)


/* Header -----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background:url(http://i256.photobucket.com/albums/hh174/mas_usup/mas_usup_top.gif);
}
}

8. Klik tombol Pratinjau untuk melihat perubahan yang ada

9. Bila sudah OK, klik tombol SIMPAN TEMPLATE

10. Selesai.


Thank's for Kang Rohman

46 komentar:

Anonim mengatakan...

matur nuwun bung ucup!!!

yen nggawe link menu gimana pak???

btw, sorry pak! tapi kok potomu mengenaskan banget

Unknown mengatakan...

trima kasih mas ucup.
tutorialnya akan saya coba

Kang Rohman mengatakan...

sip tenan mas.. terus berkarya.

L .O.V.E. & F.R.I.E.N.D mengatakan...

assalamualaikum....

makasih banget mas artikelnya ...
berhasil loch :)

boleh nanya ga mas??

gimana cara membuat banner di header mas??? ditunggu ya mas...

jangan lupa mampir...

assalamualaikum....[-o<

Candra AK., ST mengatakan...

bisa dicoba......

gibols mengatakan...

mas ko ga jadi??
headernya tetap

Anonim mengatakan...

blog yang sederhana & minimalis tapi sangat berkesan ketika dikunjungi....trima kasih mas tutorial nya....

Hendra mengatakan...

trimaksih sekali son infonya, sangat terbantu sekali, maju terus sob... saya senang berkunjung kesini

Irfan Madani Zukhruf mengatakan...

Terima kasih atas infonya...
Pokoknya gak sia - sia deh datang kemari...

Anonim mengatakan...

maju terus.....

suwun yo mas


Gimana cara buat kotak komentar di bawah postingan....

kirimin y mas ke email ini : febri-suprayitno@yahoo.co.id

Andi D mengatakan...

mantap mas, saya coba ganti dulu headernya apa bisa berhasil gak ya....? terimakasih

dari Andi

http://pelitaterang-blog.blogspot.com

Anonim mengatakan...

makasih ya, bisa berbagi info buat ngedit header blog

adi mengatakan...

wah...bagus nih tutorialnya..
saya coba ganti dulu deh...
maklum saya pendatang baru di dunia blogging

please visit me
http://www.jnanayoga-online.blogspot.com

Anonim mengatakan...

Thanks mas..infox ntr di coba dh..

Andi D mengatakan...

Kemarin ada coba, tapi agak sulit Mas, bagi yg uda berhasil kasi tau aku ya

THANKS.

Buku Termurah mengatakan...

Thank you

Andhie mengatakan...

boleh kuga tu .....

K-shoes mengatakan...

nanya mas..aku udah ganti header pake gambar sendiri tapi ko gambarnya ga mau ditengah ya melebihi batas getoh hehe ..makasih

Dedik PS mengatakan...

Makasih mas.. ditunggu kunjungan ny..

Anonim mengatakan...

mantap mas...

Ardy Van Bugis mengatakan...

thanks tutorialnya....

Giri Soeprijanto mengatakan...

thank's bosss....

Dzasc Skachers mengatakan...

terima kasih sobat, sangat membantu.. salam kenal dari saya :-)

lappalla mengatakan...

trims mas usup

lappalla.blogspot.com

Fikri Thufaily mengatakan...

mantap bro... trimakasih

ArjaS@y mengatakan...

asyik mas ilmunya

Anonim mengatakan...

Wah Info bagus Nih..makasih Yah

412IF mengatakan...

Wah ...mantap bro
ini baru ori

SeributawaNews mengatakan...

Wah, sayangnya saya tak ahli photoshop dan corel draw, ada caralain gak yg lebih simple

Unknown mengatakan...

@ Komentator diatas :
Ada cara mudah untuk merubah header secara otomatis. Tutorial lengkapnya ada di http://yogopunyablog.blogspot.com/2010/11/membuat-gambar-header-blog-berubah.html

Unknown mengatakan...

Very useful post. Bookmarked. Thanks for it!

blogketok mengatakan...

sudah di coba...
berhasil sukses.!
trim's mas.

Mahro Purwa mengatakan...

mohon izin disalin hatur nuhun mas usup pasti manfaat buat bloger

fyiqun mengatakan...

siip mas.. oya jajal tempat q y mas n yang lainnya

Unknown mengatakan...

trim atas infonya

Gemapol mengatakan...

Thanks infonya mas Usup...
Nambah ilmu lagi..


http://pipit-eternity.blogspot.com/

Hidayahtullah Abdi Robhani mengatakan...

trima kasih mas.....
Tutorialnya sgt bermanfaat, akan saya coba

salam semangat dari Dayat's Artikel

Oga Gundul mengatakan...

terimakasih kang atas info nya :D
saya masih newbie
hehehhe
.....
yogakurniasany.blogspot.com

Syaiful Munir Site mengatakan...

lebih simpel ganti headerx di elemen halaman....
bisa langsung unggah dar hd,fd mmc n cmw jenis memori.......

Unknown mengatakan...

mantap ner tutorialnya
by www.kubifree.blogspot.com

Dunia91 mengatakan...

untuk edit nya ada cara lain gak?
soal nya style sheet css saya gak ada yang kek gitu?

ridho rizky mengatakan...

aku baru ne mas bro di blog.
jadi mau numpang nanya,
gmna caranya bikin header blog dengan kreasi sendiri mas bro?
thanks sblum nya

Septiaji Agung Santosa mengatakan...

thanks atas infonya, berguna
(PENGETAHUAN PINTARs BLOGWALKING)

IRAWAN mengatakan...

makasih infonya...

kamiliya mengatakan...

Knpa ga bsa di terapkan ya...mklum saya pemula n tlong ksh masukan ma smuanya mengenai blogku...http://kamiliyazahirah.blogspot.com

Randi mengatakan...

Makasih tips nya mas bro. Artikelnya menjelaskan step by step yg sangat mudah diikuti, meski seperti seorang pemula seperti saya. Keep posting (y)