India Page

Google Books Widget

Wed, 03 Sep 2008 09:18:00 GMT

Want to share your library with friends, family and even the rest of the world? If that's the case, you can use my new Google Books Library Widget. Please take a look and experiment with this new widget, and let me know what you think about it.

Google Books

In Google Books you can create your own Library. Take a look here to see my small test library. As you can see, there are 2 books in this library, and I have written a small review for each of them. Creating your own Google Books Library is very easy. First of all, you need to have a Google account. As a Blogger user, you probably have one. After signing in on your Google account, select "more" from the menubar on the Google main page. This opens a small pop-up menu, where you can select "Books". This brings you to the Books-page, where you start creating your Library by "Importing Books". You can easily add books to your Library by entering a list of ISBN-numbers. Google will look up all bookdata. After importing some books, return to the Library page (click on "My Library" in the menubar), to see your Library Listing. Now you can add comments, reviews, and a ranking (0-5 stars) to your books. After setting up your Library, it is time to move on to creating the Google Books Library Widget.

Creating the Widget
Creating the Widget is done in a few easy steps:

Get the URL of your Google Books Library;
Create a Widget with Yahoo Pipes;
Add the Widget to your Blog.

It will take less than a minute to set it up.

1. Get your Google Books Library URL
Go to your Google Books Library page. Select the contents from your browser's address bar by right-clicking on it and selecting "copy" from the popup menu.

2. Create the Widget with Yahoo Pipes
Go to my Google Books Library Pipe by clinking on the link. In the entry-field, enter the URL by right-clicking and pasting the URL you just copied. Click the "Run Pipe" button. Your Library data are retrieved, and displayed as a list of titles and descriptions.
If the output is as you expected, go on to the next step.

3. Add the Widget to your Blog
Now click on "Get as a Badge". Badge is the Yahoo-word for Widgets. This will bring up the Badge Configuration Window. In this window, click on "Customize the size, type and settings of your Badge". In the entry-field again paste your Google Books URL and click "Next". Now select "Blogger" as the destination for your Badge. This brings you to the familiar Blogger-screen, where you can select the Blog, and enter the heading for the new Page Element. Click on "Add Widget", and afterwards view your Blog.

RSS Management

Sat, 04 Jul 2009 04:53:50 GMT

Sponsored Links:

Diabetes Diet	Custom Wedding Bands		Green Interior Design
Executive Recruiter Consulting Toronto	Janitorial Services Fredericksburg	Static Electricity Control	Legal Information

** Follow Fwicki on Twitter

"Latest Headlines" Widget

Tue, 23 Sep 2008 13:29:00 GMT

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.

(Superseded) "Related Articles" Widget

Sun, 21 Sep 2008 22:20:00 GMT

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.

Improved "Table of Contents" Widget

Fri, 19 Sep 2008 22:07:00 GMT

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

Gadget

Fri, 12 Sep 2008 05:57:00 GMT

Hi everyone,

How are you all doing?

Looks like Google's new Gadget's API and its ease of integration of a widget into a blog revive my interest to Blogger again.

http://code.google.com/apis/gadgets/docs/dev_guide.html

I hope to learn how to write a Gadget and to integrate my JSON knowledge to re-make my hacks into new Gadgets. Stay tuned.

I'm putting my worthy previous posts into an archiving blog, for that very reason. This blog will contain all new posts, and links to the archived blog.

Thank you for reading, and have a wonderful day.

Cheers,

Hoctro.

Please change URL's

Sat, 02 Aug 2008 19:55:00 GMT

