Double Vision Sidebar Titles (From my Inbox)
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{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.
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;
}
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>Of course, after your new sidebar title, add your sidebar content in the same box below the title.
<h4>...SIDEBAR TITLE...</h4>
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)
Labels:
Blogger Beta,
Classic Blogger,
Design,
Sidebars
19 Comments:
Hallo Annie cloud, nice to read ur post, i was follow many hack actualy from ur blog, can i link ur blog annie....
Budi Wiharto
@Budi, glad to hear you have been able to use ideas from my blog!
I would love a link back to my blog! Have youc considered joining BlogU Students Blogroll?
Annie,
Very good to see you back to blogging. Missed your tips for so long!
ram.
nice to see you back Annie.
thank you very much!
glad you are back! I just put in the pretty sidebar titles. Thx so much.
Oh, that was too easy.
But I wonder if you know... It was easy for me to do it on the HTML elements, but if I try to put a title above, let's say, the Archive, I get this dotted red line between the archives title and the archives...
I'm sure it's simple to get rid of the line (it comes with the Minima design), but I kind of like it elsewhere on the blog. My life is so complicated. Can you think of a way around it?
@People in the Sun, Yes, it can be fixed. I went ahead and did a post.
A Double Vision Sidebar Title Fix (From My Inbox)
These are a lovely touch, thank you Annie!
hi annie,
luvly double vision headings,like the one at buttermilk clouds site.
i tried to do it twice (in case i did it incorrect on the first go) but the double vision does not seem to work on my blog. and yes, i did follow the two part procedure as you clearly instructed. there was no script error message at the blogger template on both attempts.
could i understand how to get it done right.
i use bloggers rounders4 template and i have added a 3rd. column.
thank you, wind mill
hi annie,
the "double vision" looks luvly as seen at buttermilk cloud.
i tried doing it twice (following the part one and part two instructions you gave) at my blogsite but it failed to produce the effects. i am using blogger rounders4 template and i have added a third column to it. i would love to the "double vision" for my sidebar titles. could you please advise me how i am to do it correctly.
p.s.
i think the link code to BlogU given on your blogsite, it does not work with the ripway URK. I tried several times but the icon failed to show. so i uploaded the image to my photobucket account and now it works.
cheers!
wind mill
BlogU
@ϢįńďḾįłł, Glad you got it working.
Which link doesn't work? I would like to fix it.
hi annie,
you said: @ϢįńďḾįłł, Glad you got it working.
me: 1. the "double vision" did not work on my blogsite. wish you could help me to make it work on my blog. the "double vision" looks sweet.
2. the BlogU link button worked after i changed the img src to photobucket where i uploaded the icon to get the URL link.
you said: Which link doesn't work? I would like to fix it.
me: annie, it's the one in the scroll box where you give the code to be copied and pasted in a html page element. it shows under the title "Grab this button". The code failed to materialise.
cheers!
Wind Mill
BlogU
I love your blog! I've been following it for months and using various things from it! I couldn't find this mentioned, so forgive me if it is. I love your Double Vision titles--I am planning to make my own graphics in photoshop. And I don't know how to add it without it being a separate element and making the dashed line (or whatever) in between--as mentioned above. Can you help me out? I've seen it done, but I can't figure it out! Thanks so much!
Sarah
@Sarah, I don't quite understand what you are asking. If you could send an example of what you are striving for, maybe I can help!
Glad you like my blog!!
Annie, It's me again. :) I just realized that I could just do the whole page element as an html/javascript element--including the links and everything. I just didn't want to have to redo my links.
So basically, if you new of any workaround, that would be awesome... otherwise, I'll just use the html option.
And now I just realized I wouldn't know how to do this with other widgets (recent comments, archive, etc). So yeah, am I making any sense? probably not!
I should just email you! Sorry!
@Sarah, I lookedd at the examples and I would suggest using a widget as the title. It would have the image in the widget (with no title). Then following it would be the real widget with the widgetty stuff in it! I'm tired and I know I'm not making sense.
Annie, that makes perfect sense and would be easiest. The only problem then is the divider line between the image widget and the widget widget. I hope I'm not making you think too much and making you tired! :) So, getting rid of that line would make it all beautiful and nice, but I don't know how or if it is possible. (which, surely it is right?) I'll try to play around some more tonight. Thanks for your help so far.
@Sarah, look for this code:
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
and then remove:
border-bottom:1px dotted $bordercolor;