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 DashboardStep 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'>Step 5 : Click on Save template
<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;}
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.
Thank You !!! for this amazing Tutorial....
ReplyDeleteI can't copy these codes.
ReplyDeleteHi Arvin, It's working now
Delete