PARSER: Archived

Showing posts with label Archived. Show all posts

Friday, October 10, 2008

New and Improved "Related Articles" Widget using the new Google's Ajax Feed API

0 comments Posted by xarenina at 11:52 PM

Dear Friend,

As far as I could tell, "Related Articles" Widget is my most successful hack I've done so far for the last two years on the internet. I have seen countless blogs employing this hack. Somebody even said that the hack leverages Blogger users to have the same capability as Wordpress users in that regards.

For this new and improved version, I use the more reliable Ajax Feed API from Google rather than using my own library code. Also, I have added code to eliminate redundant headlines so what you will see is a set of unique "related articles" headlines. I would like to thank Jackbook.com again to help improving the original hack. I've incorporated both fixes from him as well.

I'm going to show you how to add this "Related Articles Widget" to your blog, with just three simple steps!. If you're already installed either one or both of the earlier "Blog List" or the "Latest Posts" Ajax Feed widgets, you can skip step 1 and 2, and just simply cut-and-paste the code from step 3 to your template!

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, and could install it too by following the link. 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 from 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.

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='Blog3' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='nextprev'>
</b:includable>
<b:includable id='backlinks' var='post'>
</b:includable>
<b:includable id='post' var='post'>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
</b:includable>
<b:includable id='status-message'>
</b:includable>
<b:includable id='feedLinks'>
</b:includable>
<b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <h4 id='comment-post-message'><data:postCommentMsg/></h4>
    <p><data:blogCommentMessage/></p>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' style='display: none'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='auto' src='' width='100%'/>
    <data:post.iframeColorizer/>
  </div>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
</b:includable>
<b:includable id='comments' var='post'>
</b:includable>
<b:includable id='main'>



<div class='widget-content'>

<h5>Related Articles</h5>
<div id='data2007'/><br/><br/>
<h6>Related Article Widget by <u><a href='http://hoctro.blogspot.com/2008/10/new-and-improved-related-articles.html'>Hoctro</a></u></h6>

<script type='text/javascript'>

// Incorporating modified by Jackbook to the next line, thank you very much.
var homeUrl = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 8;
var maxNumberOfLabels = 10;
var urlArray = new Array();
<b:if cond='data:blog.pageType == "item"'>
maxNumberOfPostsPerLabel = 15;
</b:if>
<b:if cond='data:blog.pageType == "item"'>
maxNumberOfLabels = 4;
</b:if>
var titleArray = new Array();
var titleTest = 0;

function relInitialize() {
var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";

var test = 0;
// Do not add identical labels from posts
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;

if (numLabel < maxLabels) {
      var url = homeUrl + 'feeds/posts/default/-/'
+ encodeURIComponent(textLabel);
      var feed = new google.feeds.Feed(url);
      feed.setNumEntries(maxNumberOfPostsPerLabel);
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("data2007");
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            titleTest = 0;
            for (var i = 0; i < titleArray.length; i++)
              if ( titleArray[i] == entry["title"] ) titleTest = 1;
            if (titleTest == 0 ) {
              titleArray.push(entry["title"]);
              var div = document.createElement('div');
              var a = document.createElement('a');
              a.href = entry["link"];
              // Adding an if statement to exclude current post.
              // Addition from Jackbook.com. Thank you
              if( a.href!=location.href ) {
                var txt = document.createTextNode(entry["title"]);
                a.appendChild(txt);
                div.appendChild(a);
                container.appendChild(div);
              } // if not home page
            }// if titleTest
          } // for
        }// if result is not error
      }); // feed.load

      numLabel++;
     }
    }
    </b:loop>
    </b:loop>
   }
   google.load("feeds", "1");
   google.setOnLoadCallback(relInitialize);
</script>
</div>

</b:includable>
</b:widget>

We're done! I have installed the new widget on my blog already for you to see.

Important features & notes:

