How To Add Together A Gadget/Widget Within Your Blogger Spider Web Log Header

Some of you lot mightiness accept noticed this form of placement of AdSense Units or other ads together with widgets inward the header department of the blog, 1 of the nearly pop format beingness the AdSense 468x60 promotion unit.

Unfortunately, nosotros are non ever able to add together widget within the Blogger header equally a Blogspot user. If nosotros are using the Blogger's default template, or whatever other customized template available on the internet, the header unremarkably is locked together with accept no alternative to Add a gadget within it or side past times side to the weblog title.

The argue why about bloggers are using AdSense ads or dissimilar widgets inward a weblog header is because of its maximum of position out of impressions. For instance, when a visitor goes to a page, this volition endure the firstly identify where he would laissez passer on a firstly await together with this makes it 1 of the hottest spots inward our blog.

But how nosotros tin dismiss add together a gadget within Blogger header - endure it a AdSense unit, a search bar, social sharing buttons, or a widget? By but adding a department inward the blog's header. First off, to laissez passer on infinite for the extra gadget to tally in, our blogger header should endure resized.

Important!

Before anything, delight brand a backup of your electrical flow Blogger template thence that anything goes wrong, you lot tin dismiss easily restore the master copy working template.

To brand a back-up, larn to "Template" together with await for the "Backup/Restore" push on the upper correct side. Clicking on this push volition prompt you lot to relieve your existing template equally an XML file to your difficult drive. You tin dismiss modify the cry of the file together with select the location to ensure it is slowly to discovery if you lot take away to purpose this later.

Resize Blogger header

Step 1. Go to Blogger Dashboard, click on "Template" together with hitting the "Edit HTML" button.

Step 2. Click anywhere within the code expanse together with opened upwardly the search box past times using the CTRL + F keys:

Step 3. Add this HTML code within the search box, together with then hitting Enter to discovery it:

<b:section class='header' id='header' maxwidgets=

Note: If you lot can't discovery it, brand certain that you lot accept no blank infinite at the outset of the line.

Step 4. Replace class='header' amongst class='header header-left'.

Step 5. Now nosotros take away to discovery the next business of code:

<div class='header-cap-bottom cap-bottom'>

And exactly to a higher identify this line, nosotros should encounter ii div tags:

</div>
</div>
<div class='header-cap-bottom cap-bottom'>

Note: if you lot accept a custom Blogger template, you lot may non discovery the codes to a higher identify together with instead encounter the </b:section> tag correct after the code from mensuration 3. In this case, you lot take away to add together the codes from mensuration six together with seven correct after the </b:section> tag.

Step 6. Paste the HTML code below exactly ABOVE these ii div tags:

<div style='clear:both;'/>

Now, let's larn 1 mensuration frontwards together with add together an extra gadget department within our Blogger header!

Add a novel gadget/widget chemical gene to the Blogger Header

Step 7. Just to a higher identify <div style='clear:both;'/> (step 6)... add together this code:

<b:section class='header-right crosscol' id='header-right' maxwidgets='1' showaddelement='yes'/>

Step 8. Now discovery this tag:

</head>

Step 9. Just to a higher identify the </head> tag, add together this CSS code:

<style>
.header-left{
display: inline-block;
float: left;
}
#header-right {
display:inline-block;
float:right;
}
</style>

Note: if your widget is wider than overall expanse that both elements should occupy, together with then you lot mightiness take away to add together the margin-right belongings to deed it to a greater extent than on the correct - encounter this example:

<style>
.header-left{
display: inline-block;
float: left;
}
#header-right {
display:inline-block;
float:right;
margin-right: -20px;
}
</style>

Step 10. Press the "Save Template" push to relieve the changes.

Step 11. Now larn to "Layout" of your blogger weblog together with you lot should encounter ii gadgets on the header area.

Don't worry if the "Add a Gadget" chemical gene doesn't seem side past times side equally every blogger template is different. They mightiness endure slightly upwardly or downwardly or sometimes they mightiness overlap each other. Just brand certain that you lot drag the newly created widget exactly below the "Header" section.

As I said before, the header department could endure 1 of the nearly valuable places inward a blog. In that gadget/widget you lot tin dismiss add together anything similar AdSense ads, search boxes, social sharing buttons, or you lot could, equally well, sell that infinite for promotion to boost your income.

Share this post