Using an Image as the Sidebar Title
I love the effect of that an image gives as the sidebar title. It is such a simple thing to do. First things first. You will need a suitable image
OK. We have an image or two ready to go. My title image is for links, so I will show you how to do a widget for links. Open your Dashboard | Layout | Page Elements | Add a page element | HTML/Javascript. Add the following code to the window:
<img src="TITLE IMAGE URL"/>You can add as many links as you want by opening (edit) the widget and adding this code:
<a href="LINK URL" target="_blank">LINK TITLE</a><br/>
<a href="LINK URL" target="_blank">LINK TITLE</a><br/>
<a href="LINK URL" target="_blank">LINK TITLE</a><br/>for each new link. It certainly is a fun way to dress up your sidebar and coordinate it with other design elements in your blog.
36 Comments:
Thanks for the tip. I am experimenting with this idea on my test blog now. But is it possible to use this in widgets like blog archive or labels?
@Farah, I would piggyback 2 widgets...1 or the title image and the other for the archive or labels. (Of course, don't put a 'real' title on either widget.)
this is new tutorial for me, thanks
Ha, great minds think alike. I just posted about this exact same thing on my own blog, only for post titles. Good one, Annie.
@dcloud, too funny! I have put images in post titles in some of my templates that I offer. I like that effect.
Nice!!! Thanks for the awesome little tutorial!! It looks great!
I have put images in post titles in some of my templates that I offer. I like that effect.
Loved this! Worked like a charm at my little spot. Thanks for the tutorial :) Check it out here
wow .nice idea.the cool effect make me happy.thanks a lot for the tutorial.waiting for your next one.
Awesome tutorial. I look forward to trying this on some of my blogs.
YOUR TUTORIAL TO CUSTOMISE THE HEADER OF BLOGSPOT IS REALLY NICE I WOULD LIKE TO CHANGE MY TITLE TAG ALSO DO YOU HAVE ANY TRICK FOR IT.
Free web hosting
seo
I am experimenting with this idea on my test blog now.
Hi Annie, :D
On homepage of my blog, when i click " 9 comments", a popup menu comes up for bloggers to write a response.. but i want that when a blogger click " 9 Comments", it goes to the Item/individual post (preferabbly at the bottom section already scrolled to the people's comments).
Basically, exactly likes yours.
Is that possible? What code would i need to change? Thanks much
This will make my blog looking cool I think if i can add some picture as a border.Thanks for the tips.
@Lisa, See Inline Comments for Blogger!
Annie, just stumbled upon your blog.
i was wondering how to place a tiny icon image next to the "Comments" which appears at the end of each post. Like for example, it says "3 comments" so to make it "3 comments (icon)"
Or also, if its possible to have the "3 comments" appear on top of the image?
Thanks
Thanks for the tip. I will implement this on my new blog.
@The Real, Look at this post: Pretty up the "Business End" of your Post!
well seems like a new idea to me..thanks ;)
I feel like a child in a candy shop! Wonderful post, wonderful blog, I am sure to learn a lot here.
I understand how this sort of code would work for HTML widgets..but how about widgets that are "preprogramed" where the title for ARCHIVES or RECENT POSTS have no area for html codes to edit it. Wonder how this would work?
@anynymous, then I would use the widget before it for the image and it would serve as the title for the labels or recent post widget that follows it. (Of course leaving the title field of those widgets blank.)
Hi Annie! I am dying to make personal title images but can't seem to figure it out - even after reading this post. I am using Blogger's programmed link list widget. how do i add my own "Love these Links", etc titles? can I use photoshop to make my titles instead of GIMP?
@loving/living/small, of course you can. I did this post before I had PS, but any graphic program will do.
Annie, I'm new to this....how do you 'piggyback' 2 widgets? When I used 2 widgets, I had a huge space in between, so I'm guessing there is something I'm not doing. The other sidebar titles look just fine.
@Ruth, try this. Look for this code:
.sidebar .widget, .main .widget {
margin:0 0 1.5em;
padding:0 0 1.5em;
}
Change it to:
.sidebar .widget, .main .widget {
margin:0 0 3px;
padding:0 0 3px;
}
You can adjust the 3px to a number that suits your blog.
Thanks, Annie!
Dear Annie,
I use your blog as a bible for building my web.
Altho i'm still new, i feel as tho i know so much...(well not thaaat much.. :) )
Hope to be learning more from you soon.
Thanks Annie, I have used it for one of my websites. Keep up the good work!
Hi Annie,
I love this idea so much! Just a small change and it does bring a whole new feeling to a plain blog!
Just a quick Q -- I would like to also match the rest of the Sidebar Title to an image, i.e. "LABELS" and "BLOG ARCHIVE".
May I know how to edit those?
Greatly appreciate!
Shalom & Be Blessed,
Andrea.
Hi Annie,
You have a good tutorials,
Well I think this is just an HTML image insertion!
When i put a Feed Widget or Any widget!
You provide an Title and the HTML content.(As in your case). Do you have any idea How to? Infront of the title..
Thanks
Yadav
Nice tip, might definitely come in handy in the future.
Also, I really like your tutorials, easy to understand and follow, so keep up the good work.
Annie, I am totally glued to my comfy chair now! Been working on my blog for hours but can't seem to make up my mind. There are so many things I want to do and so little time.
Darin
Thanks,Annie.That's very helpful.
I'm sure people will like using images in their sidebars :)
I know maybe this is a litle late, as I am new to blogging. But thank you for the post and other information you have shared. Thank you very much..