Thursday, June 23, 2011

How to Make a Sidebar Header

How to Make a Sidebar Header

What You Will Learn

Ever notice how some people have pretty graphics on top of their sidebar sections? On Small Review I have this:

That's a sidebar header and that's what you going to learn how to make today.

Let's Do This!

Step 1: 

What you need first is a picture. This picture will be the image that shows up as your sidebar header. For me, this is the picture I use:

Once you've decided on your picture, find a place to host it (Photobucket, Tinypic, etc) and save the url.

Step 2:

Go to your dashboard and go to Design ---> Edit HTML

Ignore the Expand Widget Template arrow
At this point you may want to save a copy of your code, just in case!

Step 3: 

Search for "Sidebar Header" or "Sidebar Heading" or something like that. The section should look similar to this:

Click to make larger

Step 4:

Notice the url? Copy and paste your new url into that section.


You might not have a url in your template. Instead, yours may look something like this:

This means that your sidebar header is set to default to a color. You want to change this to make it default to a picture instead. To do this, delete the #fff7f7 (or whatever letters/numbers you have set) and replace it with this:

url ("YOUR URL HERE");

Remember, if you have two sidebars, you must paste your url in BOTH sidebar headings. Your code may say something like "Sidebar 1" and "Sidebar 2" or "Sidebar Left" and "Sidebar Right" or something like that. Just make sure you follow the steps in this post for both sections of code.

Save your changes and you're done! 

The form is anonymous, so please don't feel shy at all!

I'm certainly not an expert, but I'll try my hardest to explain what I do know and research what I don't know.

Click here to read previous How To Posts 


  1. Thank you- I've been wanting to do this for ages! I love all the pretty sidebar headers people have and it makes blogs more individual. This weekend I'm going to try and do all the things from your tutorials I said I'd do now school's less busy :)

  2. Another helpful tip. What would we do without you Small :)

  3. Ooh, very cool! I may get around to doing this someday...

  4. Awesome! Your instructions are so easy to follow. It makes me feel like I can actually do it.

  5. You always make it seem so easy!!!
    Lovely tutorial. :D

  6. Awesome, I was really looking into how to do this a few weeks ago and I'm glad that i can check it out on your page now!

  7. That's another one I really wanted to know. I just need to find a nice little background picture now @-)

  8. Thankyou so much for these- I'm rubbish with computers but I'm so going to try this now!

  9. Thanks! I'm going to get Jake on this as he understands what you're saying much better than I!

  10. You ARE an expert! How are you so smart? Will you design my blog for me? :)

  11. You are filled with awesome knowledge!


  12. You’re so welcome everyone!

    Logan, lol, I’m hardly an expert :P I would totally design your blog for you, but I’m absolutely horrible at creative design/graphics and your blog is perfect just the way it is :)

  13. Somehow none of the html in your pictures up above matches what I have in my blog HTML. I've tried searching for terms and I read through the whole HTML as best I could, but it seems to be laid out in a different way, one that I can't understand. Does your blog need to be a certain template for this to work?

  14. Hi Pica, No, you shouldn't need a certain template for it to work. Your template might look different, but it should still have a section for sidebar. If you want, email me a copy of your template and I'll take a look. :)

  15. Hi! I have a problem with this! I don´t seem to have a section for sidebar headings! And that is kind of weird! could you help me?

    kind regards cecilia

  16. Hey Cecilia! Your blog might not have a sidebar section. Not all codes have them. You can try searching for another code that does have sidebars. Sorry I can't help more!


It's all about friendly conversation here at Small Review :) I'd love to hear your thoughts!

Be sure to check back again because I do make every effort to reply to your comments here.

Because I am absolutely terrible about following through with blog awards, I can't in good conscience accept any more. Thank you very much for thinking of me though!

Spam WILL be deleted. Attacks on myself or other comments WILL be deleted.

Related Posts Plugin for WordPress, Blogger...