We can see Most of template use a header gadget for adsense unit, search bar, and many more but some time we cannot get it. In the blogger template also we cannot find it. Now i m going to say you how can we pet in in header.
Important!
Before doing anything, you need to back-up of your Blogger template so that if went wrong, you can easily restore the original working template.
For back-up the template, go to Template> "Backup/Restore" and save it
Resize blogger header
Step 1. Go to Blogger Dashboard, click on Template > Edit HTML
Step 2. Click anywhere inside the code area and open the search box by using the CTRL + F keys:
Step 3. Add this code inside the search box, then hit Enter to find it:
Step 4. Replace class='header' with class='header header-left'.
Step 5. Now we need to find - CTRL + F - the following line of code:
Now, let's go one step forward and add an extra gadget section within our Blogger header!
Step 7. Just above <div style='clear:both;'/> (step 6)... add this code:
</head>
Step 9. Just above the </head> tag, add this CSS styling:
Step 11. Go to Layout of your blogger blog and you should see two gadgets on the header area.
You don't have to worry if the Add a Gadget element doesn't appear side by side as every blogger template is different. They might be slightly up or down or sometimes they might overlap each other. Just make sure that you drag the newly created widget just below the Header section.
In that gadget/widget you can add anything like Adsense ads, search boxes, social sharing buttons, or you could, as well, sell that space for advertisement to boost your income.
Important!
Before doing anything, you need to back-up of your Blogger template so that if went wrong, you can easily restore the original working template.
For back-up the template, go to Template> "Backup/Restore" and save it
Resize blogger header
Step 1. Go to Blogger Dashboard, click on Template > Edit HTML
Step 2. Click anywhere inside the code area and open the search box by using the CTRL + F keys:
Step 3. Add this code inside the search box, then hit Enter to find it:
<b:section class='header' id='header' maxwidgets=Note: If you can't find it, make sure that you have no space at the beginning of it.
Step 4. Replace class='header' with class='header header-left'.
Step 5. Now we need to find - CTRL + F - the following line of code:
<div class='header-cap-bottom cap-bottom'>And just above this line, we should see two div tags:
</div>Step 6. Paste the HTML code below just above these div tags:
</div>
<div class='header-cap-bottom cap-bottom'>
<div style='clear:both;'/>
Now, let's go one step forward and add an extra gadget section within our Blogger header!
Add a new gadget/widget element to the Blogger Header
Step 7. Just above <div style='clear:both;'/> (step 6)... add this code:
<b:section class='header-right crosscol' id='header-right' maxwidgets='1' showaddelement='yes'/>Step 8. Now find this tag:
</head>
Step 9. Just above the </head> tag, add this CSS styling:
<style>Note: if your widget is wider than overall area that both elements should occupy, then you might need to add the margin-right property to move it more on the right - see this example:
.header-left{
display: inline-block;
float: left;
}
#header-right {
display:inline-block;
float:right;
}
</style>
<style>Step 10. Press the Save Template button to save the changes.
.header-left{
display: inline-block;
float: left;
}
#header-right {
display:inline-block;
float:right;
margin-right: -20px;
}
</style>
Step 11. Go to Layout of your blogger blog and you should see two gadgets on the header area.
You don't have to worry if the Add a Gadget element doesn't appear side by side as every blogger template is different. They might be slightly up or down or sometimes they might overlap each other. Just make sure that you drag the newly created widget just below the Header section.
In that gadget/widget you can add anything like Adsense ads, search boxes, social sharing buttons, or you could, as well, sell that space for advertisement to boost your income.
ConversionConversion EmoticonEmoticon