Simple Blogger Tutorials

How to Add Extra Gadget/Widget Section to Blogger Header

Let’s go one step forward and add an extra gadget section within Blogger header in new template designers. Within this gadget section you can add anything that you may want, for example, subscribe buttons, search box or your AdSense ads within the Blogger header.

New header (widget) section

Demo

In previous tutorial I have told you how to resize Blogger header which is needed to be done first to give space for the extra gadget to fit in. If it is done then follow the below steps.

Step 1: Go to Template tab and backup your template. Click "Edit HTML" button.

Step 2: Find for the below codes which you have edited and implemented in previous tutorial:

<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'>
<b:section class='header header-left' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog's Title (Header)' type='Header'/>
</b:section>
<div style='clear:both;'/>
</div>
</div>

Now find for <div style='clear:both;'/> which is marked in red in the above codes and before it add:

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

So the full code will be:

<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'>
<b:section class='header header-left' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog's Title (Header)' type='Header'/>
</b:section>
<b:section class='header-right crosscol' id='header-right' maxwidgets='1' showaddelement='yes'/>
<div style='clear:both;'/>
</div>
</div>

Step 3: Find ]]></b:skin> and before it add the following CSS:

.header-right {
 display: inline-block;
 float: right;
 width: 400px;
}

Now all is left is to change the width. Increase or decrease the pixels according to your needs, for example, for Leaderboard AdSense ads, the width will be 728 pixels.

Step 5: Save your template. Go to Layout tab and from there you can add a new gadget to the newly created extra gadget section within Blogger header. If you find that the extra gadget section is created just under your Header gadget as shown in the image below, you need not to worry about it as when you will view your blog, it will appear side by side as it's seen on the demo.

New gadget section beside blogger header
Important

It is only for new Blogger templates. If you have a layout template then you should follow the tutorial about adding sidebar (Gadget Section) to header in Blogger.

20 comments :

  1. thanks bro so much you help me alot.

    ReplyDelete
  2. this widget appear under the blog title and i need side by side widget, well thanx for this - its working

    ReplyDelete
  3. I also can see that the gadget section for your blog is side by side. :)

    ReplyDelete
  4. I got it all in place but I am having one problem. The widget in the new section is aligned to the left and being placed at the top left corner. It seems as though it is ignoring the information we put in before .

    ReplyDelete
  5. Place the CSS as told in step 3.

    ReplyDelete
  6. Hello Raju, I've been visiting your tutorials and it's very helpful. But I can't make this one work. My widget is floating on the lower left side of the header, not on the right side leveled with header. I did all the steps but still same results. I hope you can help me.

    Thanks and more power!

    ReplyDelete
  7. Post your blog's URL or make your Blogger profile publicly available so that I can reach your blog.

    ReplyDelete
  8. Wow, thanks for your very quick response. But actually I may have figured out what I forgot to include. I will give you an update if I've finished applying this tutorial or if I have encountered a problem. Thanks again!

    ReplyDelete
  9. Hi Raju, could you help me on this one. I can't figure out on how to put the widget(I tried putting an Adsense half-banner) on the right side of the header. Here's my blog: www.icookraw.com, which is still on the development stage as I have just started this blog yesterday. I hope you can help me on designing this one. Thank you very much!

    ReplyDelete
  10. It seems that there are some typos in my tutorial which I will be fixing soon. Come back after 24hrs and redo every step to let it work properly. Until then, revert your template.

    ReplyDelete
  11. Hi! Is there a way to split this extra gadget in 3 parts? thanks.

    ReplyDelete
  12. Yes, it can be done but I didn't wrote any tutorial about it.

    ReplyDelete
  13. how to add double widget side-by-side under the "Blog Posts"?

    ReplyDelete
  14. If you are on the new templates then I didn't wrote any tutorial about it, but if you are on old templates then use the search form above to find it.

    ReplyDelete
  15. do i get adsense without having domain for my blog. i wanted to show adsense in header. http://teckblazer.blogspot.in

    ReplyDelete
  16. Sign up for AdSnese first (www.google.com/adsense).

    ReplyDelete
  17. how do i level the adsense and the header it is sitting below at the moment
    http://justfootballhighlights.blogspot.com/
    thanks

    ReplyDelete
    Replies
    1. "Proper resizing" is your answer.

      Delete
  18. I can't seem to find any of the CSS codes in my HTML :( Any help?

    ReplyDelete
    Replies
    1. Are you sure that you're working on the new templates (as mentioned above)?

      Delete

Don't SPAM! Read comment policy.

Like