Adding a search box, an ads, or a picture on the right of your blog header can help achieve significant stylistic effects. Therefore, this articles will describe how to add any gadget/widget inside your blog header.
Step 1: Sign in to your blogVisit Google Blogspot home page at: http://blogspot.com/ or http://www.blogger.com/ and sign in with your Google account.
Step 2: Locate the id of your blog header gadget
When you sign in to your blog, you are presented with the main dashboard. You can then click 'Design' link under your chosen blog title.
You can click 'Edit HTML'. Before modifying your blog html code, it is essential to back up your current blog template. So that if any mistakes happen you can easily restore the working template. To back up your blog design, click the ‘Download Full Template’ link below the ‘Backup / Restore Template’ tab and save the XML file to your computer.
If you have already add the Blogger header gadget then it's id would be 'Header1'. So search for 'Header1'.
Step 3: Add a new section below Blogger header section
The next step would be adding an extra section below the closing </b:section> tag of the section containing the header gadget. This new section will be used to contain the extra gadget/widget. You will also need to insert a div clear tag below the new section. Therefore, you header code will look like the following:
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='false' title='How to articles &amp; tutorials (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header-right' maxwidgets='3' showaddelement='yes'>
<!-- Your gadget/widget code may be placed here -->
</b:section>
<div style='clear: both;'>
</div>
Step 4: Add Custom CSS to your blog
Add your modified CSS codes to your blogger blog html template (click here) :
#header {width:20%;float:left;}
#header-right {width:80%;float:right;}
#header-right .widget {margin:0;}
#header .widget {margin:0;}
Depending on your blog layout you can change the widths of the header (#header) and the gadget inside the header (#header-right) .
Step 5: Add a new gadget/widget and drag to the new section
Click Design -> 'Page Elements'. Now you should see the new section on the right of your Blogger blog header gadget.
No comments:
Post a Comment