Add A Gadget On The Right Side Of Blogger Header

A header consists of every single part that appears at the top of your blog. Adding a gadget at the right side of the header is a very good tactic to display ads, social media buttons or a search box besides your blog's title.

So today's tutorial is based on how to correctly split the Blogger header in two parts so you can add any widget besides your blog's title.

Normally we often add a 468*60 size banner to the right side and we therefore need a widget section for it. This trick has already been published on many major blogging sites but Blogger has recently changed the code of their blogger blogs and hence, some tutorials on the web are now out-dated. So lets start the good work:

How to Implement:

1. Go to your blogger dashboard >> Template >> Edit HTML

2. Find the following piece of code: (Press Ctrl+F and copy the below code in the box & press enter)

<a expr:href='data:blog.homepageUrl'><data:title/></a>

Once you find the above code, you will see something like this:

<a expr:href='data:blog.homepageUrl'><data:title/></a>

  </b:if>

</b:includable>

        </b:widget>

      </b:section>

    </div>

    </div>

3. Paste the following code between </b:section> and </div>

<b:section id='header-right' showaddelement='yes'/>

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

So the final code will look something like this:

<a expr:href='data:blog.homepageUrl'><data:title/></a>

  </b:if>

</b:includable>

        </b:widget>

      </b:section>

<b:section id='header-right' showaddelement='yes'/>

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

    </div>

    </div>

We have successfully added a new section. Now we need the widget to appear besides your blog's title (right-oriented). We will achieve this with the help of CSS.

4. Copy the following code and place it before ]]></b:skin>

#header, body#layout #header {width:50%;display:inline-block;float:left;}

#header-right, body#layout #header-right {width:35%;display:inline-block;float:right;padding:15px;}

#header-right .widget {margin:0;}

5. Hit Save template, you're almost done! Now go to your blogger dashboard >> Layout and simply drag the widget you want besides the header (In Layout, it may look like your widget is below the header but when you open your blog, it will appear in the right place)  >> click Save arrangement. You're done!

So this tutorial was all about how to split the header in two parts. I hope, this tutorial is easy to implement, if you still having some queries then feel free to comment below. Thanks :)