DIY Custom Blog Design Part 5: Sidebar Titles

This is Part 5 of a series of tutorials, if you need to start at the beginning, click here.

 In this part of the tutorial, we will make sidebar titles and I will show you how to install them.

You are going to first make the Sidebar title the same way that you did the Header.  If you need to see that Tutorial, CLICK HERE.  The only thing that you need to do differently, is to make the size of your sidebar titles, with the same width as your sidebar. You can find the width in your Edit HTML page here:

I am going to make all of my titles 180px wide, even though my other sidebar is 220px wide, because I want them to all look uniform.  So here are my sidebar titles saved as PNGs:

Now I am going to add them to my blog by adding a picture gadget to my sidebar:

Make sure that when you upload your Sidebar Title that you do NOT select "Shrink to Fit"
This is what it will look like now:

But I don't want the dotted lines between my sidebar titles and my other sidebar gadgets, so I am going to go back into my Edit HTML page, and I am going to find this:
and I am going to change "1px" to "0px" on the border-bottom:  like this:

And there you have it!


  1. Thank you Carolynn so much for the tutorials, that's really helpful!

    Have a great weekend!

    LoL, xxx

  2. These were so helpful! I've created my new blog with my own preferred designs! Thank you!


  3. Thanks for sharing this great tutorial! I've linked to it in my post about blog re-redesigning (don't want to promote myself, but lots of bloggers seem to want to see the post they've been linked to, so here's the link: http://cocalores.blogspot.de/2012/07/tutorials-ans-ressources-for-your-blog.html). xo Anja

  4. Hi youy have a great blog,as a newbie I'm struggling to revamp my blog. I hope you will do a tutorial on how you did the left sidebar buttons appears to have an image, I mean the Tutorials, designer freebies and the like. I hope you will answer this one. xMevs

  5. I just got a free PSN code from http://psn.freegiftcode.com

  6. I just got a free PSN code from http://psn.freegiftcode.com


Related Posts with Thumbnails