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

Loading Indicator GIF

LOADING ... Here is the some samples of GIF images that can be used as page loading indicator. The GIF images were generated based on the color schemes of this blog, so it may not be suitable for other blog with different color schemes.

If you want to use it for your blog or web page, you can download directly from the original source here. At this website, you can adjust the color schemes to your liking and then generate the GIF images.

For more information on how to add page loading indicator to your blog, please refer to this post.


3D Rotation


Arrows


Bar


Bar 2


Bar 3


Bar Circle


Big Circle Ball


Big Flower


Big Roller


Big Snake


Bouncing Ball


Circle Ball


Circle Thickbox


Circling Ball


Clock


Drip Circle


Expanding Circle


Flower


Hypnotize


Indicator


Indicator Big


Indicator Big 2


Indicator Lite


Kit


Pik


Pk


Radar


Refresh


Roller


Smallwait


Snake


Squares


Squares Circle


Wheel


Wheel Throbber



External References

• Ajaxload
  

[-] 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

Digital Scrapbooking 101

LOADING ... Scrapbooking is a method for preserving a legacy of written history in the form of photographs, printed media, and memorabilia contained in decorated albums, or scrapbooks. Old scrapbooks tended to have photos mounted with photomount corners and perhaps notations of who was in a photo or where and when it was taken. They often included bits of memorabilia like newspaper clippings, letters, etc. Modern scrapbooking has evolved into creating attractive displays of photos, text, journaling and memorabilia.

The advent of scanners, desktop publishing, page layout programs, and advanced printing options make it relatively easy to create professional-looking layouts in digital form. The internet allows scrapbookers to self-publish their work, even if it is just for a readership of one. Scrapbooks that exist completely in digital image form are referred to as "digital scrapbooks", or "computer scrapbooks."

While some people prefer the physicality of the actual artefacts they paste onto the pages of books, the digital scrapbooking hobby has grown in popularity in recent years. Some of the advantages include a greater diversity of materials, less environmental impact, cost savings, the ability to share finished pages more readily on the internet, and the use of image editing software to experiment with manipulating page elements in multiple ways without making permanent adjustments.

What you need to get started :

• Computer
  
• Photo/graphics editing software, such as Adobe Photoshop, Paint Shop Pro, or similar softwares
  
• Digital Camera, preferably one with high-resolution (such as 3-5 Megapixel)
  
• Printer (optional, alternatively you may print at your local copy shop or photo lab)
  
• Scanner (optional, if you need to scan old photos or films/slides)
  
• Scrapbook layout software (optional, you can also arrange the layout using graphics editing software), such as Creating Keepsakes Scrapbook Designer Deluxe, HP Creative Scrapbook Assistant, etc.
  

Several things to consider before starting a digital scrapbooks :

• Paper Size (12" x 12", 8" x 8", 6" x 6", 8.5" x 11", etc.)
  
• PPI (pixels per inch)
  
• Resolution (2400 x 2400, 1600 x 1600 pixels, etc.)
  
• Display (print on paper, print as photo, display on computer monitor, etc.)
  

Paper Size
Several paper size to consider:

• 12" x 12"
  Traditional paper scrappers generally work in 12" x 12" size. For digital scrappers, this format is not preferable, mainly because printers capable of printing 12" x 12" usually significantly more expensive compared to the standard A4/Letter format printer. There are several wide format photo printers available on the market currently including ones by Epson, Canon and HP. For example, Epson Stylus Photo 1400, the cheapest Epson printers that can print 12" x 12", is priced at $400.
  If you intend to print at photo lab, ask for 12R size (12" x 15").
  
  
• Letter (8.5" x 11") or A4 (210 x 297 cm)
  As most printers support A4/Letter size paper, this format is more popular in digital scrapbooking, compared to 12" x 12". For comparison purpose, Epson Stylus Photo R380 that supports A4/Letter format is priced at $130.
  If you intend to print at photo lab, ask for 10R size (10" x 12") or S8R (8" x 12").
  
  
• 8" x 8"
  Some scrappers prefer to work on square format, but with A4/Letter size printer. Hence the closest square format is 8" x 8".
  If you intend to print at photo lab, ask for 8R size (8" x 10").
  
  
• 6" x 6"
  Some used this layout when making scrapbooks as a gift.
  If you intend to print at photo lab, ask for 6R size (6" x 8").
  

