How To Divide Blogger Header In Two Parts

It is a very good design tactic to display ads, social media buttons or a search box besides your blog's title. Today I will teach you how to correctly split the Blogger header in two parts so you can add pretty much any widget besides your blog's title.

Why this post?

I know very well that the same trick has already been published on many major blogging sites like BloggerSentral and MyBloggerTricks. But Blogger has recently changed the code of their blogger blogs and hence, some tutorials on the web are now out-dated. The speciality of this tutorial is:

1. Up-to-date with current Blogger's code.
2. Easy to implement.

Steps to implement:

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

2. We will add a new section in the header. To do so, find the following piece of code: (Press CTRL + F and copy the code in the box that appears)

 <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>

Note: The code may be slightly different for different Blogger templates. Don't worry though, move on to the next step. 

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> 

4. 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. Copy the following code and place it before/above ]]></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;}

Code Credits: BS

For fine-adjusting of the widget's position, edit the code highlighted in blue. Experiment with different values until you get it right.

5. Hit Save template, you're almost done! Now go to your blogger dashboard >> Layout and simply drag the widget you want below the header (or sometimes even besides) >> click Save arrangement. You're done!

I have implemented the same trick on this blog and added social sharing buttons besides my blog's logo. Here's a screenshot of what it looks like in the Layout tab:

In Layout, it may look like your widget's below the header but when you open your blog, it will appear in the right place. This became possible because of the incredible power of CSS.