In my last post I have informed you of my ISP changing my homepage URL. I hve repaired most of the links in this blog, but if you have installed my widgets (such as Recent Posts and Recent Comments, you will have to change the link in your own blog as well.

Please change all referrals to "http://home.planet.nl/~hansoosting/......." to "http://home.kpn.nl/oosti468/......" to get your widgets working again.

Good luck and sorry for the inconvenience.

Tip: download my javascript-files, and upload them at your own web-space.

Speeding Up BlogTOC

Wed, 11 Jun 2008 21:20:00 GMT

Some of you who are using my (much appreciated) BlogTOC widget have mentioned the long load times of their blog as a result of the BlogTOC widget. Also, some of you want to display the Table of Contents automatically, without the visitor having to click on the Show TOC link.

Well, I will share some ideas with you regarding this subject.

Speeding up stuff
If you implement the BlogTOC widget in the standard way, the entire code of the widget is placed in a Blogger Page Element, usually somewhere at the top of you blog.
Now, while your Blog is loading, all code is processed from top to bottom. The piece of code that is the most time-consuming is the code that retrieves the Blogger Feed, parses it, and puts the data in a set of javascript arrays. This slows down loading, but once the data has loaded displaying it is done lightning-fast.
A good solution is, to move the retrieval-code to a page element that is completely at the bottom of your blog page.
I have moved the code to the bottom of the footer, and that has sped up loading a lot.
The code you have to move is this:

<script src="http://yourblog.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=100&callback=loadtoc"></script>

Automatic display of TOC
If you want the TOC to auto-display, add a simple line of javascript code at the end:

<script type="text/javascript">showToc();</script>

Troubleshooting the Label Cloud

Sat, 09 May 2009 03:58:00 GMT

I just figured out something that may be baffling others. I was looking at my photography blog, Sharondipity Photography, and noticed that my label cloud was not there. PFFFFTTTTT....gone.

If you have installed the label cloud and have problems, this may be the reason why. Quotation marks. Make sure that you don't have quotation marks in any labels. If you do, go through and remove them.

Another thing. At least one of your labels have to be in more than one post. Otherwise it won't work. I don't know why. I just know that is the way it is.

Andreas02 Template

Tue, 29 May 2007 00:37:00 GMT

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.

Do you want to wrap text around an image?

Fri, 15 May 2009 04:47:00 GMT

When using images in your post, do you sometimes get upset with where the text around the image goes? Here is a way to get the text to wrap the image...either to the left or the right. It is simple enough. All you need to do is put a little CSS in your template, then tell the image where to go.

So, basically it is a two step process. But, once you get the CSS code placed in the CSS style sheet, you only have to tell the image where to go from then on when posting images. If you notice, I have my flowers to the left and the gingerbread boys to the right, and the text wraps around them.

Here are the steps.
Step 1: Locate the CSS style sheet and paste this code (I put mine under the post section):

/*Wrap text around image
.left {
float: left;
margin: 6px;
}

.right {
float: right;
margin: 6px;
}

Step 2:This is what your image tag will be similar to:

<img src="http://farm4.static.flickr.com/3599/3515377006_db67e698de_m.jpg" />

Add class="left" or class="right" to that image tag. It will look like this:

<img src="http://farm4.static.flickr.com/3599/3515377006_db67e698de_m.jpg" class="right" />

Since I added class="right" to that image tag, the image will float to the right and the text will wrap on the left.

One more thing. When using this method to post an image, you will have to use the Edit HTML tab in the posting window...not the Compose tab.

A Program to Create Your Own Tab Menu Graphics

Thu, 16 Apr 2009 00:45:00 GMT

Hi Annie!
Wanted to tell you I found a free download of a software to create tabbed menus, which generates the code too. It's really neat. I used it to make all the tabs.

My friend, hillgrandmom, from Life on a Hill, sent me a link to CSS Tab Designer. So, I took a look at her blog. It made lovely little tabs. After you make your new tabs to match your blog, you can add them using this tutorial: A Tab Menu for Your Very Own. How exciting is that?

Blogger XML Template - Gypsy Garden

Sat, 07 Mar 2009 03:34:00 GMT

Click on image for working demoDownload

A note to those of you that put my templates up for download. I appreciate that you like them enough to do so, but please link back to my post and don't put my template for download from your site. I enjoy the traffic!

I just felt like making another template. So, here is another free template!! This template is a little grungy. Not too girly. But girly enough!

~CREDITS~
Fonts: Feena Casual 10 pt
Borders: Trish McCoy
Papers: More Flowers Pixels and Icecream
Frame Brushes: Doodle Frames

A New File Host for my Free Blogger Templates!

Fri, 06 Mar 2009 22:19:00 GMT

For a long time I've been wrestling with my web/file host. I think I have found the solution! I found MediaFire. I'm using the free account and have uploaded all my blogger templates.

I'm confident that that my readers will be able to download all the templates without any problems. If, by chance, you have a problem, please email me what happened.

post signature

A New Skin

Mon, 09 Feb 2009 20:53:00 GMT

I finally got completely BORED with the old look-and-feel of Beautiful Beta. It was so totally not 2009.

And besides that, pageloading had slowed down tremendously because of all the javascript-widgets and other stuff that was hanging in my sidebars.

Furthermore, now that everybody has a 3-column template, it seemed time to turn back to an old-fashioned, well-designed, crisp and clear two column design. With lots of space for the post content, and a minimum of sidebar widgets.

The coming weeks I will clean up the posts, so Beautiful Beta will be up-to-date again.

Change Your Blog Font!

Sun, 22 Feb 2009 13:02:00 GMT

While looking at a fellow photog's blog, Little Kiwis Photography, I was admiring her blog's font. Then I saw a link that said "I changed my font at the cutestblog.com" so I clicked. Well, I was excited. Here is how my photography blog looks now at SeaSide Sharon.

If you want to do this, follow this link, How to change the font on your blog, for a quick and easy installation!

post signature

Post Summary And Read More

Fri, 20 Feb 2009 20:51:00 GMT

My old friends here are very well aware of the Peek-A-Boo-Posts hack that Ramani and I came up with several years ago. It required quite some template hacking and javascript too.

In this tutorial you will learn how to tweak your blog without any javascript to get a similar effect. On our homepage, all posts will show a short summary, followed by a "Read More" link. Clicking the "Read More"-link will bring up the post page with the full post text.

Step 1: Back up your template
Open the Layout|Edit HTML-tab on your Dashboard, and download the template as an XML-file to your harddisk. If anything goes wrong, upload it again and there will be no problem at all.

Step 2: Modify the template code
Scroll down and look for the following piece of code:

<div class='post-body entry-content'>
  <data:post.body/>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

This is the piece of template code that displays the post-body on the screen. We have to add a few lines of code here:

<div class='post-body entry-content'>
  <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <style type='text/css'>.restofpost {display:none;}</style>
  </b:if>
  <data:post.body/>
  <b:if cond='data:post.link'>
    <a expr:href='data:post.link'>Read more...</a>
  <b:else/>
    <b:if cond='data:post.url'>
      <a expr:href='data:post.url'>Read more...</a>
    </b:if>
  </b:if>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Now save your template.

Step 3: Modify your post template
In your Blog Settings you can modify the post template. Change it to:

<div class="summary">Type summary here</div>
<div class="restofpost">Type rest of post here</div>

And save your settings.
This will take care of all new posts. Type the summary text in between the summary-div-tags. Type the rest of the post between the other div-tags, and publish!

Step 4: Modify old posts
If you want older posts to have summaries as well, change every post and add a summary-div and restofpost-div.

And furthermore...
The summary-div is not really necessary, as the code only hides the restofpost-div if we are on the homepage. If you want some other styling for the summary, add CSS-tags to the skin-part of your blog.

Removing the Blogger Navbar

Sun, 15 Feb 2009 09:52:00 GMT

It is an oldie, but worth mentioning.
You can remove the blue Blogger navigation bar that is at the top of each page by adding a single line of CSS to the skin of your blog.
From your dashboard go to the Layout | Edit HTML screen and scroll down to the skin part of the blog.
Feel free to save your current template first by downloading it, but it is not really necessary as this is not a very risky modification.

<b:skin><![CDATA[/*
 ...
 ...
#navbar {display:none;}
 ...
 ...
]]></b:skin>

Save and display, and finally you will be rid of the navigation bar.

More If Then Ideas

Sun, 15 Feb 2009 17:37:00 GMT

Now that my train of thought has started on how to use the <b:if> - <b:else/> constructions to enhance the Bloggger experience, I got some new ideas that really need some investigation.

Idea 1: Table of Contents
We can tweak the Blogpost Widget, so that it displays only posttitles when we are on the Blog Homepage, and full posts when we are on an Item Page. In the Blog Settings we can set that our Blog should display 365 days on 1 page, allowing for a maximum of 500 posts to be displayed.

Idea 2: Post Summaries on front page
By default, we have 1 Blogpost Widget on our Blog. But we can easily add a second Blogpost Widget to our Blog. We can modify Blogpost Widget #1 to be displayed only on the Homepage, and #2 to be displayed on Itempages.
In our posts we could use 2 span-tags, one for a summary and one for a full post text. In Blogpost Widget #1 we only display the summary-span, in Blogpost Widget #2 we only display the full text span. It can be done with javascript. The challenge is to see if it can be done without!

Idea 3: Featured Posts on front page
If we can have 2 Blogpost Widgets, we can have 3 as well.
Widget #1 shows on item pages, just as we are used to. Widget #2 and #3 are shown only on the Homepage, where #2 filters for 'Tutorial' and #3 filters for 'Template'. And #2 and #3 are side by side.

Well, I have to do some experimenting to get this to work. Please feel free to create your own solutions, and throw in your own ideas as well!

Admin Widget

Sun, 15 Feb 2009 10:12:00 GMT

In my last post I taught you how to remove the ugly Blogger navbar from the screen. One minor setback is that now you don't have access to your dashboard, settings, layout and posts, because the navbar is gone.

In this post you will learn how to add an Admin Widget to your sidebar.

Step 1: Backup your template
Although this is not a very risky modification, it is always good practice to backup your template before modifying it.
Go to the Layout|Edit HTML-tab, and download your template as an XML-file and save it to your harddisk.

Step 2: Create an new Link Widget in your sidebar
From the Layout|Page Elements tab Add a Widget to your sidebar. Select the link-widget from th list. Set the title for example to Admin, and add 4 links to the list.

Dashboard       : http://www.blogger.com/home
Change Settings : http://www.blogger.com/blog-options-basic.g?blogID=####
Change Layout   : http://www.blogger.com/rearrange?blogID=####
Edit Posts      : http://www.blogger.com/post.g?blogID=####
New Post        : http://www.blogger.com/post-create.g?blogID=####

In this links you have to change the ####### to the ID of your Blog. The easiest way to do this is to go to your dashboard, and view the list of your blogs. Hover your mouse over the links (Layout, Settings, etc) and watch the status-bar of your browser. You will see the link there. The easiest way is to right-click each link, copy the hyperlink, and paste it into the link widget.

Step 3: Save
Save the Widget and display your Blog. If you are viewing your Blog, clicking one of the Admin links will bring you to the appropriate screen. Visitors of your Blog will not be able to modify it, because they are not logged in to your blog. If you are not logged in, clicking an admin-link will bring up the Blogger login screen.

Selective display of widgets

Sat, 14 Feb 2009 18:56:00 GMT

Here is a small tutorial on how to display your blog's widgets selectively on your pages.

Let's suppose you only want to show your Profile Widget on your blog's Homepage, but not on the other pages. This is how it is done.

Step 1: Back up your template
Go to your blog's Layout Page, and enter HTML-edit mode. Download your template as an XML-file and store it in a safe place. In case template-hacking takes a wrong turn somewhere, you can upload your template-file again and you are back to normal.

Step 2: Find the Profile Widget
Expand the widget-code by checking the checkbox on the HTML-edit page. Now scroll down and look for the Profile Widget, that looks like this:

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
  <b:includable id='main'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    ...
    ...
    </div>
  </b:includable>
</b:widget>

Step 3: Modify the widget code
Now we only want to display this widget if the page that we are looking at is our blog's Homepage. We will use a <b:if>-statement to check for this situation.
Insert the following (red) lines of code into the widget code:

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
  <b:includable id='main'>
  <b:if cond='data:blog.homepageUrl == data:blog.url'> 
    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    ...
    ...
    </div>
  </b:if>
  </b:includable>
</b:widget>

The datafield data:blog.homepageUrl contains the url of your blog's homepage. The datafield data:blog.url holds the url of the current page. If they are the same (==) we are on the homepage and the widget should be displayed. If they are not the same, the widgetcode is skipped.

Step 4: Save your template
Save your template and display your blog.

Breadcrumbs for Blogger

Tue, 10 Feb 2009 23:01:00 GMT

With my new Blog Skin I also introduced a "Breadcrumb Trail" to my Blog. If this doesn't ring a bell, don't worry. Remember the Hansl & Gretchen fairy-tale?

Hansl and Gretchen were 2 kids from a very poor family. The parents were so poor that they had nothing to feed their children, and between them decided to take the kids into the forest and leave them to the wild animals. Hansl and Gretchen discovered these terrible plans, and decided to take pre-emtive measures. They took with them a piece of bread, and dropped breadcrumbs along the trail in order to find their way home. As might be expected, they didn't find home and they were captured by an evil witch (the breadcrumbs were eaten by birds, I guess). But the general idea got a strong foothold in the internet world, and nowadays you can find a breadcrumb trail on many a website to find your way back to the Home Page.

On the main page of my Blog there is no breadcrumb, because that is .... Home!

But as soon as you click on a specific post title, or on a label, or on an archive entry, you will see how the breadcrumb magically appears on top of the page:

Browse » Home » Tutorials » Breadcrumbs for Blogger

Now, here is an easy piece of code to put into your template, and breadcrumbs will be yours!

Step 1: Save your template
Go to the Layout tab, and click Edit HTML.
Download your template as an XML-file and save it onto your harddisk. If anything goes wrong, upload it again and not much harm will be done.

Step 2: Expand the widget code
Now check the checkbox to display your template's XML-code. Ready to hack? Here we go!

Step 3: Add a new Includable
We are going to modify the code of the Blog-widget. The default-widget uses a so-called "includable" (a chunk of code) to display a status-message above your posts when you have selected all posts with a certain label. We will turn off this default status message, and replace it with our breadcrumbs.

Scroll down through your expanded widget code and look for the following piece of code:

<b:includable id='main' var='top'>
  <!-- posts -->
  <div class='blog-posts hfeed'>

    <b:include data='top' name='status-message'/>

    <data:adStart/>

Now we will switch off the default status-message, by putting comments-brackets around it. (You can also delete the line, but I think leaving it there and commenting it out is more elegant in case you want to track back and debug).

<b:includable id='main' var='top'>
  <!-- posts -->
  <div class='blog-posts hfeed'>
  <!-- disable default status message
    <b:include data='top' name='status-message'/>
  default status message disabled -->
    <data:adStart/>

Now add the following line, that will call our breadcrumb includable:

<b:includable id='main' var='top'>
  <!-- posts -->
  <div class='blog-posts hfeed'>
  <!-- disable default status message
    <b:include data='top' name='status-message'/>
  default status message disabled -->
    <b:include data='posts' name='breadcrumb'/>
    <data:adStart/>

Immediately above this 'main' includable, insert our new breadcrumb includable:

<b:includable id='breadcrumb' var='posts'>
  <b:if cond='data:blog.homepageUrl == data:blog.url'> 
  <!-- No breadcrumb on front page -->
  <b:else/> 
    <b:if cond='data:blog.pageType == &quot;item&quot;'> 
       <div class='breadcrumbs'> 
         Browse &#187;  <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> 
         <b:loop values='data:posts' var='post'>
           <b:if cond='data:post.labels'> 
             <b:loop values='data:post.labels' var='label'> 
               <b:if cond='data:label.isLast == &quot;true&quot;'> &#187; 
                 <a expr:href='data:label.url' rel='tag'><data:label.name/></a> 
               </b:if> 
             </b:loop> 
             &#187; <span><data:post.title/></span> 
           </b:if> 
         </b:loop>
       </div> 
    <b:else/> 
      <b:if cond='data:blog.pageType == &quot;archive&quot;'> 
        <div class='breadcrumbs'> 
          Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/> 
        </div> 
      <b:else/> 
        <b:if cond='data:blog.pageType == &quot;index&quot;'> 
          <div class='breadcrumbs'>
          <b:if cond='data:blog.pageName == &quot;&quot;'>
            Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; All posts
          <b:else/>
            Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Posts filed under <data:blog.pageName/> 
          </b:if>
          </div> 
        </b:if> 
      </b:if>
    </b:if>
  </b:if>
</b:includable>
<b:includable id='main' var='top'>

You can also download the xml-code for the includable here:
Breadcrumb includable
Right-click the link, and select "Save as..." to save the XML-file on your harddisk. You can open it with Notepad, and copy-paste the code into your template.

Step 4: Add some CSS to the skin
The basic code of your breadcrumb is now in place. You can change its looks by adding a CSS-class .breadcrumbs to the skin of your Blog.
This is just an example:

<b:skin><![CDATA[/*

....

.breadcrumbs {
  float: left;
  width: 590px;
  font-size: 11px;
  margin: 5px 10px 20px 10px;
  padding: 0px 0px 3px 0px;
  border-bottom: double #EAEAEA;
}

....

]]></b:skin>

Step 5: Save your template
Save your template and view the results. Enjoy!

Troubleshooting
The code above was copy-pasted directly from my template into this post, so it should be error-free if your copy-paste it into your template.

Be sure to have the latest widget-versions in your template. As you maybe know (or then again, maybe not) the widgets code (such as your Blog Posts) is updated regularly by Blogger, providing you with new functionalities. But if you have hacked into the code of the widget, Blogger will NOT update to the newest version of the code.
If you want to be sure that the most recent version of a widget is present on your blog, you can click the "Return to default widgets"-link in the Layout-HTML editor.

If you do not feel comfortible about modifying the code of your blog, create a new testblog for testing purposes. Add some Lorem ipsum posts (filled with nonsense text and fake labels), and see if the breadcrumbs work. If everything works fine, port it to your real blog.

"Blog List" Widget

Tue, 07 Oct 2008 12:34:00 GMT

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.

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

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

New Translation Widget

Tue, 14 Oct 2008 13:02:00 GMT

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

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

Sat, 11 Oct 2008 20:28:00 GMT

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

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

Sat, 11 Oct 2008 06:52:00 GMT

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.

<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

Widen the Post Section

Fri, 23 Jan 2009 12:36:00 GMT

Thank you so much for the tips!
it really helps :]
and do you know how to enlarge the postings column? Because my posting column is kinda too small somehow in my blog .
Thanks :]

This was from sararocks. This is a easy little fix. You have to make two little changes in your CSS style sheet. Look for this piece of code:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Then make changes to the width. Add the same amount of to each area like this:

#outer-wrapper {
width: 860px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 610px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Here I added 200px to each area. All that is left to do is save your work!

Moving FeedBurner accounts to Google

Sun, 18 Jan 2009 16:03:00 GMT

I got a tweet message from rajtilak saying that I may be interested in this. And sure enough, I am.

I hurried on over to Feedburner and this is the message I found:

"Hey! We are moving FeedBurner accounts to Google. Learn more or Move your account now."

It was a simple painless process. A couple of clicks and it automatically transferred all of my feedburner accounts. As a matter of fact, it is still transferring...it said it may take a bit.

Thanks, Ratjilak for the heads up!

post signature

Free Twitter Buttons Roundup!!

Tue, 13 Jan 2009 15:41:00 GMT

While I was researching Twitter for Twit This, I came across a couple of sites with all sorts of twitter goodies! Well, more than a couple, as you will see. Some of them are animated, most are not. All are creative and really fun!

LimeShot Marketing

Make your own personalized button...twignature

All sorts of cute ones here! Twitter Buttons

Many different ones...VincentAubry.com

FWD

Function

Randa Clay

LoonDesign

IconTexto

Productive Dreams

Monkey Works

Smashing Magazine

I am Paddy

Fasticon

Milk Addict

Siah Designs

So, what are you waiting for? Get yourself a cute litte twitter bird!!

post signature