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.

OR

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! 

Click here to make a request for a future How To post.

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 

Tweet