June 16, 2011

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!

20 comments:

  1. Thank you very much for this!!! It REALLY helped me out!

    ReplyDelete
  2. Your blog tutorials has helped me so much. Thank you!!!!

    ReplyDelete
  3. I've been looking for something like this for months, and this is the best I've found (and by best, I mean understandable and actually works)! Thank you :)

    ReplyDelete
  4. SOOOO helpful! Just what I was looking for! I was lost! thank you!

    ReplyDelete
  5. Hai Dani, can i know how to edit the "pages" tab.. For example, http://simplyfirstgradefun.blogspot.com/ like in this blog.. Thank you.. =)

    ReplyDelete
    Replies
    1. I put the pages at the top of that blog into a navigation bar. The code for that is a bit tricky but I will add it to my list of future tutorials. If you add the "Pages" gadget in your Layout page you can move it to be below the header, but it will not be centered and it won't allow you to add your own unique button behind each title. But in the meantime, you could put it there if you wanted.

      Delete
  6. Thank you for doing these tutorials for us! I am a newbie at making my own blog themes, ( I just started) and I have found a lot of useful sites like yours. It really helps when you have detailed tut's and how to add them to your blogger template's. I also look at "two men and a mommy's" blog also y'all make it simple. Thanks again. I know I am going to have fun doing this. My imagination is running wild as we speak... :)

    ReplyDelete
  7. Thank you so much for this tutorial! I just started a blog and had little idea how to do anything with the template. Your tutorial really helped!

    http://therustyhead.blogspot.com/

    ReplyDelete
  8. Thank you so much Dani! You are so helpful. I linked you up to my blog!

    ReplyDelete
  9. how do i get rid of the big gap between the image and the text?

    ReplyDelete
    Replies
    1. I'm not sure what you mean. Can you send me a link so that I can take a look?

      Delete
  10. WOW! Thanks again! Another treasure on your blog, LOL. I've been looking for tuts on how to design/decorate my blog and finally I found you. Awesome tuts and shares!! Thanks so much!

    ReplyDelete
  11. Hi Dani! Thanks for all your great tutorials. Blogger won't let me leave the Title field blank for the Search gadget, please help!

    ReplyDelete
    Replies
    1. Sometimes it does that to me too. If that happens, I just put a period in the Title field. It still shows a dot on your blog but it's not very noticeable. Hope that helps!

      Delete
  12. Excellent web site you have got here.. It's hard to find high-quality writing like yours nowadays. I truly appreciate individuals like you!
    website design

    ReplyDelete
  13. your tutorial help me alot.. thanks!!

    ReplyDelete
  14. this helped me a lot ! Thanks !! I have a question, there are some gadgets that you can't delete the title, what can I do for that? and how will I edit the spacing between the gadget and the one that I made?

    ReplyDelete

Thank you so much for leaving a comment! I would love to answer everyone's questions, but I am a busy mama. I will try my best, but technical questions that require me to study your blog's html are very time consuming for me. I may not be able to answer all of these comments. If you are a reader that knows the answer to a question, please help your fellow readers by offering your advice.