Photobucket Photobucket Photobucket Photobucket

Rabu, 13 Juli 2011

Nambah Gadget Disamping Header

Selain Menambah Gadget diatas/dibawah Header, kita juga bisa nambah gadget disamping header... mungkin sodara² sering ngelihat iklan di samping header dan ingin membuat blog sodara² seperti itu.... berikut caranya...

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.
4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.
5. Cari kode yang sama atau mirip dengan kode berikut :
/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}

.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

.Header h1 a {
color: $(header.text.color);
}

.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);
}

.header-inner .Header .titlewrapper {
padding: 22px $(header.padding);
}

.header-inner .Header .descriptionwrapper {
padding: 0 $(header.padding);
}
Catatan :
Setiap template biasanya berbeda kodenya, 
yang penting perhatikan kode - kode yang ada pada bagian (/* Header)

6. Ganti kode diatas dengan kode dibawah ini :
/* Header
----------------------------------------------- */
#header {
float:left;
width:40%;
margin: 0px;
text-align: center;
color:#ffcc66;
}

#header2{float:left; width:60%;}
7. Kemudian silahkan anda cari lagi kode yang sama atau mirip dengan kode berikut :
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TITEL BLOG ANDA (Header)' type='Header'/>
</b:section>
</div>
8. Ganti kode diatas dengan kode dibawah ini :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TITEL BLOG ANDA (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='4' showaddelement='yes'/>
<div style='clear:both;'/>
</div><!-- end header-wrapper -->
10. Simpan Template.

Nah.... jadi deh....,
Selamat mencoba dan Semoga bermanfaat....

8 komentar:

Unknown mengatakan...

kok saya gak bisa sob.. semuanya sama sesuai yang di instruksikan,, pas di preview/pratinjau ok-ok aja tapi, pas di "simpan template" kenapa galat ya? lihat blog saya
tolong pencerahannya
tks

Unknown mengatakan...
Komentar ini telah dihapus oleh pengarang.
Unknown mengatakan...

setelah susah payah di coba ternyata bisa juga yach.. :D.. tapi ada masalah lagi sob,, pas upload image (maksudnya mengganti judul blog dengan gambar) kok tulisan nya gak bisa di hidden yach.. pas ane coba pake ini (display:none; visibility:hidden;) di bawah ini yang (hurup tebel, miring)
/* Header
----------------------------------------------- */
#header {
float:left;
width:40%;
margin: 0px;
text-align: center;
color:#ffcc66;
display:none;
visibility:hidden;

}

#header2{float:left; width:60%;}

kok malah ilang sich sob...
tolong bimbingannya.
trims
Mesin Opat

Fadillah Abdi mengatakan...

cara 7 sama cara 8 kok gak bisa diterapkan ya, kenapa tuh bro? ~x(

Unknown mengatakan...

Berhasil...!!!
Bro thanks banget infonya jika berkenan berkunjung ke blog Saya :)

Unknown mengatakan...

makasih broh atas info nya jangan lupa berkunjung ke blog saya y www.paiarieos.blogspot.com

Blogunix mengatakan...

makasih untuk tutorialnya gan, setelah mencoba bebrpa cara akhirnya cocok yang pake cara ini... thanks ya

PSDink mengatakan...

ane gagal :(

Posting Komentar

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