Sunday, April 7, 2013

Blogger tip - How to put a Widget in the right side of your Header

As the title says this post is supposed to be a reproduction of what I did with this blog. This is not anything brand new. But me myself being pretty new to the blogger platform found that the tricks to do this evolved with the platform as the time passed by. So I thought I should keep a first hand documentation of what I did to our readers.

First of all, here is what we are trying to achieve -

If you are curious, yes we can add any widget in that new widget area. In my case I added the custom subscription box. The things you need to do are to edit your template & add some codes as stated hereon.

Step 1: Go to your blogger dashboard. Open the "Template" & click "Edit HTML" button. When open before doing anything copy & save your template for backup purpose. Just use "Ctrl + A" buttons from keyboard or "Select All" from right click menu & copy the content in some safe note.

Step 2: Find the following text inside your template. Use "Ctrl + F" button combination to find inside your web page.

<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="true" title="Your Blog Title (Header)" type="Header">

Step 3: Replace the above text with the following -

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE (Header)' type='Header'/>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

Step 4: Find ]]></b:skin> inside your template & add the following just before or above it.

#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;}

Optionally you may add this in custom CSS inside "Customize">"Advance" menu too.

Actually the procedure is all done at this point. You have the new widget already to work with. However in some cases like mine the widget inside "Layout" won't show where it is supposed to be. But that is not any issue. It works just as fine. Mine shows like this -

So get going & have something cool inside your header too. Happy blogging!

The information sharing blog!   Care to share with us & with your friends!

No comments:

Post a Comment

Any productive or constructive comment or criticism is very much welcome. Please try to give a little time if you can fix the information provided in the blog post.