Split header into two columns

This tutorial will show you how to split your template's header into two columns so that you can add your widgets along with your blog's logo. By default, blogger doesn't have any option to split header column into two parts. so here is the how-to guide.

Go to your blogger Dashboard >>Design>>Edit HTML

Don't tick Expand Widget templates

search to left following code in your template [You can search for the code by pressing CTRL + F on your keyboard]

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Test  Blog (Header)' type='Header'/>
</b:section>

Just below the above code, paste the following code

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

It should look like this

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

Now search your template for the following code 

]]></b:skin>

Add the following code just above ]]></b:skin>

#header {display:inline-block;_float:left;}
#header-right {display:inline-block;float:right;padding:15px 15px 15px 15px;}
#header-right .widget {margin:0;}
body#layout #header {width: 50%;}
body#layout #header-right {width: 50%;}

Only one step remains.  Now search you template for 

]]> </b:template-skin>

and just above that, paste the following code

#layout #header {width: 50%; float: left;}
#layout #header-right {width: 50%; float: right;}

Finally hit SAVE TEMPLATE and then go to page elements to see that your header has been spitted into two columns

How to Customize Each Sidebar Differently?

 After successfully customizing Blogger Comment Form and then the About me/Profile widget we have again got something really different this time. Few months back while looking at some word press templates I observed that some Sidebars had each sidebar headers with a different Look. I kept looking for a way through which this trick could be implemented in Blogger and just last week while editing my test bog I came across an interesting fact about Blogger Widgets. All widgets that I added on sidebars had a unique ID assigned to it by Blogger. I used this ID and tried if I could use it to customize the Sidebar Header and amazingly it worked wonders! With this ID I could customize any portion of the widget I wanted. So I am curious to share this brilliant trick with you. Today we will keep it simple. We will learn first on how to customize the Sidebar Headings and in our coming posts we will keep on doing more interesting things to today’s tut. So lets jump on to the tutorial..

First kindly view a demo to see how each sidebar headings have been customized differently,

<center>Live Demo </center>

How To Find out Unique ID Name of each Blogger Widget?

Simply follow these steps,

1. Log into your Blogger Account
2. And click the link that says  View your Blog
3. At your Blog below each widget you will find this Edit key image,
4. Hover your mouse cursor on it and right Click and choose Copy Link Location
5. The link will look something like this,

http://www.blogger.com/rearrange blogID=#####&widgetType=HTML&widgetId=<font color="#0080ff">HTML4</font>&action=editWidget

Copy your Widget ID and keep it save as it will be used in the next part. In my case you can easily see that the widget Id is <font color="#0080ff">HTML4</font>

HTML/JavaScript widgets are usually assigned such ID’s as HTML1, HTML2, HTML3 and so on.

About me widget will have an ID like Profile1 and Link lists widgets have Ids as LinkList1,LinkList2 etc.

The ID’s are case sensitive so use them as they appear.

How to Customize a Widget using its Unique ID?

Now here comes the interesting part. We will now customize the Widget’s Heading Style i.e H2 tag. Customization of other portions of the Widget will be shared in future posts.

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Search for ]]></b:skin>
4. Paste the following code just above ]]></b:skin> ,

#<font color="#0080ff">ID</font> h2{
background:<font color="#008000">#575656</font>;
margin:10px 0 10px 0;
padding:8px 0 8px 10px;
font-size:12px;
font-family: Sans-serif, Arial, Helvetica;
font-weight:bold;
text-transform:uppercase;
color:<font color="#8080c0">#ffffff</font>; text-shadow:0 1px 0 #fff;
}

Now replace <font color="#0080ff">ID</font> with your unique widget ID. To change the background color change <font color="#008000">#575656</font> and to change the Font colour change <font color="#8080c0">#ffffff</font>. May be you will like using our Colour Code Generator Tool

   5. Hit save and you are Done!

View your blog to see the new dress :)

<font color="#0080ff">That’s All!</font>

Putting your gadget above your header

Follow these steps to make it possible for you (or anyone blog administrator) to add gadgets to the area about your blog's heading section:

1  Edit your blog's template   (Design > Edit HTML)

2  Download a full copy of your template, and put it somewhere safe (in case something goes wrong, and you need to restore from it).   (Download full template)

3  Find this code in your template:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE(Header)' type='Header'/>

(You may find it easier to use your browser's search tool, eg Edit>Find in Firefox, to look for a key phrase like "id='Header1')

4  Change it to

<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE(Header)' type='Header'/>

Note that there are two changes made:

• Setting maxwidgets to greater than 1, and
• Setting showaddelement to Yes, instead of No

5  Click Preview, to check that your template is working:
This shows you a view of the screen, but you won't be able to click the items on the preview srcreen.   It's a good idea to do this even for very simple changes, so that you know that they will save correctly.

6  Click Save to apply the changes to your blog's template.

7  Quickly test your blog, to make sure that nothing else was accidentally changed.   At very least, you should click one of each "type" of link on the main page (eg one post title, one page tab, on search button)


You will see that now you can put your gadgets above your header.you can put more then 4 just change the number from 4 to whatever you like.