"Blog List" Widget


Dear Friend,

I like the new "Blog List" widget from Blogger, where you could add interesting blogs, and see the latest headline from them. More interestingly, they have superb yet easy way to add or remove blogs from the list, namely the "Follower" feature.

While we are on the subject, let me say a warm welcome and thank you to my thirty-four "Followers" so far. I will try to remember all your names, so I could give you more priority in responding to your questions. (I actually more of a "follower", in that respect, for following to know who you are, and what other blogs you are following. I came across several of my fellow Vietnamese too, thân ái chào các anh chị.)

But what if you want to see more headlines from their blogs, in a non-intrusive way? The Google feed widget that I introduced in my earlier post is a gentle answer to that need. The top window of the feed allows headlines and short descriptions to roll through, making your blog to have a sense of liveliness, why taking the least amount of possible real-estate.

I'm going to show you how to add this "Blog List as Feed Widget" to your blog, with four simple steps, assuming you have following some blogs already, by clicking the "Follow this blog" link upon visiting interesting blogs.



Before installing, All I ask for is that you must keep the credit Widget by Hoctro, and not to get rid of it. After all, I spent lots of my personal time on weekends to write these widgets. I'm not asking for money, just a little recognition, so others will know where the widget comes from. Not including my credit on your blog is also a form of plagiarism, and I don't think you want your readers to label your blog as such.






1. Get the key grom Google:

http://code.google.com/apis/ajaxfeeds/signup.html

2. Follow the instructions from this article Hacking Technique: How To Modify and add Widget to the Template, in particular section C.1, and add this CSS style code to the header, right in front of the </head> tag. Remember to replace YOUR-KEY text with the new key.





<script src='http://www.google.com/jsapi/?key=YOUR-KEY' type='text/javascript'/>
<script src='http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js' type='text/javascript'/>

<style type='text/css'>
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");

#feedControl {
margin-top : 20px;
margin-left: auto;
margin-right: auto;
width : 440px;
font-size: 16px;
}
.gfg-title {
color : #612e00;
background-color: #FFF3DB;
}
.gfg-title a {
color : #612e00;
}
.gfg-root {
border: 1px solid #956839;
font-family: "Georgia", sans-serif;

}
</style>



3. Add this code to the widget list, from the Layout->HTML short form, following the instructions from this article Hacking Technique: How To Modify and add Widget to the Template, in particular section B.4.






<b:widget id='BlogList2' locked='false' title='' type='BlogList'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<div id='blog-list-title'>
<h2 class='title'><data:title/></h2>
</div>
</b:if>
<div id='bl2008'>Loading ...</div><br/><br/>
<h6>Widget by <u><a href='http://hoctro.blogspot.com/2008/10/showing-your-blog-list-as-ajax-feed.html'>Hoctro</a></u></h6>
<div class='widget-content'>
<script type='text/javascript'>
<!-- *****************http://hoctro.blogspot.com*****Oct,2008********** -->
<!-- *************Blog List as Feed Widget by Hoctro- Take One******* -->
var feedArray = new Array();
var feedName;
var feedUrl;

<b:loop values='data:items' var='item'>
feedName = "<data:item.blogTitle/>";
feedArray.push(feedName);

feedUrl = "<data:item.blogUrl/>";
var string_b = "blogspot.com";
var iof_b = feedUrl.indexOf( string_b );
if( iof_b != -1 )
feedUrl = "<data:item.blogUrl/>feeds/posts/default";

feedArray.push(feedUrl);
</b:loop>

// Handcode external blog feeds such as Wordpress' here, in two lines of code
// First is the name inside the quote, i.e., feedArray.push("ThemeLib");
// then the url, i.e., feedArray.push("http://feedproxy.google.com/Themelib");
//feedArray.push("ThemeLib");
//feedArray.push("http://feedproxy.google.com/Themelib");

function blogList2008() {
new GFdynamicFeedControl(feedArray, 'bl2008',
{stacked : true, numResults : 3,
title : 'My Blog List', displayTime : 7500});
}

google.load("feeds", "1");
google.setOnLoadCallback(blogList2008);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>



4. Go to Layout->Page elements, and click "Edit" on the newly created widget, then click on Add to List




Select Blogs I'm following, and choose all the blogs by select "all", then exit this widget form.




You can see the new widget on my blog at the moment, at the back of the post area.




To change font, color, etc. modify the CSS styles. I override several the default CSS styles to match those of my blog.



.gfg-title {
color : #612e00;
background-color: #FFF3DB;
}
.gfg-title a {
color : #612e00;
}
.gfg-root {
border: 1px solid #956839;
font-family: "Georgia", sans-serif;

}


Have a wonderful day.

Hoctro
10/7/08

Updates

1. (10/10/08) Add feature to have links outside of blogspot. Just cut-and-paste the link at the "Add url" prompt.

2. (10/13/08) Some blogs outside of Blogspot domain are sometimes working, sometimes not. That is because we are "overloading" what the Blogger "Blog-List" designers' intention. It's just that I like the interface of Blog-List, so I choose to program with it, I could have used a LinkList widget to add links.

But there is a work around in step 3, and you have to manually add the feeds, in pairs:

// Handcode external blog feeds such as Wordpress' here, in two lines of code
// First is the name inside the quote, i.e., feedArray.push("ThemeLib");
// then the url, i.e., feedArray.push("http://feedproxy.google.com/Themelib");

feedArray.push("ThemeLib");
feedArray.push("http://feedproxy.google.com/Themelib");