LinkWithin Widget Alternative – Howzat: Part II

This article is a follow on from LinkWithin Widget Alternative - Howzat, my three column three story version of the popular related posts with thumbnails widget from LinkWithin.

Here I explain how to make a four column version of the Howzat widget. Howzat is still highly customisable, even allowing you to place it wherever you want, use whatever pictures you want or if you want, leave it out altogether as I have done in my Blogroll post.

Four column Howzat widget screenshot

Like LinkWithin, Howzat allows you to click on a thumbnail to view a related post, but has the added benefit of being visible in Feedburner, Atom and 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.

<table style="margin: 0px auto" border="0" cellspacing="0" cellpadding="0" align="center" height="210"><tbody> <tr> <td bgcolor="#f0f0e9" colspan="4"> <div align="left"><strong>You might also like:</strong></div> </td> </tr> <tr> <td style="cursor: pointer" onmouseover="this.bgColor=&#39;#E3E4FA&#39;" onmouseout="this.bgColor=&#39;#f0f0e9&#39;" onclick="window.location.href=&#39;http://stvincentsdarlinghurstmalenurses.blogspot.com/2010/06/linkwithin-widget-alternative-howzat.html&#39;" 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://lh3.ggpht.com/_tpq91pcqIw8/TLSB7mPohpI/AAAAAAAAJZY/LuPLsc3cdKQ/howzat.jpg" width="100" height="100" /> <table border="0" cellspacing="0" cellpadding="2" width="100"><tbody> <tr> <td valign="top" width="100"> <div align="left">LinkWithin Alternative</div> </td> </tr> </tbody></table> </td> <td style="cursor: pointer" onmouseover="this.bgColor=&#39;#E3E4FA&#39;" onmouseout="this.bgColor=&#39;#f0f0e9&#39;" onclick="window.location.href=&#39;http://stvincentsdarlinghurstmalenurses.blogspot.com/2010/07/open-source-social-networking-widget.html&#39;" 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/TQd8IARY8MI/AAAAAAAAJ5g/b3q3tgQLFYc/Social_Networking_Widget.jpg" width="100" height="100" /> <table border="0" cellspacing="0" cellpadding="2" width="100"><tbody> <tr> <td valign="top" width="100"> <div align="left">Open Source Social Networking Widget</div> </td> </tr> </tbody></table> </td> <td style="cursor: pointer" onmouseover="this.bgColor=&#39;#E3E4FA&#39;" onmouseout="this.bgColor=&#39;#f0f0e9&#39;" onclick="window.location.href=&#39;http://stvincentsdarlinghurstmalenurses.blogspot.com/2010/03/flushed-with-success.html&#39;" 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/TQd-av5qIgI/AAAAAAAAJ50/yBZVeZScaWc/flushed.jpg" width="100" height="100" /> <table border="0" cellspacing="0" cellpadding="2" width="100"><tbody> <tr> <td valign="top" width="100"> <div align="left">Flushed with success - Change Image on Mouseover</div> </td> </tr> </tbody></table> </td> <td style="cursor: pointer" onmouseover="this.bgColor=&#39;#E3E4FA&#39;" onmouseout="this.bgColor=&#39;#f0f0e9&#39;" onclick="window.location.href=&#39;http://stvincentsdarlinghurstmalenurses.blogspot.com/2010/10/random-rotating-header-images.html&#39;" 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/TQeAgSKI3wI/AAAAAAAAJ6I/781Gqrm92Rs/random.jpg" width="100" height="100" /> <table border="0" cellspacing="0" cellpadding="2" width="100"><tbody> <tr> <td valign="top" width="100"> <div align="left">Random Rotating Header Images</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/2010/06/linkwithin-widget-alternative-howzat.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/07/open-source-social-networking-widget.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/flushed-with-success.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/10/random-rotating-header-images.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="4"> <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:

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:
LinkWithin Alternative	Open Source Social Networking Widget	Flushed with success - Change Image on Mouseover	Random Rotating Header Images
Howzat