1. To set the maximum of headlines per label, change the number on this line (right now it's 4.)

var maxNumberOfPostsPerLabel = 4;

2. To set the maximum of labels, change the number on this line (right now it's 10.)

var maxNumberOfLabels = 10;

My experience using Labels is that you should try to minimize down each post to just two labels only, then in conjunction with the maxNumberOfPostsPerLabel you will get your list to look more effective.

Until next time,

Hoctro.

Update:

08 Jan 09: Happy New Year to my readers! Hajunik.com puts together a tutorial on how to add more formatting to the hack. It does look inpressive and seamlessly integrated into his blog theme. Please take a look at the tutorial at Ajax Related Posts widget for Blogger

Tuesday, October 7, 2008

"Blog List" Widget

0 comments Posted by xarenina at 5:34 AM

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.

<b:widget id='BlogList2' locked='false' title='' type='BlogList'>
<b:includable id='main'>

<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'>


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");

Tuesday, September 23, 2008

"Latest Headlines" Widget

0 comments Posted by xarenina at 6:29 AM

Dear Friend,

Google tools are just so amazing and innovative. Two years ago I started on my quest of having an AJAX & JSON library for myself to load feeds, now they have it as an Application Programming Interface (API), and then some.

I'm going to show you how to modify the Google Ajax Feed Widget sample to your blog, with three simple steps:

1. Get the key grom Google:

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

2. Next, follow the instructions from this article Hacking Technique: How To Modify and add Widget to the Template, in particular section B.4.

Add this code to the header, right in front of the </head> tag. Remember to replace YOUR-KEY text with the new key.

3. Create a new "HTML/JavScript" widget, then add this line to the content:

<div id="feedControl">Loading...</div>

You can see the new widget on my blog at the moment, in front 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;

}

Good luck and have a nice day.

Hoctro

9/23/08

Update: 10/5/08

To place more than the default of 4 items, look for this line, at the end of step 2,

new GFdynamicFeedControl(feed, "feedControl",

{numResults : 4});

then modify it to become:

new GFdynamicFeedControl(feed, "feedControl",

{numResults : 25});

The maximum value you can put in is 25.

Sunday, September 21, 2008

(Superseded) "Related Articles" Widget

0 comments Posted by xarenina at 3:20 PM

This post is now superseded by a newer "Related Articles" Widget, using Goggle's new Ajax Feed API.

Please click on the link to install this new widget.

Friday, September 28, 2007

Adding a front page to your blog

0 comments Posted by xarenina at 7:40 PM

Please click on the title to go to the archived page.

Monday, May 28, 2007

Andreas02 Template

0 comments Posted by xarenina at 5:37 PM

Please click on the title to go to the archived page.

Note:
The template has some pictures and CSS files that no longer exist. First you need to download the files from Andreas website and upload to your website, then download my template and point to the new locations.

Monday, May 21, 2007

Yet another TabView Application: Latest Posts of Favorite Blogs

0 comments Posted by xarenina at 11:56 PM

Please click on the title to go to the archived page.

Sunday, May 20, 2007

TabView Application: A Blogger Hack Directory

0 comments Posted by xarenina at 10:37 AM

Please click on the title to go to the archived page.

Saturday, May 19, 2007

Introducing TabView Widget - Part 2

0 comments Posted by xarenina at 3:53 PM

Please click on the title to go to the archived page.

Thursday, May 17, 2007

TabView Widget

0 comments Posted by xarenina at 4:57 PM

Please click on the title to go to the archived page.

Wednesday, May 16, 2007

Overcoming the "25 Latest Posts" Limitation

0 comments Posted by xarenina at 2:08 PM

Please click on the title to go to the archived post.

Here is the playground test blog, showing the all posts (by setting the value described in the tutorial to -1):

http://hoctro-playground.blogspot.com/.

Tuesday, May 15, 2007

Overcoming the "25 Recent Comments" Limitation

0 comments Posted by xarenina at 1:29 PM

Please click on the title to go to the archived post.

Here is the playground test blog, showing the lastest 100 comments:

http://hoctro-playground.blogspot.com/.

Saturday, February 3, 2007

What is a widget, after all? (continued.)

0 comments Posted by xarenina at 1:38 PM

Please click on the title to go to the archived page.

Thursday, January 25, 2007

What is a widget, after all?

0 comments Posted by xarenina at 2:00 PM

Please click on the title to go to the archived page.

Sunday, January 14, 2007

Showing Related Articles to your Post

0 comments Posted by xarenina at 12:57 PM

Please click on the title to go to the newly updated Widget (as of 9/21/2008).

Wednesday, December 13, 2006

Showing Headlines by Labels

0 comments Posted by xarenina at 10:41 PM

Please click on the title to go to the archived page.

Sunday, December 10, 2006

Adding Google Text Search Utility with Custom Tab Results

0 comments Posted by xarenina at 6:39 PM

Please click on the title to go to the archived page.

Tuesday, November 21, 2006

"Listing of Contents" Widget

0 comments Posted by xarenina at 10:00 AM

Please click on the title to go to the updated page.

Monday, November 20, 2006

How To Modify the Blogger Template - The Core Javacript Library for JSON Widgets

0 comments Posted by xarenina at 8:48 PM

Please click on the title to go to the archived page.

Tuesday, October 31, 2006

Showing Link List or Label Widgets as Tabs

0 comments Posted by xarenina at 9:41 AM

Please click on the title to go to the archived page.

;;

Friday, October 10, 2008

Tuesday, October 7, 2008

Tuesday, September 23, 2008

Sunday, September 21, 2008

Friday, September 28, 2007

Monday, May 28, 2007

Monday, May 21, 2007

Sunday, May 20, 2007

Saturday, May 19, 2007

Thursday, May 17, 2007

Wednesday, May 16, 2007

Tuesday, May 15, 2007

Saturday, February 3, 2007

Thursday, January 25, 2007

Sunday, January 14, 2007

Wednesday, December 13, 2006

Sunday, December 10, 2006

Tuesday, November 21, 2006

Monday, November 20, 2006

Tuesday, October 31, 2006

Blog

Affiliate

Label

Followers