Add banner, Adsense or search box in header

22.05 in Seputar Blog

postingan kali ini adalah cara menambahkan sesuatu di header contohnya : banner, a search bar, social media buttons, Adsense Ad atau semacamnya ...

simple aja saya berikan cara menambahkan lewat edit HTML ,, cara ini saya dapatkan dari blog luar,, jadi bahasanya artiin sendiri iya ..

kalo bingung, pake google translate aja .. bagi orang yg kurang paham ... :D

Here we go ...

1. Adding a section

1. Adding a section (in HTML)
2. Go to Dashboard > Design > Edit HTML.
3. Back up your template.
4. Make sure the Expand Widget Templates checkbox is UNTICKED. 
5. Look for the following lines in your HTML code:
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='My Test Blog (Header)' type='Header'/></b:section>
   
6. To add a section, insert the following code right under (after) it:
   <b:section id='header-right' showaddelement='yes'/><br /> <div style='clear: both;'/>
   
7. So the final code should look like this: <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Blogger Sentral Widget Showcase (Header)' type='Header'/> </b:section> <b:section id='header-right' showaddelement='yes'/> <div style='clear: both;'/>

You now have two sections in the header, the section with the existing blog title on top and the new section below it.

2. Styling the section (in CSS)
Position the sections side by side, by floating the section containing the blog title to the left,  and the new section to the right.
To achieve that,

1. Locate this line of code (you are still on Dashboard > Design > Edit HTML page):
   ]]></b:skin>
   
2. Add the following CSS code right before (on top of) the line.
   <br>#header, body#layout #header {width:50%;display:inline-block;float:left;}<br /> #header-right, body#layout #header-right {width:35%;display:inline-block;float:right;padding:15px;}<br /> #header-right .widget {margin:0; <br>
    

3. Installing the widget 

Now it is time to add the banner, search box, Adsense ad unit or whatever. Do as you’d normally do when you want to install a widget,

Go to Design > Page Elements.

Click the new Add A Gadget link and add your widget.

Note: The header wireframes may not appear side by side for Designer templates, nevertheless they should show up just fine on your blog.

Save and view your blog.

4. Fine-adjusting the position

If the added widget shows up under the blog title (instead of on the same level, on it’s right), go back to the CSS code in step 2.2.
Change header(code line 1) and header-right (code line 2) widths. Experiment with different values until you get it right.

Enjoy!

sumber :