Add a Widget/Gadget on right side of blogger header

How to Add Widget/Gadget on right side of Blogger header :

Suppose you want to add a banner or search box to the right side of your Blogger header. This post will help you achieve that. To add a banner or search box to the right side of the Blogger header, we need to add an extra gadget on the right side of the Blogger header.

Follow below steps to add Widget/Gadget on right side of Blogger header

Step 1 : Go to Blogger Dashboard

Step 2 : Click on Template

Step 3 : Click on Edit HTML and tick expand widget templates

Step 4 : Find below lines in your template code
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='seo (Header)' type='Header'/>
replace with below 2 lines

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='your blog title (Header)' type='Header'/>

and paste below lines after above to lines


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

and the search for  ]]></b:skin> and paste below code above it

#header, body#layout #header {
width:45%;
display:inline-block;
float:left;
}
#header-right, body#layout #header-right {width:30%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}
Step 5 : Click on Save template

Now, go to your Blogger layout and add a new gadget to the header section. This gadget will appear on the right side of your Blogger blog header.

3 comments: