PARSER: Widgets

Showing posts with label Widgets. Show all posts

Tuesday, October 14, 2008

New Translation Widget

0 comments Posted by xarenina at 6:02 AM

Dear Friend,

Today I'm going to share with you yet another useful tool, the Translation Widget. This widget is very up-to-date with the number of available languages, according to the Google Translate Frequently Asked Questions (FAQ)

This tool follows the list and code from the Google's translation page. Since we bloggers know what language we are in, there is no need for the source language. The neat thing about this widget is that it does not use any JavaScript code, yet it translates any post (not just your homepage) you are viewing to the target language, using the powerful expression syntax expr:value='data:blog.url'.

You can see it being installed on my blog. I am very hopeful that my blog will be even more popular to new non-english speaking visitors. I hope your blog will have some more traffic too, after installing this widget.

Again, to install this widget, all I ask from you is to keep the "Widget by Hoctro" text, so others can go to the source and install this widget on their blogs.

Add the code below 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='HTML200' locked='false' title='Translate to your Language' type='HTML'>
<b:includable id='main'>


<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<form action='http://translate.google.com/translate_c?'>
<table id='webtb'>
<tr><td> <select name='tl' style='width: 8em;'>
<option value='ar'>Arabic</option>
<option value='bg'>Bulgarian</option>
<option value='ca'>Catalan</option>
<option value='zh-cn'>Chinese (Simplified)</option>
<option value='zh-tw'>Chinese (Traditional)</option>
<option value='hr'>Croatian</option>
<option value='cs'>Czech</option>
<option value='da'>Danish</option>
<option value='nl'>Dutch</option>
<option value='en'>English</option>
<option value='tl'>Filipino</option>
<option value='fi'>Finnish</option>
<option value='fr'>French</option>
<option value='de'>German</option>
<option value='el'>Greek</option>
<option value='iw'>Hebrew</option>
<option value='hi'>Hindi</option>
<option value='id'>Indonesian</option>
<option value='it'>Italian</option>
<option value='ja'>Japanese</option>
<option value='ko'>Korean</option>
<option value='lv'>Latvian</option>
<option value='lt'>Lithuanian</option>
<option value='no'>Norwegian</option>
<option value='pl'>Polish</option>
<option value='pt'>Portuguese</option>
<option value='ro'>Romanian</option>
<option value='ru'>Russian</option>
<option value='sr'>Serbian</option>
<option value='sk'>Slovak</option>
<option value='sl'>Slovenian</option>
<option value='es'>Spanish</option>
<option value='sv'>Swedish</option>
<option value='uk'>Ukrainian</option>
<option selected='vi' value='vi'>Vietnamese</option>
</select>
<input expr:value='data:blog.url' id='url' name='u' type='hidden'/>
<input name='sl' type='hidden' value='en'/>
<input name='hl' type='hidden' value='en'/>
<input name='ie' type='hidden' value='UTF-8'/>
<input style='width: auto;' type='submit' value='Go'/>
</td></tr></table></form>
<h6>Widget by <u><a href='http://hoctro.blogspot.com/2008/10/new-translation-widget.html'>Hoctro</a></u></h6>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

This line below contains the source language. Since I'm writing this blog in English, my source initial is en. You must change to your source language initial from the the widget code above.

This line below contains the preferred target language. Since I am a "constructive" lazy kind of guy, my preferred target language is Vietnamese vi. You must change this to your preferred target language, such as French ('fr').

<option selected='vi' value='vi'>Vietnamese</option>

Also, change the word "Go" to your language:

One last thing. If you don't want part of your text to be translated, add the class='notranslate' to the tag around it, such as this example below:

<span class='notranslate'>This text won't be translated.</span>

Until next time.

Hoctro

10/14/08

Saturday, October 11, 2008

Translation Widget: Translating your current post right inside your blog!

0 comments Posted by xarenina at 1:28 PM

Dear Friend,

I come across a tutorial on one of the many Google API documentations showing how to add translated text to the same web page. Google also announces very recently that they support more languages for pair translation, Vietnamese included. I'm really glad this is happenning, because I've been jealous with some other languages which enjoy free language translation services for years.

In this post, I will show you how I make the translation available on my blog.

I hope you will be inspired to do the same thing on your blog. If you come up with any other ideas on how to use the Translation API, please post them here as well.

Here are two simple steps to install the widget:

1. Follow the instructions from this article Hacking Technique: How To Modify and add Widget to the Template, in particular section B.4. Make sure the variable var toLang="vi"; shows your target language (in my case "vi" for Vietnamese, you can see all the available languages here: Languages Enum ):

