07/04/2010

How to Make Your Cool Blog Buttons

I spiced up my sidebar from plain text to robin's egg with adding background to sidebar title as shown right here:

aboutplain

It's not as hard as it looks, seriously. If you're into photoshop or any image editing program and own any Flickr or Photobucket account, then you are ready to go. Thanks for Blogbulk for the tutorial.

How-To's:
1) Prepare your image (mine came in size 180 x 60 px), then upload it to image hosting like Flickr or Photobucket.
2) Go to "Layout" on your Blogger Dashboard, then click the tab "Edit Html"
3) If you're using blogger template Minima, then all you got to do is find the 'sidebar' section on HTML editor like this one:

.sidebar h2 { 
background:url(yourimageURL)no-repeat; 
margin:0px; 
padding:0px 0.9em; 
line-height:60px; 
}
But if you're not using minima (like I do) you could just simply copy and paste my code right on 'sidebar' section. It will work out fine, relax. You could just simply adjust 'padding' and 'line-height' to suit your graphic. Since mine is 60 px on height, so it would be displayed best if I wrote '60px' on line height. I set the padding to '0.9em' so the sidebar title won't get too far to the left.
Remember, this code is for adding background to sidebar title only.
4) Click on "Preview" before you save your design
5) Click "Save Template" if you're sure that all the knick-knacks are placed properly.

Now you know how to add those cool blogs ephemeras :)