11.27.2010

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!

4 comments:

  1. lovestitchNovember 28, 2010 at 4:26 AM

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

    Have a great weekend!

    LoL, xxx

    ReplyDelete
  2. Melissa WilliamsJuly 10, 2011 at 9:51 AM

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

    http://firstgradeframeofmind.blogspot.com/

    ReplyDelete
  3. UheartmevsDecember 13, 2012 at 7:05 AM

    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

    ReplyDelete
  4. nandreasFebruary 27, 2015 at 12:15 AM

    MISSION: PROVIDE ASSISTANCE GRANT FOR OVERCOMING THE WORLD SOCIAL WELFARE.
    VISION: SCHOLARSHIP ASSISTANCE, WELFARE SOCIETY, THE PROMOTION ORGANISATION & CAPITAL COMPANY
    http://www.okeynotes.com/group/106

    ReplyDelete

Subscribe to: Post Comments (Atom)
Related Posts with Thumbnails