HOW TO PUT AN ADD A GADGET LINK SECTION INSIDE YOUR BLOG`S HEADER

I was inspired to post some tutorials regarding web designs though I'm not an expert when it comes to this topic but I got an idea to share with you everything that I have learned from this past few days upon creating my own design and format. And I have found out that lots of readers kept on searching and asking how they can add anything inside the header of their blogs. It can either be a social media buttons, ad unit or a search box or any widget that you wish to place inside it.



These are the steps:

A.Adding a section inside the header (in html)
1. Log in to your blogger account
2. Go to Dashboard > Design > Edit html
3. Back up your template
4. Leave the Expand widget section unticked
5. Look for the following lines

<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 section, insert the following code right after </b:section>

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

There are now to sections in the header. One with the existing blog title and the other one which is the new section below. Remember to save it then go on step B. ↓

B. Styling the section ( in CSS)

Put the section on a side by side by placing the blog title on the left and the new section on the right. Here we go.....

1. Still on the edit html page, press CTRL-F and locate the code below

]]></b:skin>

2. Add the following lines of codes on top of it.

#header, body#layout #header {width:50%;display:inline-block;float:left;}

#header-right, body#layout #header-right {width:35%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}
Save it.

C.Installing the widget

Now you can add any widget on the newly created  add a gadget link. Just do the normal way when you want to add or install a widget.

1. Go to Design > Layout 

2. Click the new add a widget link and add your widget.