Sunday 27 July 2008

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
Title image
that you can change the font on. My suggestion would be to make one using GIMP. This may help: Tutorial: custom header for Blogger using GIMP. Save your original (fontless) image as a template for changes you may make down the line to your sidebar. Look. I made one for Links!

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"/>

<a href="LINK URL" target="_blank">LINK TITLE</a><br/>
<a href="LINK URL" target="_blank">LINK TITLE</a><br/>
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/>
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.


post signature

Saturday 12 July 2008

Scroll Box

quotes1
...What I would like is a place to put widgets, links, webrings, etc in a
box which shows a little of the content and then can be scrolled down
to see the rest. Just like the thing on my site from Technorati, but I
want to add my own content, not just links...
quotes2
Laura wanted a way to organize her sidebar...something more than the now famous Hide/Show hack. What she wanted was the classic scroll box.

Here is how you do just that. Open your Dashboard | Layout | Add a Page Element | HTML/Javascript. Add this code in the window:
<div style="border: 1px solid #000000;background-color:#ffffff; width:200px; height:250px; overflow:auto; color:#555555;"><p> ADD TEXT OR CODE SCRIPT HERE
</p>
You will adjust these bits of code for width and height. Each blog will be different, so play with the numbers until the scroll box fits in the area you want. You will add the code you want displayed here...be it javascript or plain text. You may want to put a <br/> or two between lines of code to separate the items.

If you use a Classic Blogger template, instead of putting the code in a widget, you will put it in your sidebar area amongst the other items that live in your sidebar.

So, go ahead! Gather up all your little do-dads and put them safely in the scroll box and be happy. Have a cup of coffee and admire your work!

post signature