How to Add Your Own Sidebar Titles

Changing the fonts on your blog titles can really help your blog to stand out. (Read here to learn how to do it.) But if you want to do even more, you can add your own custom titles to your sidebar. Here is an example of custom sidebar titles:

Here's how to do it yourself: (Remember to click on an image to enlarge it.)

1. First, you will need any software that will allow you to create and edit graphics. I am using Photoshop Elements here, but you can apply these instructions to any graphics editing program.

To start, open a new file:

Start with a width of 200 pixels and a height of 100 pixels at a resolution of 72 pixels/inch. If you need to adjust it later, you can. Use RGB Color for web images. If your software allows you to have a transparent background, select Transparent. If it does not, you will have to make some adjustments that I will discuss later in these instructions.

2.  Type the text that you would like in your title. Add any effects or colors that you would like.

3. Add any embellishments or designs to your title.

You can create your own graphics or use clip art or digital scrapbook kits to add your embellishments. Just make sure that you check the terms of use of the creator/designer whose images you use. Some do not allow them to be used for websites/blogs or for commercial use (if your site is a business site).

4. Save your file. If you have a transparent background, save your file as a png. (What's a png? Read here.) If your graphics program does not allow you to save a file as a png, then you will have to do one of the following:

  a. Either alter your image so that it is a rectangle as you see below. Then save it as a jpg file.

OR
  b. Color the background so that it matches the background of your blog and save it as a jpg file.

5. Upload your image onto a site like Photobucket. You will need to create an account, if you haven't already. (It is free at Photobucket.)


6. Now you need the link code for your image. After you upload the image and before you go to the album, select the image and then choose "Generate link codes for selected".

A window will then pop-up:

If you click in the box for the Direct Link, the link will be copied to your computer's clipboard and you can then simply paste it where you need it.

(If you accidentally saved the image before getting the link code and you are now in your album, hover your mouse over your image until you see the option "Share". Click "Share" and then click "Get link code" from the pop-up window. Click the "Direct link" code until it is all highlighted and then copy it by choosing Edit, Copy or by pressing Ctrl-C on your keyboard.)

7. Time to add the code to your blog. Go to the Design tab from your Blogger Dashboard. Make sure you are on the Page Elements page and click "Add a Gadget" from the space that represents your blog sidebar. Choose "HTML/JavaScript". A window will pop-up. Do not type a title in this box. Type the following into the main box:

<center><img src="Direct Link"></center>

Replace the words Direct Link with the link you copied from Photobucket (or whatever site you used). 

Click Save.  

8. Now for a few adjustments. Move the new gadget so that it sits right above the gadget it is the title for. For example, if your title says, "About Me", place it right above the gadget containing your Profile. 

Also, you will need to remove the titles that are already in place. To do this, click on the gadget you have created a title for. In the box containing the title, delete the text you see there and click Save.

Do this for each title that you have created a title image for.

9. Once all images are created and on your blog, you may notice that your blog has dotted lines in between your image and the corresponding gadget. (This is the case with the Blogger Minima template. Other templates may have similar cases.)

If you have the Minima template, do the following to remove the dotted lines. Go to the Design tab and click "Edit HTML". Scroll down until you see the following. (If you can't find it, click Ctrl+F and type the following into the search box.):


    .sidebar .widget, .main .widget {
      border-bottom:1px dotted $bordercolor;
      margin:0 0 1.5em;
      padding:0 0 1.5em;
     }


Change the part in red from 1px to 0px. Click Preview and then Save if everything looks ok.

Click View Blog and you are done! You now have your own custom sidebar titles!