Friday 3 August 2007

Double Vision Sidebar Titles (From my Inbox)

I was wondering if you've written about how to customize sidebar headings? Such as you've done with your very pretty Buttermilk Clouds ones? I'd love to do something similar.

Well, Debbie, I wasn't able to come up with a clean way to do this in blogger beta, but I did a work-around that isn't too bad.

First step:
Put this code in your CSS style sheet between <b:skin><![CDATA[/* and ]]></b:skin>
h3{
margin: 0;
font-weight: normal;
color: #d8f7af;
font-size: 3.2em;
position: relative;
}

h4{
margin: 0;
display: inline;
position: relative;
top: -.5em;
left: 2em;
font-size: 1.8em;
font-weight: normal;
color: #94c258;
}
Change the colors to fit your template. You can even adjust the size if you want. Play with it to get it just right. Save your template.

Second step:
Open your Dashboard | Template | Page Elements | Add A Page Element | HTML/JavaScript. In this box, you won't put anything in the Title box, but in the Content box you will add this code.
<h3>...SIDEBAR TITLE...</h3>
<h4>...SIDEBAR TITLE...</h4>
Of course, after your new sidebar title, add your sidebar content in the same box below the title.

If you are using a Classic Blogger template, it is easy to do this. Follow the first step by putting that code in the CSS style sheet between the <head> and </head> tags. Then follow the second step but paste that code in your template where the sidebar title is.

UPDATE 03/09/08: See A Double Vision Sidebar Title Fix (From My Inbox)

post signature

No comments:

Post a Comment