Add a Widget/Gadget on right side of blogger header

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

Suppose if you want to add banner or a search box to the right side of your Blogger header, this post will help you. To add banner or a search box to the right side of Blogger header, we need to add extra gadget on right side of 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 on header then that will appear on right side of your Blogger blog header.

3 comments: