Loading Indicator for Blogger

LOADING ... If your page takes more than a few seconds to load, you may want to add a loading indicator to inform the visitors that page loading is still in progress. The page loading indicator is usually in some form of animated GIF. This post shows some samples of GIF images that can be used as a loading indicator.

For Blogger users, here is how to add loading indicator to your blog …


Part 1 – Span
First, you need to decide which part you want to hide while the page is loading. Some may hide the entire page while loading, showing nothing but the loading indicator. I do not recommend this, as your readers might get bored looking at an (almost) empty page.

The trick is to show something for them to look at while waiting for the full contents to appear. So, instead of hiding the entire page, we shall just hide the contents of the posts.

What we need to do is to add 2 span tags around

<p><data:post.body/></p>

, as follows:

<!-- START: Loading Indicator: Top -->
<span expr:id='"loading-" + data:post.id' style='font-size:75%;'>
  <img width='16' height='16' src='http://i74.photobucket.com/albums/i265/jennzhen/loading/CircleBall.gif' style='vertical-align:middle'/> LOADING ...
</span>
<span expr:id='"loaded-" + data:post.id' style='display:none'>
<!-- END: Loading Indicator: Top -->

<p><data:post.body/></p>

<!-- START: Loading Indicator: Bottom -->
</span>
<!-- END: Loading Indicator: Bottom -->

Part 2 – Script
The purpose of this part is to show the actual page contents after the page loading has been completed. It will also hide the loading indicator.

The script below should be placed after

<div id='blog-posts'>

, immediately before

</div>

, as follows:

<div id='blog-posts'>
  <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><data:post.dateHeader/></h2>
    </b:if>
    <b:include data='post' name='post'/>
    <b:if cond='data:blog.pageType == "item"'>
      <b:if cond='data:post.allowComments'>
        <b:include data='post' name='comments'/>
      </b:if>
    </b:if>
  </b:loop>

<!-- START: Loading Indicator: Script -->
<script type='text/javascript'>
window.onload=function(){
<b:loop values='data:posts' var='post'>
  document.getElementById("loading-<data:post.id/>").style.display='none';
  document.getElementById("loaded-<data:post.id/>").style.display='inline';
</b:loop>
}
</script>
<!-- END: Loading Indicator: Script -->

</div>

[-] Hide Full Post

[-] Hide Full Post [+] Show Full Post

[+] Show Full Post

Related Posts - Blogger

LOADING ... Getting tired of adding related posts list manually all the time? For Blogger users, with a little bit of template modification, the related posts list can be added automatically based on the label assigned to the posts.

Interested? Just follow two steps procedure below to add it to your blog.


Step 1
Go to Template > Edit HTML, click the Expand Widget Template checkbox, and paste the following into the page header:

<!-- START: Related Posts -->
<script type='text/javascript'>//<!--
var relTitle = new Array();
var relURL = new Array();

function resetRelatedPosts() {
  relTitle = new Array();
  relURL = new Array(); } //end function

function getRelatedPosts(json) {
  var j = 0; 
  for (var i = 0; i < json.feed.entry.length; i++) { 
    var entry = json.feed.entry[i]; 
    relTitle[j] = entry.title.$t; 
    for (var k = 0; k < entry.link.length; k++){  
      if (entry.link[k].rel == 'alternate'){
        relURL[j] = entry.link[k].href;   
        j++;   
        break; } } } } //end function

function writeRelatedPosts() { 
  var uniqURL = new Array(0); 
  var uniqTitle = new Array(0);
  for(var i = 0; i < relURL.length; i++){
    if(!contains(uniqURL, relURL[i])){
      uniqURL.length += 1;
      uniqURL[uniqURL.length - 1] = relURL[i];
      uniqTitle.length += 1;
      uniqTitle[uniqTitle.length - 1] = relTitle[i]; } }
  relURL = uniqURL;
  relTitle = uniqTitle;

  var flagBlank = true;
  var content = '<br/><br/><b>Related Posts</b><ul>';
  for(var j = 0; j < relTitle.length; j++){
    if (relTitle[j] != currentTitle){
      content += '<li><a href="' + relURL[j] + '">' + relTitle[j] + '</a></li>';
      flagBlank = false; } }
  content += '</ul>';
  if (!flagBlank){
    document.write( content ); } } //end function

