Adding Buttons to Blogger Header

Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -

If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close -  Edit HTML - Proceed - 

Find for <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> - Paste the following code directly ABOVE it :

<b:section class='button' id='buttonsection' showaddelement='no'>
<b:widget id='Image999' locked='false' title='' type='Image'/>
</b:section> 

Refer to the image below to see the code in place.

Step 2:

Now go to Page Elements/Layout - Picture (at the top) - Edit - Uncheck 'Shrink to Fit' - Upload your image either by choosing 'From Your Computer' or 'From the Web' - Once uploaded fill the Link field - Save.

Leave other fields blank and click on Save. It is very important for you to insert a link to avoid unnecessary gaps between your header and your navbar.

Step 3:


If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog. 

#Image999{
width: 268px; /*Insert width here*/
position: relative;
top: 70px; /*Adjust position*/
left: -20px; /*Adjust position*/
z-index: 100;
}

#Image999_img{
border: outset white;
}

#buttonsection{
height: 0;
}

You have to adjust the above code to fit your button.

1. First, find out what is your button's width. You can do this by going to the image file in your computer - Right click - Properties.

2. Replace 268 in Line 2 with your image's width.

3 Use 'top' and 'left' CSS attributes in Line 4 and 5 to position your button. It is noteworthy that what you see in Template Designer is not what your final outcome will look like. So you might want to hit on 'Apply to Blog' and check your blog for real if the button is where you want it to be.

And that is all. Simple right? Tested with IE8, Firefox 3.6.12, Opera and Google Chrome. Have fun!

Update
Adding more than one button




It's easy actually. Assuming you've attempted to add a single button, I will just briefly go through the method to add more than one button. In this example, I'll be adding 3 buttons. So instead of the HTML code used in Step 1, this is what I'll be using:

<b:section class='button' id='buttonsection' showaddelement='no'>
<b:widget id='Image999' locked='false' title='' type='Image'/>
<b:widget id='Image998' locked='false' title='' type='Image'/>
<b:widget id='Image997' locked='false' title='' type='Image'/>
</b:section>

Go ahead and upload your pictures, then use this CSS code instead. The only additions are the code for the extra two buttons.

#Image999{
width: 268px; /*Insert width here*/
position: relative;
top: 50px;
left: -10px;
z-index: 100;
}

#Image999_img{
border: outset white;
}

#buttonsection{
height: 0;
}

#Image998{
width: 268px; /*Insert width here*/
position: relative;
top: -90px;
left: 500px;
z-index: 100;
}

#Image998_img{
border: outset white;
}

#Image997{
width: 268px; /*Insert width here*/
position: relative;
top: -110px;
left: 240px;
z-index: 100;
}

#Image997_img{
border: outset white;
}

Of course, you'd have to adjust the width and position of your additional buttons. Have fun!