If you have A4/Letter size printer, go for 8" x 8" and give it a try. Once you get the printed result, you may decide whether the size is just right, or you need bigger format (12" x 12"). You can try printing scrapbooks with 12" x 12" at photo lab first, and see if that's what you want. If you like it, then consider buying wide format printer.


PPI
Pixels per inch (PPI) or pixel density is a measurement of the resolution of a computer display, related to the size of the display in inches and the total number of pixels in the horizontal and vertical directions. This measurement is often referred to as dots per inch (DPI), though that measurement more accurately refers to the resolution of a computer printer. PPI may also be used to describe the resolution of an image scanner or digital camera.

Suppose you have a 100 x 100 pixel image. If you set the image to print at 10 PPI, then you'd have a 10" x 10" image. If you set the image to print at 100 PPI, you'd have a 1" x 1" image. Note that adjusting this value doesn't affect the number of pixels in the image at all, it just changes how big the print will be.

Note that DPI is not the same as PPI. DPI only refers to the printer. Every pixel output is made up of different coloured inks (usually 4 or 8 colours, depending on your printer). Because of the small number of colours, the printer needs to be able to mix these inks to make up all the colours of the image. So each pixel of the image is created by a series of tiny dots (you could think of them as sub-pixels). Generally, the higher the DPI, the better the tonality of the image, colours should look better and blends between colours should be smoother. You'll also use more ink and the print job will be slower. You might want to try setting your printer to a lower DPI to save ink and speed up the job, see if you notice any difference in quality. The lowest setting where you don't see any loss in quality should be the best one to use.

So a 1200 DPI printer uses 1200 dots of ink in every inch to make up the colours. If you were printing a 300 PPI image, then every pixel would be made up of 16 smaller ink dots (1200 DPI x 1200 DPI / 300 PPI x 300 PPI). A lower DPI would have fewer ink dots making up each pixel, which would make the colour look worse. A higher DPI would have more ink dots for each pixel and should give more accurate colour (especially under close examination).

For digital scrapbooks, what we need is PPI for photo printing, which is around 150-300 PPI. I recommend to compare higher and lower PPI, say 200 vs. 300 PPI, and print using your printer or at photo lab. If you can't tell the difference in quality, stick with the lower PPI as it will save computer resources (e.g., hard disk space, memory, etc.).


Resolution
Image size/resolution describes the detail an image holds. The term applies equally to digital images, film images, and other types of images. Higher resolution means more image detail. In digital imaging, the convention is to describe the pixel resolution with the set of two positive integer numbers, where the first number is the number of pixel columns (width) and the second is the number of pixel rows (height), for example as 640 by 480.

Digital scrapbooks image resolution depends on the selected paper size and PPI.

Image Resolution (width by height) = Paper Size (width by height) x PPI

For example, for paper size 12" x 12" with 200 PPI, the image resolution will be 2400 x 2400 pixels.

Information about image resolution is important because this is usually the first thing you need to provide when you create a new image using a graphics editing software.




Display
Digital scrapbooks can be printed on paper or displayed on computer screen. Many digital scrappers print their finished layouts to be stored in scrapbook albums. However, some may want to display their layout mainly on computer screen (or other digital display device such as TV or digital photo frame).

If you intend to print your scrapbooks, you may skip this section and proceed to the next section. If you intend to display your scrapbooks mainly on computer screen, please continue reading.

Computer screen usually have around 100 PPI, while printers require around 200 PPI, so you need to choose your primary display carefully before you proceed. Alternatively, you may create layouts with 200 PPI, then copy and resize to 100 PPI afterward. However, resizing a digital image will result in loss of quality.

If your primary display is computer screen, your scrapbook need to have the same PPI and resolution as your monitor. For example, 17" LCD monitor with 1280 x 1024 resolution has 96.4 PPI (learn more). So, to display on 17" LCD monitor, your scrapbook resolution should be 1280x1024 with 96.4 PPI.

There are some LCD monitors with 204 PPI available on the market, so it is also possible to stick with 200 PPI for both printer and monitor.


Rules/Guides
There are no hard and fast rules to scrapbooking as it is considered an art form. Some prefer pages where the photograph is the central element and embellishments are minimally applied, others include a variety of embellishments to add to the design.