function contains(a, e){
  for(var k = 0; k < a.length; k++) if (a[k]==e) return true; return false; } //end function
//--></script>
<!-- END: Related Posts -->

Step 2
Scroll down to find the following:

<data:post.body/>

Then add the following immediately after above tag:

<!-- START: Related Posts -->
<script type='text/javascript'> resetRelatedPosts(); </script>
<b:loop values='data:post.labels' var='label'>
  <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=getRelatedPosts&max-results=10"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'> var currentTitle = '<data:post.title/>'; writeRelatedPosts(); </script>
<!-- END: Related Posts -->

That's all. You just added "Related Posts" at the bottom of your posts.

Note that the current post is not added to the related posts list. You'll need at least two posts with the same label to make the related post appears.


Tweak
You may adjust how many related posts to display for each label. The default is 10 posts per label (see the part that says max-results=10), but you can increase or decrease this value or remove the restriction altogether (which will show all related posts for each label).


Requirement
This feature will only work if :

• Your blog is parked at Blogger.
  
• You are using label for your posts.
  
• The blog feed is active.
  

To activate the blog feed:
Settings > Site Feed, set Allow Blog Feed to Full.
[-] Hide Full Post

[-] Hide Full Post [+] Show Full Post

[+] Show Full Post

How to Backup Blogger Blog

LOADING ... You have spent a lot of time and effort to keep your blog running. Your ideas, your stories, and your thoughts are priceless. Wouldn't it be a disaster if one day all your blog entries are gone due to a hack attack or hardware failure? So, backup all your blogs regularly before it is too late.

If you are using Blogger to store your blogs, the following are a few simple ways to back up your Blogger blog ...


Backup Your Posts

• Backup All Posts
  This link will show all of your posts in one page:
  

  http://blogname.blogspot.com/search?max-results=1000

  
  Don't forget to change the URL "blogname.blogspot.com" to the actual URL of your blog. You can also change the maximum result if you have more than 1000 posts. If you have a lot of posts, it may take a while to show the page.
  
• Backup Monthly Posts
  You can add archive page element to your blog, at Template > Add page element > Blog Archive. You can set the archive frequency to monthly/weekly/daily depending on how often you update your blog. At the page element, you can view a group of posts by clicking the archive link, such as 2007, or August. I recommend you backup monthly, by selecting the link for the previous month so that your backup covers all posts made during the previous month. However, you are free to choose other backup frequency as you please, such as daily, weekly, or even annually.
  

Backup Template
This one is quite simple. You just need to go to Template > Edit HTML, and then click "Download Full Template". I recommend to backup your template before you make any changes to your template, so you always have a backup version in case you mess up your template.


Backup Comments

• Backup All Comments
  Use the following link to get all the comments:
  

  http://blogname.blogspot.com/feeds/comments/default?max-results=1000

  
  Don't forget to change the URL "blogname.blogspot.com" to the actual URL of your blog. You can also change the maximum result if you have more than 1000 comments. After you submitted the link, you may be asked to download the file (at least on Internet Explorer), so just give the file name with XML extension (such as comments.xml). This file will contain all of the comments submitted by your visitors.
  
• Backup Single Comment by E-mail
  You can set Blogger to send you an e-mail when someone leaves a comment on your blog. This option is available at Setting > Comments > Comment Notification Address. You can collect these e-mails as backup.
  

[-] Hide Full Post

[-] Hide Full Post [+] Show Full Post

[+] Show Full Post

Favicon