<b:widget id='HTML10' locked='false' title='' type='HTML'>
<b:includable id='main'>
  
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
    <div id='translation' style='font-style:italic;color:navy'/>
<h6>Widget by <u><a href='http://hoctro.blogspot.com/2008/10/transtation-widget-translating-your.html'>Hoctro</a></u></h6>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>

var fromLang="en";
var toLang="vi";

    function transInit() {
      var text = document.getElementById("bodytext").innerHTML;
      google.language.translate(text, fromLang, toLang, function(result) {
      if (!result.error) {
          var container = document.getElementById("translation");
          container.innerHTML = result.translation;  }});
    }

   google.load("language", "1");
   google.setOnLoadCallback(transInit);

    </script>
  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>

2. On your new post, place this pair <div='bodytext'> and </div> around the text you want to tranlate into your favorite language.

If you are going to use this a lot, I suggest making it part of the template so you could have them at the start of a new post. In Settings->Formatting, add this code

Post something new and see if this works. I admit that even though my tutorial is not translating well into Vietnamese, it's much more than I ever wanted. I read the recently published book "Planet Google", the author Randall Stross states that Google uses the statitical machine translation method, using trillions of references to come up with the results. This explains why in certain languages such as French or Spanish, the quality of the translation is much higher than the less frequenly used languages on the net, since Google acquired and indexed far more statistical data for "the Algorithm" to draw from.

Until next time,

Hoctro
10/11/08

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.

Friday, September 19, 2008

Improved "Table of Contents" Widget

0 comments Posted by xarenina at 3:07 PM

Dear Friend,

"Today I will share with you a simple hack that allows you to have a listing of of your posts in chronological order. Think of it as the default "Blog Archive" widget without the hassle of opening and/or showing the arrow buttons."

This was the introductory text I used for promoting my original "Table of Contents" hack two years ago. Looking back, this was a really genuine hack - very much "Hoctro's style", since there was no JSON or JavaScript involved. (I guess my basic understanding of "recursive" style learnt from college (UC Irvine, Software Engineering, Class of 2004) paid off nicely, while examining the template code of Blogger's out-of-the-box Archived widget:-)))).

Today, while tidying up my old posts and moving them to the archived blog, I wonder if I could make this into a scroll down box to save space, if I were to have hundreds of headlines. I thought this would involved some sort of JavaScript code, but then after examining BlogU'ssimilar Table of Contents code, it is such a simple styling using CSS code. I "borrow" her code and modify my original hack, et voilà, it works! At the moment I'm installing it on my blog so you could see what it looks like.

Such is the beautiful of HTML and CSS, one line of code can change a look completely, making the widget now very usable, since you can change the height (height:200px to whatever,) and further render the look by applying styles to the div, such as style='height:200px;overflow:auto;border:1px solid brown' .

Installing this hack is very simple. First, follow the instructions from this article Hacking Technique: How To Modify Template, in particular section B.4. Then cut this code below and paste it in between any two "b:widget" tags, save the template, and you're done.

<b:widget id='TOC' locked='false' title='Contents' type='BlogArchive'>

<b:includable id='main'>





  <b:if cond='data:title'>

    <h2><data:title/></h2>

  </b:if>

  <div class='widget-content'>

  <div id='contents'>

<b:if cond='data:style == "HIERARCHY"'>

<div id='TableOfContents' style='height:200px;overflow:auto;'><ul>

<b:include data='data' name='interval'/>

</ul></div>

    </b:if>

  </div>

  <b:include name='quickedit'/>

  </div>

</b:includable>

<b:includable id='posts' var='posts'>

  <b:loop values='data:posts' var='i'>

    <li><a expr:href='data:i.url'><data:i.title/></a></li>

  </b:loop>

</b:includable>

<b:includable id='interval' var='intervalData'>

  <b:loop values='data:intervalData' var='i'>

    <b:if cond='data:i.data'>

      <b:include data='i.data' name='interval'/>

    </b:if>

    <b:if cond='data:i.posts'>

      <b:include data='i.posts' name='posts'/>

    </b:if>

  </b:loop>

</b:includable>

</b:widget>

To reverse the chronological order so that the oldest posts will appear first on the list, go to "Page Element," select the just-created widget, and select the box "Show Older Posts First".

My special thanks to Annie for her use of expandable "Table of Contents" on her blog.

Have a wonderful day.

Hoctro

9/19/08

;;