Acid-free and lignin-free products are encouraged to prevent the pictures from turning brown, as follows:

• Acid-free scrapbook albums
  
• Acid-free and lignin-free papers
  
• Acid-free tape
  
• Acid-free glue
  
• Archival marker or pen
  
• Acid-free stickers
  

With the popularity of scrapbooking growing daily, there are more and more resources available to the amateur and professional scrappers alike. Digital scrapbooking shows great promise as the medium of the future for scrapbooking enthusiasts. Scrapbooking can be very easy for anyone who wants to give it a try.


External References

• Scrapbook - Wikipedia
  
• DPI and PPI Explained
  
• Desktop LCD Resolution
  
• Photographic Printing – Wikipedia
  
• 200 PPI
  

[-] Hide Full Post

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

[+] Show Full Post

PNG Transparency in Web Design

LOADING ... Portable Network Graphics (PNG) is a bitmapped image format that employs lossless data compression. PNG is pronounced "ping", but can be spoken "P-N-G". PNG was created to improve upon and replace the GIF format, as an image-file format not requiring a patent license.

Besides being a freely available format, PNG offers several practical advantages over GIF for the web designer, as follows:

• Greater compression: For most images, PNG achieves a smaller file size than GIF.
  
• Greater color depths: PNG offers truecolor up to 48 bits, whereas GIF allows only 256-color palettes.
  
• Alpha-channel transparency: Whereas GIF offers only binary transparency, PNG allows for virtually unlimited transparency effects by enabling an alpha channel for transparency.
  

Alpha Channels
Also known as a mask channel, an alpha channel is simply a way to create the appearance of partial transparency. Whereas GIF supports simple binary transparency--any given pixel can be either fully transparent or fully opaque--PNG allows up to 254 levels of partial transparency in between.

All three PNG image types--truecolor, grayscale and palette--can have alpha information, but it's most commonly used with truecolor images. Instead of storing three bytes for every pixel (red, green and blue), now four are stored: red, green, blue and alpha, or RGBA.

The alpha channel is the opacity channel. If a pixel has a value of 0% in its alpha channel, it is fully transparent (and, thus, invisible), whereas a value of 100% in the alpha channel gives a fully opaque pixel (traditional digital images). Values between 0% and 100% make it possible for pixels to show through a background like a glass (translucency) or retain their anti-aliasing no matter the background, effects not possible with simple binary (zero/full) transparency. It allows easy image compositing and, in HTML pages, inclusion of images with no background (especially if page background is multi-colour).

For example, in this website, I used PNG images with alpha-channel transparency for the header image and the three column box, so that it can rest on top of the “cloud” background while still showing rounded-corners and drop shadows.


Which browsers support PNG?
Almost all modern browsers fully support PNG images, including the alpha-channel transparency, such as Safari (all versions), Firefox (all versions), Opera (version 6 and higher), Netscape (version 6 and higher), and Mozilla (all versions).

However, Internet Explorer does not fully support PNG images, not until version 7. The previous versions (from 5.5 up to 6) do not support alpha-channel transparency, but it can still show the non-transparent part. It is still possible to show the transparent part, but you need to use a non-standard filter called AlphaImageLoader.


AlphaImageLoader
This is Internet Explorer proprietary filter, designed as workaround for displaying alpha-channel transparency in PNG images. They’re used in CSS, but they’re not part of any official CSS specification. In other words, they’re not a web standard.

No other browsers support AlphaImageLoader filter, not that they need it, so the CSS code for this filter must be hidden from other browser by using Conditional Comments.


AlphaImageLoader for Background Image
The code must be placed inside the head element, between

<head>

 and

</head>

.

<!-- This code for all browsers -->
<style type='text/css'>
.main {
  background:url("http://photobucket.com/image.png") no-repeat;
  }
</style>
 
<!-- This code for IE 5.5 – 6 AlphaImageLoader -->
<!--[if (gte IE 5.5)&(lt IE 7)]>
<style type='text/css'>
.main {
  background: transparent none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( enabled=true, sizingMethod=scale, src='http://photobucket.com/image.png');
  }
</style>
<![endif]-->

Then you can put below code inside body element, between

<body>

 and

</body>

.

<div class='main'>Hello</div>

