How to create a cool Love Roll widget for your blog?

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

I replaced my old fashion Blog Roll into a stylish looking Love Roll widget. My friends were very excited about this new feature and thanked me to add them in my love roll. It’s an ordinary blog roll with the author’s picture in it. As an addition, it also has a little description; you will see it as a tool tip when you will put your mouse pointer on each person. Now lets see how I created it so that you can create one for your blog too.

Step 1
Capture the images of your friends with image capture software. You can use photoshop or any other image editor you wish. Now edit each picture and choose your size. I’ve choosen little 48×48 pixel square images which will look clean and save my blog’s space. Save each image in your computer.

Step 2
Now that you have your images and data, now it’s time for you to host those images. You have to use an image hosting service like Flickr or PhotoBucket to hose those tiny images. An easy way is to create a new blog post and add those images in the post.

Step 3
Now you will have to create a widget using a website editor. I have used Microsoft front page for this job. Open the program and create a new blank page. Now drag and drop each picture from the image host and sort it as you like. If you want a widget which can be placed in any sized sidebar, then put all of the images one by one like this,

By default, each picture links to the image host. Right click on each image and select ‘Hyperlink Properties‘ then select the web address.

On the same box, select ‘Screen Tip‘ and you will be able to add some details,

Once you have done all of those images, copy the source HTML(without the Head and Body section) and save it.

Step 4
Open your blog editor and add the widget as an HTML element, save and see how it looks.

Here is the code for this widget,

<p>
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" title="THE-DESCRIPTION" target="_blank" href="http://WWW.THE-BLOG-ADDRESS.COM">
<img style="cursor: pointer; width: 48px; height: 48px;" src="THE-IMAGE-SOURCE" alt="" id="BLOGGER_PHOTO_ID_5274386750213772658" border="0"></a></p>

The green part represents each image box. The more images you want the more times you will have to copy the code and keep all of them inside the blue part(paragraph).

Compatibility: This widget is a free sized one and will work on sidebars of any width. I tested it in Wordpress 2.7 and it works. I hope it’ll work on most of the major blog platforms and websites too.

If you run into any errors or need some help on this thing, feel free to leave the response. You can also support me with a Stumble, Delicious or any other ways you want.