301 Redirect Your Old Blogger Blog to New Address

Back in February I decided to change the address of my blog from 911-need-code-help.blogspot.com to salman-w.blogspot.com. Changing the blog address is straightforward; however, I wanted the following to happen after the change:

• Backlinks to the old blog should continue to work
• Visitors attempting to access the old blog should be redirected to the new blog automatically
• Search engine ranking for the old blog should be transferred to the new blog

In short, I needed to redirect old URLs to new ones. Given that Blogger does not have an option to redirect URLs to another blog and mod-rewrite/server-side scripting is not available either; my only option was to use zero second meta refresh tag which is (claimed to be) treated as a 301/permanent redirect by Google. So, here is what I did:

NOTE THAT THIS ARTICLE IS ABOUT MOVING FROM ONE BLOGSPOT.COM ADDRESS TO ANOTHER. If you are moving from Blogspot hosting to custom domain, you (probably) don't have to do anything special. If you are moving from one custom domain to another, ask your domain name provider to setup a 301 redirect on the old domain.

5 jQuery UI Datepicker Examples

The jQuery UI library provides effects, utilities, and themeable widgets that can add interactivity to your webpage. The Datepicker widget is a part of jQuery UI; it allows you to select a date from a popup/inline calendar. The following examples demonstrate some advance uses of the datepicker widget.

1. Parse and Format Dates
2. Set Date on Page Load
3. Disable Specific Dates
4. Style (or Highlight) Specific Dates
5. Internationalization and Localization
6. Update Datepicker Using AJAX
7. Using Datepicker to Select Date Range

How to Fix the Typical "My PHP Script Does Not Work" Problem

A PHP script that "does not work" because of an error will emit error messages such as "use of undefined variable", "an error in MySQL query", "permission denied", "parse error", etc. If you do not see an error when you should, it could mean that PHP is configured to suppress errors; a common practice in production environments. Developers who use AMP stacks unknowingly have PHP setup this way, and when they run into "does not work" problems and see no errors, they start asking silly questions.

The environment in which you develop code must be setup differently. Here is what you need to do in order to make PHP more verbose about errors.

How to Remove the Space Below Images and Other Inline-Block Elements

A surprise question: what is the height of a div that contains just a 40 pixel tall image?

<div><img src="100x40.png" width="100" height="40"></div>

No. It is a little more than 40 pixels:

Related Posts for Blogger

Adding a list of related posts at the end of article is a tried and tested way to keep the visitors engaged with your blog for longer duration. It gives them a reason not to click the back button, thus increasing your blog's page views and average visit duration; and decreasing bounce rate.

There are plenty of related post widgets for Blogger but I was not satisfied with them (in fact, I am never satisfied with any piece of code). Therefore, I decided to write my own, with the following features:

• Light weight vanilla JavaScript code — no JavaScript framework required
• Customizable widget layout — just about everything can be styled using CSS
• Post thumbnails support — because a thumbnail image is worth a thousand words
• Google Analytics integration — clicks are logged in Google Analytics
• Lazy-loadable — the script can be loaded asynchronously
• Easy installation — does not require editing Blogger template

Traversing Hierarchy Tree Using PHP: Adjacency List Model

Relational databases represent data as rows and columns inside a table; however, this representation is not suitable for hierarchical data. Certain models are available that allow you to store hierarchical data in these databases. One such method is the Adjacency List model. This article shows you how to manipulate adjacency list implementation of hierarchical (tree) data using PHP.

Hierarchical data consists of elements that have parent-child relationships. It can be visualized as a tree-like structure where each node can have one parent and many children. A node that does not have a parent is called root node while a node that does not have any children is called leaf node. Any connecting node is called branch node.

Adjacency list model is a naive solution used (unknowingly) by majority of programmers. In this implementation, each row stores a reference to its parent. This simplifies most database operations except for SELECTing a subtree (remember that the depth of the subtree is unknown).

Since a tree is a recursively defined data structure, it can be traversed naturally using recursion. The code demonstrated in this article uses (i) one query (ii) array to store all results (iii) index for faster iteration (iv) recursion. It does not use references or multiple queries.

Display Star Ratings Using CSS Sprites

Almost all rating systems you come across use stars to represent the numeric information visually. There are many ways to display the star rating, some involve using six or more images, while others require an image sprite that contain two, six or even more images. However, I like the star ratings used on Google search results page because it uses very simple CSS and sprite; and it can display fractional values (e.g. 3, 3.5, 3.75) quite nicely.

To create something similar, all you need is an image sprite containing two images (gray and yellow stars for example) and some CSS. Here is the 65x26px sprite used in the following example:

The HTML/CSS markup consists of two span tags:

1. The outer span has gray rating graphic as its background image and its dimensions match those of the graphic.
2. The inner span has yellow rating graphic as its background image and its width is specified in percent. This means it can display any rating value on the scale; for example, to display a rating of 3.5 out of 5, set the width to 70%.

Embed YouTube Videos, Playlists and More with IFrame Embeds

YouTube introduced IFrame embeds back in July 2010 that will eventually allow embedded videos to work on mobile devices, especially those that do not support Flash. The object embeds still exist but IFrame embeds have seem to become the "recommended" method for embedding a YouTube player because they automatically select the appropriate player based on the device capabilities and available YouTube file formats. As a matter of fact, the IFrame API is not experimental anymore; so if you want to enhance your embedded player with JavaScript, IFrame embeds allow you to do just that.

In March 2012, YouTube introduced a number of enhancements around list playback functionality that allow you to embed playlists, user uploads and searches in your webpages. In the rest of this article I'll show you how to use simple, no-JavaScript, IFrame embeds that load a single video or a playlist.

Note that most of the functionality I am about to discuss is also available in the object embeds.

Google Analytics Day of Week and Hour of Day Reports

Google Analytics provides very detailed analytics for your website; but there is always room for more. People who use (or have used) traditional web analytics software such as AWStats, Analog and Webalizer are familiar with the "days of week" and "rush hour" reports, neither of them are directly available in Google Analytics.

The traffic for a website vary by day of week and it is very useful to know when a website expects most (or least) visitors. Sometimes these statistics help you make decisions such as when to launch a promotion or take down a website for maintenance.

Bring Google Map v3 Markers to Front by Changing Z-Index

As mentioned in my earlier article on the same subject, the Google Maps API stacks the markers on a map based on their latitude — the markers appear in front of those that are vertically above them. This means that a marker that needs to be prominent might be buried below nearby markers, especially at lower zoom levels.

Google Maps API v3 allows you to change the stacking order of a marker using the zIndex property. The API automatically assigns z-index to markers; manually assigning a value higher than google.maps.Marker.MAX_ZINDEX will ensure that the marker stays in front of all markers with auto-assigned z-index.