AlphaImageLoader for Normal Image
There are several ways to do this, but the one I recommend is to use JavaScript to check your browser type and version, then use the filter when necessary. This way, you don’t have to add a bunch of codes for each PNG images.

HTML codes for the images:

• For PNG:
  

  <img width="10" height="10" src="http://photobucket.com/image.png" onload="fixPNG(this)" />

  
  
• For GIF:
  

  <img width="10" height="10" src="http://photobucket.com/image.gif" />

  
  
• For JPG:
  

  <img width="10" height="10" src="http://photobucket.com/image.jpg" />

  
  

Example:


The JavaScript code below must be placed inside the head element, between

<head>

 and

</head>

.

<script type='text/javascript'>
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

function fixPNG(myImage) {
  if ((version >= 5.5) && (version < 7) && (document.body.filters)) {
    var imgID = (myImage.id) ? "id='" + myImage.id + "' " : ""
    var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : ""
    var imgTitle = (myImage.title) ? "title='" + myImage.title  + "' " : "title='" + myImage.alt + "' "
    var imgStyle = "display:inline-block;" + myImage.style.cssText
    var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" + "width:" + myImage.width + "px; height:" + myImage.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>"
    myImage.outerHTML = strNewHTML   
    } //end if
  } //end function
</script>

This script was created by Bob Osola.


External References

• Portable Network Graphics – Wikipedia
  
• Intro to PNG Features
  
• PNG in Internet Explorer
  

[-] Hide Full Post

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

[+] Show Full Post

Conditional Comments

LOADING ...

Conditional Comments allow web developers to show or hide HTML code based on the version of the Internet Explorer browser used by viewers. Conditional Comments are supported by IE only (version 5 or greater), but can still be useful for other browsers as it can be used to indicate separate HTML codes to be processed, one set for IE and the other for non-IE.

This is an important feature as different browser types or versions process the same code in a different way, hence give different results. So, web developers may need to provide different codes for each browser types or version in order achieve the same or similar results. For example, IE version 6 or less does not support PNG image display by using the default IMG tag. Instead, it requires additional tag to make use of filter AlphaImageLoader. See more in PNG Transparency in Web Design article.


Code for IE

<!--[if IE]>
  Insert HTML code here. 
  This code can be processed only by IE (version 5+).
<![endif]-->

Code for non-IE

<![if !IE]>
  Insert HTML code here. 
  IE 5+ will not process this code. 
  Non-IE will process this code.
<![endif]>

This is recommended by Microsoft for when the content should be exposed to non-IE browsers. Microsoft acknowledges this method is not standardized markup for comments, intending these tags to be overlooked by other browsers and expose the content in the middle. Some web developers use an alternative technique for non-IE conditional comments in order to only use standardize markup.

<!--[if !IE]>-->
  Insert HTML code here. 
  IE 5+ will not process this code. 
  Non-IE will process this code.
<!--

IE Version
Conditional Comments can be used to assign specific codes for specific IE version. Example:

<!--[if IE 7]>
  You are using IE 7!
<![endif]--> 

A combination of feature, operator, and/or value can be used to form a conditional expression, as shown in the following table.

Item	Example	Comment
IE	[if IE]	The only currently supported feature is the string "IE", corresponding to Internet Explorer.
value	[if IE 7]	An integer or floating point numeral corresponding to the version of the browser. Returns a Boolean value of true if the version number matches the browser version.
!	[if !IE]	The NOT operator. This is placed immediately in front of the feature, operator, or expression to reverse the Boolean meaning of the expression.
lt	[if lt IE 5.5]	The less-than operator. Returns true if the first argument is less than the second argument.
lte	[if lte IE 6]	The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument.
gt	[if gt IE 5]	The greater-than operator. Returns true if the first argument is greater than the second argument.
gte	[if gte IE 7	The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument.
( )	[if (IE 7)]	Subexpression operators. Used in conjunction with boolean operators to create more complex expressions.
&	[if (gt IE 5)&(lt IE 7)]	The AND operator. Returns true if all subexpressions evaluate to true.
|	[if (IE 6)|(IE 7)]	The OR operator. Returns true if any of the subexpressions evaluates to true.
true	[if true]	Always evaluates to true.
false	[if false]	Always evaluates to false.

External Reference

• About Conditional Comments
  
• CSS Filters - Wikipedia
  
• AlphaImageLoader Filter
  

[-] 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