Get a free blog widget for your site

Help yourself to my free blog widget - use it for your own site

Would you like a free blog widget similar to the one shown on the right of this page? If your website includes an RSS feed and you know the name of the XML file that provides the feed, you can install such a widget within minutes. No ads on the widget (other than a small link at the bottom to this page on my site, so others can figure out how to do it too), and best of all, you can customize it to your heart's content.

The widget reads your RSS feed XML file each time a page containing the widget is displayed. It displays the heading and first few words of each of the most recent few updated pages. You can control how many words of heading and text, and how many updated pages.

I use SBI or Site Build It! to run my website, and if you do too, you'll find it very easy to install this widget. I've tailored the directions below for my fellow SBI owners (SBIers help each other out a lot!) but if you are a little Web savvy you should be able to figure it out even if you don't use SBI. Note that these directions are for SBI owners who upload their own HTML; if you use BlocKBuilder, I'm not sure you'll be able to get this to work. Also, this widget assumes you have a three column layout.

Here's what you need to do to customize this widget:

Add some entries to your website style sheet. Normally, for SBI! owners, this file is in support-files/style.css. If you want, you can instead put the appropriate style statements inside the SHTML file that contains the widget itself. You can also edit the style settings to work for your particular site design and your own preferences.
Edit some variables in JavaScript in the SHTML file that contains the widget. The things you can control are the number of entries displayed, and the maximum number of words of title and text for each item (the meta description stored in the RSS feed is used for the text of each item).
Include the SHTML file in the third column <div> tag of any page you want to show this blog roll.
Rebuild or re-upload your page and check out the result; then tailor the style sheet or the variables inside the JavaScript as you see fit.

Style sheet entries

You need to add the following style sheet entries to your site-wide style sheet. If you don't want to or can't modify that style sheet, then instead add the text <style type="text/css"> before the snippet below, and </style> after it. To select the text in the box below, then do Select All (Windows users: press Ctrl+A) and then Copy.

div#blog-insertion {
 margin:3px 3px 0px 3px; 
 border: 1px solid #70BF1E;
 padding: 0px;
 vertical-align:top;
 overflow:auto;
}
div#blog-credit{
 margin:0px 3px 5px 3px; 
 border: 1px solid #70BF1E;
 padding: 0px;
 vertical-align:top;
  background-color: #009944;
  color: #FFFFFF;
}

div#bloghead {
  background-color: #009944;
  color: #FFFFFF;
  padding-bottom:2px;
  margin-bottom: 2px;
}
div#blogroll {
    text-align: left;
    padding-bottom: 7px;
    padding-left:3px;
    padding-right:3px;
   font-size:0.9em;
}
A:link#bloglink {
	color: #009944;
	text-decoration:none;	
	background-color: transparent;
}
A:link#blog-source {
   color: #FFFFFF;
   text-decoration:none;
}   
A:visited#blog-source {
   color: #FFFFFF;
   text-decoration:none;
}   
A:hover#blog-source {
   color: #FFFFFF;
   text-decoration:none;
}   
A:active#blog-source {
   color: #FFFFFF;
   text-decoration:none;
}   
A:visited#bloglink {
	color: #009922;
	text-decoration:none;
	background-color: transparent;
}

A:hover#bloglink {
	color: #004422;
	text-decoration:none;
	background-color: transparent;
}

Note that you may want to change the 'color' tags and perhaps some of the width and height tags, depending on the effect you are looking for.

Javascript SHTML file

Create an SHTML file (I call mine blog-widget.shtml) that contains the following text (again, copy the contents of the box below and paste into the SHTML file):

if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else // Internet Explorer 5/6
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET",xmlFile,false);
xhttp.send("");
xmlDoc=xhttp.responseXML; 
var children=xmlDoc.childNodes;
var children=xmlDoc.getElementsByTagName("item");
var max=children.length<maxItems?children.length:maxItems;
var content=document.createElement("div");
content.id='bloghead';
content.innerHTML="Recent updates";
var maindiv=document.createElement("div");
maindiv.appendChild(content);
for (var i=0;i<max;i++) {
	var title=shortenSentence(getChild(children[i],"title"),maxTitleChars);
	var url=getChild(children[i],"link");
	var desc=shortenSentence(getChild(children[i],"description"),maxDescriptionChars);
	 var div= document.createElement("div");
	 div.id="blogroll";
	 div.innerHTML="<div id='blogroll'><b><a id='bloglink' href=\""+url+"\">"+title+"</a></b><br>"+desc+"</div>";
	 maindiv.appendChild(div);
}	
var insertAt=document.getElementById('blog-insertion');
insertAt.innerHTML=maindiv.innerHTML;
</script>

You will need to change the value within quotes for the first variable shown (xmlFile) to match the name of your RSS feed. Do not use the full URL (http://mysite.com/myfeed.xml), instead just the file name (myfeed.xml). You can also change the values for maximum items, and maximum character length of the titles and descriptions of each entry.

Add some code in your third column

At the top of your third colum (typically also stored inside an SHTML include file), add the following right after the third column <div> tag:

I hope you don't mind my sticking a link to this page (the page you're on) in your widget - it's my way of helping more people find out about this widget. I've tried to make it very unobtrusive and it's the only favor I ask of you in exchange for your using this widget. Please note the license terms below.

Include the feed SHTML file

Now all you have to do is include the SHTML file containing the feed script, at the end of the BODY section of each HTML file (after the third-column divs you added above). One way to do this is, if you already have a footer.shtml file that gets included right before the </body> tag, just add the feed SHTML file there. Or, to try it on just one page at a time, add an extra include statement. For SBI! users, an include statement looks like this:

***myfeed.shtml***

Where myfeed.shtml is the name of the include file containing the feed script.

That's it - you're good to go!

Then just upload an HTML page containing the include file, and remember to upload the style sheet (as part of the HTML page upload) and the new include file and any other changed SHTML files. Rebuild your first page and give it a try. If it works, and once you've tweaked the style and JavaScript settings, you can add the new include statement to more of, or all, your web pages, and just do a Quick Reupload for them.

That's it - you should now have a handy, free blog widget on your site. It will only work on the site where the RSS feed file is hosted - meaning you can't show the feed for www.my-first-site.com from www.my-second-site.com (because of JavaScript security rules).

Feel free to contact me if you have any feedback - compliments, complaints, questions, suggestions. I'll try to keep enhancing it as time goes by, assuming people find it useful.

License and Terms

Green Energy Efficient Homes, the author for legal purposes of the blog widget described here, grants you a full license to use and modify this widget free of any charges, on any website of your choosing, provided you maintain and do not modify the link in the widget back to this page. Green Energy Efficient Homes makes no warranties whatsoever about this widget, and any disclaimers in the disclaimers page of our website also apply to the widget!

behavioral targeting

Return from Get a free blog widget for your site to the Green Energy Efficient Homes site home page.

Feel free to link to this page to spread the word about energy efficiency