LOADING ... A favicon (short for 'favourites icon'), also known as a website icon, a page icon or an URL icon, is an icon associated with a particular website or webpage. A web designer can create such an icon, and many recent web browsers can then make use of them. Browsers that support favicon may display them in the browser's URL bar, next to the site's name in lists of bookmarks, and next to the page's title in a tabbed document interface.




Location of favicon
The original means of defining a favicon was by placing a file called favicon.ico in the root directory of a web server. This would then automatically be used in the browser’s favourites (bookmarks) display. Later, however, a more flexible system was created, using HTML to indicate the location of an icon for any given page. This is achieved by adding two link elements in the section of the document as detailed below.

<link rel="shortcut icon" href="http://x.com/favicon.ico"
      type="image/x-icon">

<link rel="icon" href="http://x.com/favicon.ico"
      type="image/x-icon">

Note:

• The link elements must be inside the head element, between

  <head>

   and

  </head>

  .
  
• For XHTML, the link element must be terminated by

  />

   instead of

  >

  .
  

Recently, some browsers such as Firefox and Opera also support other image format, such as GIF and PNG, which allows animated/transparent images (GIF) and partially transparent images (PNG). For GIF/PNG files, use the following type:

• GIF files

  type=”image/gif”

  
  
• PNG files

  type=”image/png”

  
  

Most photo sharing website such as Photobucket and Flickr currently does not support ICO files though, so unlike the regular images (JPG, GIF, or PNG files), favicon ICO files should be stored elsewhere. On contrary, most web hosting services, such as Geocities, allows you to store ICO files. So, look for web hosting services for a place to store the favicon ICO files.


Resolution and Color Depth

• ICO: include multiple resolutions (the most commonly used being 16×16 and 32×32) and bit-depths (most common being 4-bit 16 colors, 8-bit 256 colors, 24-bit 16 million colors, and 32-bit 16 million colors with 8-bit alpha channel).
  
• GIF: use 16×16 resolution in 256 colors.
  
• PNG: use 16×16 resolution in either 256 colors or 24-bit.

As most recent browsers support ICO files, but some of them do not support GIF/PNG files, it is recommended to use ICO files whenever possible.


Create favicon
Usually favicon.ico file contains 2 icons, 16x16 and 32x32 resolution. Some graphics editor applications support ICO files, such as GIMP. Some others may require additional plugins in order to support ICO files, for example, Photoshop requires a plugin from Telegraphics. The same website also provides tool to combine multiple ICO files, e.g. combine ICO file with 16x16 and 32x32 resolution.

First begin with 32x32 resolution, as it is more difficult to work with the smaller 16x16 resolution. With your preferred graphics editor, start your project with a canvas set at 32x32. It is possible to start with a bigger canvas, such as 64x64, and scale it down once finished. However scaling down an image usually will reduce its quality.

Once familiar with the 32x32, you may proceed with the 16x16.


Inspiration
Some nice collection of favicon can be found at Smashing Magazine. [-] Hide Full Post

[-] Hide Full Post [+] Show Full Post

[+] Show Full Post

Kathleen Kiera

LOADING ... The first blog I have ever created was a blog about my daughter, Kathleen Kiera. Initially, I used the default Blogger template. However this template was quite simple and there was not that many built-in tools to customise the layout.

So, in order to find out how to adjust the layout to my liking, I started learning web coding, such as CSS, XML, HTML, etc. Quite a journey, I must say, searching and collecting bits and pieces of codes and information that can be useful for blog layout customisation.

At the time of posting, I have managed to add the following customisation:

• three-column layout
  
• recent comments
  
• favicon
  
• label clouds
  
• PNG images with alpha-channel transparency

In order to preserve the knowledge for future reference, I’ll post in this blog everything I found with regard to blog customisation. I hope you’ll find this blog as useful as it was for me.
[-] Hide Full Post

[-] Hide Full Post [+] Show Full Post

[+] Show Full Post