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.
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 :)
I put it on my blog!
ReplyDeleteLittle did I changed the dimensions and I am very happy.
View: http://zezamix.blogspot.com/
Thank You very much :)
I did all of this and the gadget i placed was under the header and not on the right side :((
ReplyDeleteIn the layout section it will appear below the header but It will appear on the right side of your blog.
DeleteThanks for this, I tried it and it worked...but there was a side effect
ReplyDeleteI have a page list underneath my header, which is a page width navigation bar with a number of page links on it. After I applied your code, the page list worked in safari & IE & Chrome, but in Firefox the page list is aligned to the right under the other gadget...
Is there any way to have the right aligned widget and then follow it with a full page width widget that works on Firefox?
What is your site URL? Let me have a look first :)
DeleteSuperb !!! It's working thank you....
ReplyDeletethanks you so much....:)
ReplyDeletethnak you so much i had searching this tutorial 2 weeks but its here i have found today
ReplyDeletethanks Deep Ak
YOU’RE WELCOME :)
Deletethanks a lot ..............................................
ReplyDeleteYOU’RE WELCOME :)
Deletethanks a lot
ReplyDeleteYOU’RE WELCOME :)
DeleteCan i add header right widget in custom template in blogger which has no option to add widget......................??
ReplyDeleteIt is not working. Please give another tips
ReplyDelete