________________________________________________________________________________________________________________________________

Selasa, 12 April 2011

meluaskan header blog

Gimana dari keterangan diatas apakah Anda ingin mengubah header blog Anda menjadi penuh dengan body?



Oke langsung saja ke tutorial cara membuat header blog penuh dengan body blog

Pertama yaitu pastikan sudah log in ke blogger blogspot. Lalu masuk menu Layout/tata letak kemudian pilih Edit HTML

Lalu cari code dibawah ini

<body>
<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'> <div id='head-inner'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='For example (Header)' type='Header'/> </b:section> </div>

Nah kalau sudah ketemu pindah code yang berwarna hijau dibawah code <body> dan diatas code yang berwarna merah. sehingga kurang lebih codenya menjadi seperti dibawah


<body><div id='header-wrapper'> <div id='head-inner'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='For example (Header)' type='Header'/> </b:section> </div>
<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>


Kalau langkah pertama sudah selesai sekarang atur juga CSSnya

Cari code CSS dibawah ini


#header-wrapper {
width:880px;
height:100px;
margin-bottom:2px;
padding-bottom:15px;
background:#FFFFFF;
border:1px solid #E0E0E0;

Nah ganti tulisan 880px yang berwarna merah diatas dengan 100%. Dan silahkan otak-atik CSS diatas sesuai bentuk yang Anda inginkan.

Nah selesai deh kemudian save.

HTML diatas berdasarkan template minima default blogspot. berhubung semua template tidak sama HTML-Nya silahkan kamu sesuaikan menurut template kamu sendiri. Silahkan berexperimen sendiri sobat semoga berhasil.

1 komentar:

DPC PPP KAB.WONOGIRI mengatakan...

Bagus banget bos

Posting Komentar

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Dcreators