LinkWithin Widget Alternative - Howzat
This article is about, Howzat, my version of the popular related posts with thumbnails widget from LinkWithin.
Howzat is highly customisable, even allowing you to place it wherever you want.
Howzat is highly customisable, even allowing you to place it wherever you want.

Howzat Screenshot
Like LinkWithin, Howzat allows you on to click on a thumbnail to view a related post, but has the added benefit of being visible in Atom or RSS feeds. In this case use the icon at the bottom of each column.
Howzat however, does not automatically add related posts with thumbnails to every post. You have to insert the Howzat code into every post.
Now for the code: Yes, it does look like a lot of gobbledygook. Not to worry though. Just copy and paste the code below straight into the “Edit HTML” section of your blog post, or, into the source section when using Windows Live Writer.
Howzat however, does not automatically add related posts with thumbnails to every post. You have to insert the Howzat code into every post.
Now for the code: Yes, it does look like a lot of gobbledygook. Not to worry though. Just copy and paste the code below straight into the “Edit HTML” section of your blog post, or, into the source section when using Windows Live Writer.
<table style="margin: 0px auto" border="0" cellspacing="0" cellpadding="0" align="center" height="210"><tbody> <tr> <td bgcolor="#f0f0e9" colspan="3"> <div align="left"><strong>You might also like:</strong></div> </td> </tr> <tr> <td style="cursor: pointer" onmouseover="this.bgColor='#E3E4FA'" onmouseout="this.bgColor='#f0f0e9'" onclick="window.location.href='http://stvincentsdarlinghurstmalenurses.blogspot.com/2009/01/skin-cancer-nose-no-boundaries.html'" bgcolor="#f0f0e9" valign="top" width="120" align="center"><img style="margin: 5px auto; display: block; float: none" title="article link" border="0" alt="article link" src="http://lh6.ggpht.com/_tpq91pcqIw8/TA8wVQSBUeI/AAAAAAAAHrY/_fonxKvbJiE/nose1001.7.jpg" width="100" height="100" /> <table border="0" cellspacing="0" cellpadding="2" width="100"><tbody> <tr> <td valign="top" width="100"> <div align="left">Skin cancer nose no boundaries</div> </td> </tr> </tbody></table> </td> <td style="cursor: pointer" onmouseover="this.bgColor='#E3E4FA'" onmouseout="this.bgColor='#f0f0e9'" onclick="window.location.href='http://stvincentsdarlinghurstmalenurses.blogspot.com/2010/03/controlling-your-destiny-come-hell-or.html'" bgcolor="#f0f0e9" valign="top" width="120" align="center"><img style="margin: 5px auto; display: block; float: none" title="Article link" border="0" alt="Article link" src="http://lh4.ggpht.com/_tpq91pcqIw8/TBDbyZq6yFI/AAAAAAAAHsQ/Wc3vVnHV5rY/man22.jpg" width="100" height="100" /> <table border="0" cellspacing="0" cellpadding="2" width="100"><tbody> <tr> <td valign="top" width="100"> <div align="left">Controlling your destiny</div> </td> </tr> </tbody></table> </td> <td style="cursor: pointer" onmouseover="this.bgColor='#E3E4FA'" onmouseout="this.bgColor='#f0f0e9'" onclick="window.location.href='http://stvincentsdarlinghurstmalenurses.blogspot.com/2008/01/family-friends.html'" bgcolor="#f0f0e9" valign="top" width="120" align="center"><img style="margin: 5px auto; display: block; float: none" title="Article link" border="0" alt="Article link" src="http://lh5.ggpht.com/_tpq91pcqIw8/TBDZQnwy-3I/AAAAAAAAHr8/hk_yauQTUMc/Family_and_friends.jpg" width="100" height="100" /> <table border="0" cellspacing="0" cellpadding="2" width="100"><tbody> <tr> <td valign="top" width="100"> <div align="left">Family & Friends</div> </td> </tr> </tbody></table> </td> </tr> <tr> <td bgcolor="#f0f0e9" height="30" valign="top" width="120" align="center"> <table border="0" cellspacing="0" cellpadding="0"><tbody> <tr> <td bgcolor="#f0f0e9" height="15" valign="top" width="15"><a href="http://stvincentsdarlinghurstmalenurses.blogspot.com/2009/01/skin-cancer-nose-no-boundaries.html"><img style="border-right-width: 0px; margin: 0px auto; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Atom/RSS Readers click here to read this post" alt="Atom/RSS" src="http://lh5.ggpht.com/_tpq91pcqIw8/TBEbKM2nmgI/AAAAAAAAHsk/Od3VItQAIB4/readers.jpg" width="15" height="15" /></a> </td> </tr> </tbody></table> </td> <td bgcolor="#f0f0e9" valign="top" width="120" align="center"> <table border="0" cellspacing="0" cellpadding="0"><tbody> <tr> <td bgcolor="#f0f0e9" height="15" valign="top" width="15"><a href="http://stvincentsdarlinghurstmalenurses.blogspot.com/2010/03/controlling-your-destiny-come-hell-or.html"><img style="border-right-width: 0px; margin: 0px auto; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Atom/RSS Readers click here to read this post" alt="Atom/RSS" src="http://lh5.ggpht.com/_tpq91pcqIw8/TBEbKM2nmgI/AAAAAAAAHsk/Od3VItQAIB4/readers.jpg" width="15" height="15" /></a></td> </tr> </tbody></table> </td> <td bgcolor="#f0f0e9" valign="top" width="120" align="center"> <table border="0" cellspacing="0" cellpadding="0"><tbody> <tr> <td bgcolor="#f0f0e9" height="15" valign="top" width="15"><a href="http://stvincentsdarlinghurstmalenurses.blogspot.com/2008/01/family-friends.html"><img style="border-right-width: 0px; margin: 0px auto; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Atom/RSS Readers click here to read this post" alt="Atom/RSS" src="http://lh5.ggpht.com/_tpq91pcqIw8/TBEbKM2nmgI/AAAAAAAAHsk/Od3VItQAIB4/readers.jpg" width="15" height="15" /></a></td> </tr> </tbody></table> </td> </tr> <tr> <td bgcolor="#f0f0e9" colspan="3"> <div align="right"><a style="text-decoration: none" href="http://stvincentsdarlinghurstmalenurses.blogspot.com/2010/06/linkwithin-widget-alternative-howzat.html"><font color="#c0c0c0">Howzat</font></a></div> </td> </tr> </tbody></table>
Recommendations and suggestions:
1. Code in red must be changed to your related post http address.
2. Code in green must be changed to your image http address.
3. Code in blue must be changed to your post title.
4. Code in purple must be changed to an icon hosted by your site.
5. Change background colour code matching - #f0f0e9 – to suit yours.
6. If editing, do so only in “Edit HTML” mode – Blogger Blogs.
7. Make thumbnail images about 2500 bytes and 100 x 100 pixels.
8. Try this in your test blog first.
9. If using the code, retain the credit.
If you have any questions I will endeavour to answer them the best I can. Well, that’s about it, enjoy.
1. Code in red must be changed to your related post http address.
2. Code in green must be changed to your image http address.
3. Code in blue must be changed to your post title.
4. Code in purple must be changed to an icon hosted by your site.
5. Change background colour code matching - #f0f0e9 – to suit yours.
6. If editing, do so only in “Edit HTML” mode – Blogger Blogs.
7. Make thumbnail images about 2500 bytes and 100 x 100 pixels.
8. Try this in your test blog first.
9. If using the code, retain the credit.
If you have any questions I will endeavour to answer them the best I can. Well, that’s about it, enjoy.
| You might also like: | |||||
|
|
| |||
| | | | |||










