From time to time it happens that we get good tips from our readers. One of these days I get a mail from one of Cashrevelations readers. The name of the reader is Jon. Jon wrote:

I subscribe to your site as I always enjoy your tutorials and informative posts. I would like to request a tutorial on how to convert a simple xhtml/css website into Wordpress. There’s nothing really out there that’s too clear or noob-friendly

And like president Obama would say: Yes, we can (write that tutorial)!

This tutorial will be in two parts and we will keep this first part as simple as possible. We will use an XHTML template, Natural Blues, by Reality Software (you can see a preview below) and convert it to a WP theme. In this first part of the tutorial we are going to do this by using a minimum of files to create a somewhat working WordPress theme.

You need to be able to test your theme before you put it online. We deeply recommend you to Install WordPress Locally On Your Computer - it is not difficult and it is fun.

1. Preparation

Create an empty folder and name it with your theme name, and in that folder you paste a copy of your XHTML template (with the stylesheet and images folder).

You should have the following files:

• One XHTML Template File
• One CSS Stylesheet
• One images folder

Open the HTML Template File and rename it to ‘index.php’ - and then open your CSS Stylesheet and rename it to ‘style.css’. If there is sample content in your template - remove all of it from the index.php. Keep the index.html for a while like a reference.

2. Add WordPress Theme Info To The CSS Stylesheet

Open style.css and paste the code below in the very top of the CSS stylesheet:

/*
Theme Name: YOUR THEME NAME
Theme URL: FULL HOMEPAGE URL OF THE THEME
Description: YOUR DESCRIPTION OF THE THEME
Author: YOUR NAME
Author URI: FULL URL OF YOUR HOMEPAGE
Version: OPTIONAL NUMBER
Tags: DESCRIBING TAGS SEPARATED WITH COMMAS
*/


Do not forget to paste (and change the capital letters to your information) this code to your stylesheet. This piece of code gives your new theme a name and all the other basic information needed by WordPress.

3. Add WordPress Template Tags To Your Theme

WordPress uses Template Tags to add content to your page. Below you have the basic tags you need to make a working WordPress theme.

Page Title

Open your XHTML template with your favorite text editor and change this:

 <title></title>

to this:

<title><?php wp_title(""); ?> <?php if(wp_title(" ", false)) { echo " | "; } ?> <?php bloginfo('name'); ?></title>

The CSS Stylesheet

Remove the CSS stylesheet linking (in the head section of the XHTML template) and replace it with this code:

<style type="text/css" media="screen">
@import url( <?php bloginfo('stylesheet_url'); ?> );
 </style>

Add Action Hooks

Just above the </head> tag, you paste the following code:

<?PHP wp_head(); ?>

And this code above the </body> tag:

<?PHP wp_footer(); ?>

These pieces of code make some WordPress plugins able to access your theme.

4. Add The WordPress Content Loop

The Loop is used by WordPress to display each of your posts. Copy and paste all this code inside the <div> where you want your content to appear (see the source files).

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

These tags below get the current post’s title, and other information (like date etc.):

<h2 id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

This tag displays the content of the post:

<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
 </div>

Below each post in the index.php file is a place to display more information (categories, date, and comment information):

<p class="postmetadata">
Posted in <?php the_category(', ') ?>
<strong>|</strong>
<?php edit_post_link('Edit','','<strong>|</strong>'); ?>
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>

The following tag ends The Loop:

<?php endwhile; ?>

This code is directly after the end of The Loop, displays navigation controls to move forward and backward:

<div class="navigation">
<div class="alignleft"><?php posts_nav_link('','','&laquo; Previous Entries') ?></div>
<div class="alignright"><?php posts_nav_link('','Next Entries &raquo;','') ?></div>
 </div>

If there is no posts to show up:

<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">
<?php _e("Sorry, but you are looking for something that isn't here."); ?></p>
<?php endif; ?>

The WordPress Codex has an excellent explanation of the The Loop in Action.

5. Add The Menu

Many XHTML templates have the top menu within an unordered list. In that case you remove everything between the <UL> tags, and paste this code between them:

<?php wp_list_categories('title_li=0'); ?>

Our template didn’t have an unordered list as a menu - so we must make some changes in the CSS stylesheet. You can see the changes we did if you download the source files to this tutorial. You can also read more about this in the WordPress Codex: wp_list_pages.

By now, you should have a functional WordPress theme. To take full advantage of the WordPress flexibility, you need some more work. It is now possible to use the theme as it is, but you will not be able to add widgets and people can not comment on your posts.

Add Some Extra Tags To Your WP Theme

RSS Feed & WP Version Info

Paste the following code to the <head> section of the template:

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href=">?php bloginfo('rss2_url'); ?>" />

This code will add WP version info and your RSS feed to your theme.

Blog Name

Paste this code to logo section of the theme:

<a href="<?php bloginfo('url'); ?/"><?php bloginfo('name'); ?></a>

In our case it was inside the <div id=”logo”></div> - this code will automatically display your blog name.

Images

If there are images in your template XHTML layout (you don’t need to do this with images in your stylesheet or posts), paste the following just before the image URL:

<?php bloginfo('template_directory'); ?>

For example, change this:

<img src="images/cnn.gif" alt="" />

to this:

<img src="<?php bloginfo('template_directory'); ?>/images/cnn.gif" alt="" />

Copyright

Paste this code to the footer section of your theme:

Copyright © 2010 <?php bloginfo('name'); ?>. All Rights Reserved.

In our case it was inside the <div id=”footer_left”></div> tags - this code will display copyright notice.

Now it is time to test your theme. Do not put it online before you have done that. It is always problems and some more tweaking before it is presentable - and to test your theme you use your local WordPress Installation.

This ends the first part of this tutorial. In the next part, we make this XHTML template to look more like a real WordPress theme (with sidebar.php, footer.php etc.). Good luck with your project, and do not forget to download the source files.

• Download The XHTML To WordPress Source Files

In this short easy-to-follow tutorial you will learn how to install WordPress locally on your computer. We will do the installation in the following order:

• Downloading Softwares
• Installation of XAMPP Lite
• Starting the XAMPP Lite
• Setting up MySQL Database
• Create a WordPress database user
• Installing WordPress

The installation of XAMPP Lite is really simple - a tutorial for that is almost not necessary, but it is here for reference reasons and you need only to read that part (The Installation of XAMPP Lite) if you run in to some problems.

Install WordPress On Your Computer Video Tutorials

This video tutorial in two parts on how to install WordPress on your Windows computer using XAMPP Lite teach out a slightly different method to make the installation.

• How to Run WordPress on Your Windows Computer Using XAMPP - Part 1
• How to Run WordPress on Your Windows Computer Using XAMPP - Part 2

One main difference is that the author chooses to make the XAMPP installation without the Installer and that is a bit more complicated (but not much more). If you feel for that, use the method in the video tutorial. Or use the videos like a reference.

The Downloads You Need

You need to download the following two softwares (links below). They are both free and can be downloaded without any prior registration.

WordPress Publishing Platform
WordPress is an open source blog publishing application powered by PHP and MySQL which can also be used for basic content management. It has many features including a user-friendly workflow, a rich plugin architecture, and an advanced templating system.

XAMPP For Windows - XAMPP Lite
XAMPP is an easy to install Apache distribution containing MySQL, PHP and Perl. XAMPP is very easy to use as well. Be sure to download the XAMPP Lite version, with the handy automatic installer (EXE), of the software.

That’s all you need to download. You are now ready to begin the installation.

The Installation of XAMPP Lite

The easiest way to install XAMPP Lite is to use the self-extracting archive - you can see images HERE. If you by some reason chose to install the XAMPP Lite without the installer, then you have instructions HERE

Installation

• Start the EXE file by double clicking on it (if you saved the archive before), choose a directory and click on “Install”.
• The first dialog box: asks you to select which language you prefer, select your language.
• The next dialog you will see is the first page of the XAMPP Setup Wizard - click next.
• The third dialog: choose a directory or destination for the installation - click next.
• The next dialog is the XAMPP Options dialog box. Choose install Apache and MySQL services - if you want you can also choose to create desktop icon and a folder in the start menu. Click Install.

You are now finished with the XAMPP Lite installation. The next you will do is to start up your Apache and MySQL services.

Starting the XAMPP Lite

To start up your Apache and MySQL services, do the following:

• Open the xampplite folder. You should be seeing a screen with these files:



• Double click on the file with the name “xampp-control”.
• The control panel looks like this:



• Click the Start button beside Apache. If you get a Windows Firewall warning: choose Unblock.
• Click the Start button beside MySQL. If you get a Windows Firewall warning: choose Unblock. If everything works, the control Panel log updated with “Running” with a green background besides the Apache and MySQL services.

You have now started the XAMPP Lite. You can test if it works by opening your browser and navigate to localhost using the following path: http://localhost.

More to read: XAMPP for Windows - The Installation

Setting Up A MySQL Database For WordPress

The easy way to create a MySQL database would be to use phpMyAdmin (it comes with the XAMPP Lite package).

• Navigate to phpMyAdmin through your web browser. The URL is: http://localhost/phpmyadmin/
• Create a WordPress database by entering in a name (In this tutorial we call it wordpress_db) and click the Create button. You can use the values exactly as they are on the image.

You have now created a database with the name “wordpress_db”.

Create a WordPress database user

• Go to phpMyAdmin home by either clicking on the logo on the top left or clicking on the home icon.
• Click on the Privileges tab and then click on “Add a New User”.
• For the User name field, type in any name, this tutorial uses “example_user”.
• For Host, select Local.
• See the image below on how to fill in your information. Click on “Generate” next to Generate Password.



• Write down the User name and Password you used, because you will need them later.
• Set the Global Privileges of “example_user”. For this local installation – just check all of them.
• Click the Go button to create the database user. You should now see a confirmation that you have created the user successfully.

Add your newly created user to the database you created earlier by in the “Database-specific privileges” fieldset, in the “Add privileges on the following database” field, selecting “wordpress\_db”.

You should now be finished with your MySQL Database setup.

More to read: phpMyAdmin - Documentation

Installing WordPress On Your Computer

• Unzip (extract) the WordPress ZIP file you downloaded and move the entire contents into the “htdocs” folder inside the XAMPP Lite folder.
• Inside the WordPress folder, open wp-config-sample.php file using your favorite text editor.
• Fill in the information with your own database information like, for example, this:

/** The name of the database for WordPress */
define('DB_NAME', 'wordpress_db');
/** MySQL database username */
define('DB_USER', 'example_user');
/** MySQL database password */
define('DB_PASSWORD', 'TypeYourPasswordHere');
/** MySQL hostname */
define('DB_HOST', 'localhost');

• Save your configurations like “wp-config.php” (not “wp-config-sample.php”).

Open your browser and navigate to the install script: http://localhost/wordpress/wp-admin/install.php. If you did install correctly, you should now see the WordPress welcome screen. Follow the instructions given by your WordPress installation.

You are now finished with installing WordPress on your computer.

More to read: Getting Started with WordPress

If you want a truly radical change of your blogs appearance, the absolute easiest way is to change your Blogger template. Here you can find some additional easy-to-follow info about that: How To Change Blogger Template.

Cashrevelations.com has selected out 5 simple Blogger tips we think you can use on your own blog even if you are an absolute beginner - Blogger tips that are easy to implement and make significant difference to your blogs functionality and appearance.

5 Easy Blogger Tips

1. LinkWithin - Related Posts With Thumbnails
LinkWithin is a blog widget that appears under each post, linking to related stories from your blog archive. The widget links to stories that are relevant and interesting to readers of a particular post, keeping them engaged with your blog, and increasing your traffic. The widget is free and ad-free - no signup required.
View Demo

2. Disqus Comments
Disqus Comments is a comment system and moderation tool for your site. This service lets you add next-gen community management and social web integrations to any site on any platform. Built-in compatibility with Disqus Profile means that you can encourage verified commenter profiles.

3. Feedburner
Cashrevelations.com uses Feedburner for feed statistics, adding feed flare enhancements to our feed and monitoring users subscriptions. It is an easy way to add a more “tasty” look for your feed and also more subscription alternatives to your readers. Blogger lets you specify your Feedburner info in the ‘Site Feed’ tab inside your dashboard.

4. Lijit Search Tool
Lijit provides a search tool that will not only search your blog, but also search the blogs of your choice, and related sites (like YouTube, Flickr, Picasa, del.icio.us, etc.) that you choose and you and your friends use regularly. You can see the tool in action HERE.

5. Social Bookmarking Widget
AddThis helps your users share your content everywhere. If you by some reason don’t like the design of the AddThis button, then Lavsak.com and Sociofluid.com offer copy and paste social bookmarking widgets of different styles. The Lavsak.com widget is not at all the same advanced as the AddThis widget but it is anyway an alternative.

If you search on Google you will find a lot of (more or less) simple and useful Blogger tips. But remember, too much widgets will dramatically slow down your blog and make it less attractive. Again, try out what’s working for your blog and think practically: do the last widget you added really fill any function? If not, remove it quickly. If you don’t see any reasons, no one else will either.

Choose out functions for your blog with moderation, and have the principles of simplicity and functionality in mind. And have a reason or goal with every single widget you add.

crearegroup: Nick and Michael from the Creare Group discuss the advantages of having a lean CSS file. They also go on to show some simple optimization techniques followed by a song to remember the process.

Creare Group is a web design and Internet marketing studio that specializes in web design, website optimization and marketing. On their YouTube channel you can find more interesting video tutorials on web design, SEO and related topics.

The Automated Online Alternative

Like with so many other things nowadays, CSS optimization and cleaning up can be done automatically with some of those various online web services, completely free of course. Below you find some handy online CSS resources that will do the work for you.

1. Code Beautifier
Code Beautifier CSS Formatter and Optimizer - Online CSS parser and Optimizer.

2. CSS Redundancy Checker
Use this tool to find CSS selectors that aren’t used by any of your HTML files and may be redundant. Manually enter the URI for each page that you want to test.

3. Online CSS Optimizer
Online CSS Optimizer is a web tool for reducing the file size of cascading style sheets. The result might look messy sometimes, so be sure to back up your original file before using the optimized one.

4. Format CSS
Automatically format your CSS so they are easy to read and edit. You can use this tool to reorganize your CSS. Simply submit your cascading style sheet, and you will receive a suggested reorganization.

5. CSS Validation Service
Check CSS and (X)HTML documents with style sheets. The W3C CSS Validation Service is a free software created by the W3C to help Web designers and Web developers to check Cascading Style Sheets.

If you are interested of further improvement of your CSS, Cashrevelations.com has collected some CSS resources you can use for free: 60 Tools To Optimize Your CSS.

News on different JavaScript techniques is coming often recently. In our article 100 Ajax And JavaScript Techniques we tried to cover what we considered as the most useful techniques. But since then there is more fresh news on the MooTools horizon. For some time ago we did a follow up article on JavaScript techniques, 10 New jQuery Techniques, and we decided to do something similar with MooTools - a short update on MooTools.

The MooTools news items in this list are released or updated during the period October to December 2009 - as far as we can understand. You are so welcome to update us if you think something is missing in the list.

Wikipedia: MooTools is an open source, lightweight, modular object-oriented programming JavaScript web application framework released under the MIT License.

Cashrevelations.com presents 10+ New MooTools Techniques with demos you can use for your site or blog. It is also possible you might be interested to take a closer look at the MooTools JavaScript Framework - MooTools.net.

MooTools Techniques

1. MooTools ScrollSidebar
ScrollSidebar allows you to attach an element to a place on the screen and animate the menu to the current scroll position.
View Demo

2. Retro Animated Flip-Down Clock
In this tutorial, you will create an animated flip down clock inspired by the 70’s. Using the Mootools framework, Alexandru Pitea tried to replicate the flip action of the pads and make it as lifelike as possible.
View Demo

3. Icons To External Links
A trend going on around on websites is putting icons on links that point to web pages externally. If you want that on your site, this simple script will dynamically take care of that for you with the help of Mootools and some CSS.
View Demo

4. New York Times-Style Text Selection Widget
NYT’s text selection widget listens for text selection and presents the user with a “search” icon they may click on to learn more about that term. Also available as jQuery.
View Demo

5. Floom - Blinds Effect MooTools Slideshow
Floom is a Blinds-effect MooTolls slideshow plugin. There are two ways of setting up Floom. One is the object way, where you specify the image url and the caption using the key-value notation. The second one is by simply passing an element collection, ie. $$('#blinds img'), where the passed element has to be the actual image collection.
View Demo

6. Mootools 1.2 cvLinkSelect Class
This class links the select boxes to each other. When you change the first select element the options for the following select boxes are loaded.
View Demo

7. Thumbnail Hover Effect Using Mootools
Image is splitting in the middle using two instances of the same image. One instance goes toward left while second image goes right, in effect giving an illusion that image is splitting in middle.
View Demo

8. Pull Quotes With MooTools
Chris Coyier authored a post titled Better Pull Quotes: Don’t Repeat Markup a while back. In his post he created great-looking pull quotes without repeating any content — instead he uses jQuery to dynamically create the pull quotes. The following is the MooTools method for doing so.
View Demo

9. Animated TwitterReader
Animated TwitterReader class with MooTools. The MooTools plug-in for downloading and displaying Twitter status via Twitter Search API - created by Jakub Karlec.
View Demo

10. Mootools Navigation Plugin
The goal of this plugin is to create a complex navigation menu as seamless as possible. All you need to do is create a standard unordered list and the plugin will do the rest.
View Demo

11. Depender
A new plugin called Depender which uses MooTools dependency mappings to allow you to lazy load additional scripts on the fly based on what you need.
View Demo

12. MooShell - Shell Editor
MooShell Shell Editor allows you to paste your HTML, CSS, and MooTools JavaScript into the page and easy test your snippets before implementing.
View Demo

The MooTools Techniques are not in any particular order and as usual you decide what fits best for your purposes and demands - and Cashrevelations.com is not affiliated with any of the plugin or tutorial authors.

More about JavaScript:

• 100 Ajax And JavaScript Techniques
• 40 JavaScript Tools
• 10 New jQuery Techniques

Wikipedia: jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. Licensed under the MIT License and the GNU License.

Cashrevelations.com presents 10 New jQuery Techniques with demos that can enhance and bring some interactivity to your website or blog and with that make them a bit more user friendly. You might also be interested to visit jQuery - The JavaScript Library.

jQuery Techniques

1. Interactive Picture With jQuery
In this tutorial you will learn how to piece together an interactive picture – aka an image that contains tooltips and popup boxes. The original inspiration for this tutorial came from the IKEA website.
View Demo

2. jCapSlide - jQuery Image Caption Plugin
Plugin for creating nice sliding captions for images. When hovering over the image, the caption appears and the image gets a semi-transparent color overlay.
View Demo

3. TopUp - JavaScript Pop Up
TopUp is an easy to use JavaScript library for unobtrusively displaying images and webpages in a Web 2.0 approach of popups. The library is jQuery and jQuery UI driven in order to maintain cross-browser compatibility and compactness. Beta release.
View Demo

4. jQuery Twitter Ticker
In this tutorial you will learn how to create a jQuery & CSS twitter ticker which utilizes Twitter’s Search API. It will show your or your friends’ latest tweets, and will not require any server side code or databases.
View Demo

5. Twitter Trackbacks Widget - jQuery Plugin
Highly customizable Twitter trackbacks widget to integrate tweets that mention your post into your blog. Each tweet comes with reply and retweet links to get more readers engaged in your story conversation. Display tweets as a bar with transition effects or as a fixed list. Many transition options like opacity, height and font-size.
View Demo

6. jQSlickWrap - Slick Text Wrapping For jQuery
jQSlickWrap is a plugin for jQuery which allows you to wrap content around irregularly shaped images, easily. Use float and padding CSS styles to specify how the wrapping will work. Written with Progressive Enhancement in mind.
View Demo

7. jFeedback - Minimal jQuery Notification Plugin
A minimal way to notify users of success or error, based on Twitter’s bar and jBar. The notification consists of a simple “OK” or “Error” icon which the user can decide to click if he is interested in the details of the notification.
View Demo

8. jPaginate - Fancy jQuery Pagination Plugin
jPaginate is a jQuery pagination plugin that comes with a twist: animated page numbers. The user can slide through the available page numbers by clicking or just hovering over the arrows. Shortlinks to the first and last page are available as well.
View Demo

9. Flips - jQuery Plugin
Plugin for creating sliding boxes, that allows to show more boxes on one place. There is arrows to control which box is shown, many options like speed, auto-change interval, sides, button labels can be set.
View Demo

10. jQuery Slider Plugin - Safari Style
jQuery Slider is easy to use and multifunctional jQuery plugin. Helps you to build a range slider with Safari Style. Useful and usable on for example real estate websites.
View Demo

The jQuery Techniques are not in any particular order and as usual you decide what fits best for your purposes and demands - and Cashrevelations.com is not affiliated with any of the plugin or tutorial authors.

More about JavaScript and AJAX:

• 100 Ajax And JavaScript Techniques
• 40 JavaScript Tools

BloggerHelp: Need help getting started with Blogger? Check out this quick tutorial! Please help The Blogger Team improve their videos by filling out this short survey: Blogger Help Video Satisfaction Survey.

The BloggerHelp’s Channel on YouTube also has a couple of easy-to-follow tutorial videos covering the very basic on how to manage your Blogger account. The videos are made for absolute beginners of Blogger blogging platform, and they describe in a very easy and straight forward way different managing tasks in Blogger.

• BloggerHelp’s Channel

YourBusinessChannel.com is an online TV channel where respected names in business give you free guidance on almost every aspect of business. The tutorials are promoted to a global audience of business people who can access the shows through their own site and syndicator sites. Many of the tutorials and shows are also available on YouTube.

They produce a series of easy to follow Twitter video tutorials that covers some of the basics and also gives you some ideas on extended use of Twitter - fully in line with their commitment “to always have the latest tips and advice from market leaders, innovators and the people who have really made a difference in business”.

The video above, Twitter Tutorial - How To Attract More Followers, is an example of the straight forward and visually appealing video tutorials they offer. This specific video gives you some basic Twitter profile tips, but there are some video tutorials that cover more advanced social marketing techniques.

To access the Twitter video tutorials, use The links provided in this article and search for “Twitter”. Take also a quick look on the other video tutorials while you are there.

By the way, I would like to take this opportunity to promote our Twitter profile. Follow us and get the most important updates on Cashrevelations and general webdesign tips and more: Cashrevelations.com on Twitter.

• Twitter Video Tutorials
• YourBusinessChannel.com

JavaScript is becoming more common in modern web designs and when it is done with taste and moderation it can enhance the user’s experience and provide interactivity to your website. The secret is balance. To not have too much JavaScript and to use the right techniques for your purposes.

Wikipedia: JavaScript is an object-oriented scripting language used to enable programmatic access to objects within the client application and other applications.

There is a lot you can do with JavaScript - form validation, stylish navigation, amazing slideshows, tool tips, interactivity and more can be achieved with some JavaScript code.

Cashrevelations.com presents 100+ Ajax and JavaScript techniques with demos that can make your websites visually and interactively more interesting or user friendly. They are all more or less easy to configure, but perhaps this is not the first thing you should do if you just have learned to build websites - but on the other hand, It doesn’t harm to try.

LIST CONTENT

• General Navigation
• Traditional Menus
• Forms And Auto-Complete
• Form Validation And Hints
• File Upload
• Tables
• Tool Tips And Boxes
• Calendars And Timelines
• Image Previewing
• Slideshow
• Lightbox
• Image Effects
• Image Cropping
• Content Sliders
• Interactivity And Communication
• Miscellaneous

MooTools, jQuery, Prototype and script.aculo.us are among the techniques represented in this list and we have tried to categorize them in a practical and easy searchable way.

Navigation

General Navigation

1. Filterable Portfolio with jQuery
In this tutorial, Trevor Davis, a 25 year old front-end developer, will show you how to make “filtering by category” a little more interesting with just a little bit of jQuery.
View Demo

2. jQuery ListNav Plugin
This jQuery plugin supplies an easy way to unobtrusively add a letter-based navigation widget to any UL or OL list. An easily stylable nav bar appears above the list, showing the user the letters A-through-Z. Clicking one of the letters filters the list to show only the items in the list that start with that letter.
View Demo

3. Ext Accordion
The Accordion widget and its InfoPanel are components that use the Ext JS Library. It can be used for page navigation, tool windows, hide-able details, log-in forms, options dialogs, sticky notes and more.
View Demo

4. Yetii – Yet (E)Another JavaScript Tab Interface
Yetii is a functional tab interface implementation. It has lightweight, object-oriented code and degrades gracefully in browsers without JavaScript-support. You can have many independent tab interfaces on a single page, specify initial tab, turn on automatic tabs rotation, add next/previous navigation, nest one tab interface inside another and define custom function to run after certain tab is clicked.
View Demo

5. Apple Style Menu Improved With jQuery
How to create a similar main navigation like the one of kriesi.at - a so called kwicks menu. Build an Apple-flavored Leopard-text-indent style menu from scratch in Photoshop, then create the needed HTML and CSS and last but not least improve it via jQuery.
View Demo

6. Jquery Fade In And Fade Out
A fade in fade out effect - the effect fades an element to 30% on arrival of the website, then when you hover over it, it fades to 100%. The effect can be assigned to basically anything in a website whatever it be an image, text, a link or even a div.
View Demo

7. Morph Effect On Mouseenter And Mouseleave With Mootools 1.2
In this tutorial, you will see how to add some amazing effects to an unordered list on mouseover with the Element Method: morph and to make the whole list item region clickable with Mootools - and turn it into something fun to click.
View Demo

8. Ajaxify - JQuery Plugin
Ajaxify can convert all links in a web page into an ajax load and submit requests. You can build a complex ajax website with one single line. Some features are Ajax GET and POST requests, history and bookmarking support, animations and more.
View Demo

9. Sliding Boxes And Captions With JQuery
All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.
View Demo

10. Accordion And Hover Effects With JQuery
This tutorial video (QuickTime version is 60Mb - flash version is streaming) explains how the accordion and hover effects on Tim Van Damme’s site can be achieved using jQuery.
View Demo

11. Outside The Box - Navigation
Just about every website uses the regular navigation concepts we’re all used to. After a while this can get pretty boring, especially for designers who thrive on creativity. While mimicking the OS X dock and stacks isn’t new, it’s certainly not common.
View Demo

12. Powerful Product Highlighter With MooTools
This tutorial will help you to create a flexible tool for highlighting your sites products or services using the MooTools JavaScript framework - a clever rollover mechanism that works well as a product highlighter.
View Demo

Top

Traditional Menus

13. jQuery Context Menu Plug-In
A context menu plugin for jQuery that features easy implementation, keyboard shortcuts, CSS styling, and control methods. It was designed to make implementing context menu functionality easy and requires minimal effort to configure.
View Demo

14. Smooth Animated Menu With jQuery
In this tutorial Zach Dunn will teach you how to build a nice jQuery menu with a smooth transition animation effect.
View Demo

15. Fading Menu – Replacing Content
When a menu item is selected, its graphic is shown at full opacity and its corresponding content area is shown, while the other menu items are faded and their content areas hidden. With jQuery, you can fade in the menu item being clicked, fade out all other menu items, display the corresponding content area and hide all the other.
View Demo

16. e24TabMenu – Drop down AJAX Menu
e24TabMenu is a plugin written for scriptaculous. In this tutorial Alfredo Artiles teaches you how to make a nice tab menu that expands and collapses smoothly.
View Demo

17. A Different Top Navigation
In this tutorial you will use jQuery to create a different multi-layered horizontal navigation system that is still intuitive enough for anyone to use for the first time.
View Demo

18. SpriteMenu
This is a method of putting together a nice-looking menu in a very quick and easy way. It uses a technique known as CSS Sprites. The menu is displayed by manipulating the background-position property to display individual sprites in the image.
View Demo

19. Image Menu
A horizontal menu that reveals more of the image as you rollover it. Features 2 optional onClick events (open and close), href passed to onClick events, stays open when clicked, closes when clicked and selects item to pre-open.
View Demo

20. Proto.Menu - Prototype Based Context Menu
Proto.Menu is a simple and lightweight prototype-based solution for context menu functionality on your page. Plays nice with JS turned off and menu styling can be easily defined in external stylesheet.
View Demo

Top

Forms And Tables

Forms And Auto-Complete

21. Changing Form Input Styles On Focus With jQuery
This tutorial will show you how to spice them up with CSS classes and default values that change according to which form item is selected. All with just a splash of jQuery.
View Demo

22. FancyForm
FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s accessible, easy to use and degrades gracefully on all older, non-supporting browsers.
View Demo

23. Incredible Login Form With jQuery
One struggle that still remains today in web design is displaying all of the redundant information on every page. For example, a login form. What if there was a way to easily make the content accessible on every page, but keep it hidden until needed? Well you can, by making a top panel that when clicked, will reveal its self and its content.
View Demo

24. Editable - JQuery Editable Plugin
This is a real customizable jQuery editable plugin. Currently it can convert any tag to text input, password, textarea, drop-down list. You can easily extend it by adding your own input type using its editableFactory object.
View Demo

25. Google Suggest Style Filter - AutoComplete Control
Create a Google Suggest-style filter with AutoComplete Control. AjaxControlToolkit’s AutoComplete control can be used with a data grid.
View Demo

26. Autocomplete - JQuery Plugin
Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering. By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from.
View Demo

27. Auto Complete To Your Google Custom Search Engine
This tutorial will show you how to use the “Popular Queries” feed from your Google Custom Search Engine (CSE) as a data source for a jQuery autocomplete.
View Demo

28. Ajax Fancy Captcha - JQuery Plugin
Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. Captcha’s security level is medium, with the emphasis on nice looking and user friendly qualities while still offering reasonable protection from unwanted “guests”. Basic design and its elements are easy to change and customize.
View Demo

29. Proto! - TextboxList Meets Autocompletion
This is the Prototype version of the extended script by Guillermo Rauch. As with the previous script, this script has been converted and operates like the original.
View Demo

Top

Form Validation And Hints

30. Using Input Values As Hints
Give your visitors a hints on what to write in textfields. Each of the fields auto-clear when the user clicks it. If nothing at all is entered, the hint reappears once the visitor decides to move away.
No Demo

31. FormCheck
FormCheck is a MooTools class that allows you to validate a form by performing different tests before submission - installation tutorial and examples.
View Demo

32. fValidator
fValidator is a free, open-source and unobtrusive JavaScript tool for handling form validation easily.
View Demo

33. Custom Form Elements
This CFE script enhances form elements including radio buttons, checkboxes, file upload, textfield, textarea, images and the select, submit and reset buttons.
View Demo

Top

File Upload

34. FancyUpload - Swiff Meets Ajax
FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup and styleable via CSS and XHTML and uses MooTools to work in all modern browsers.
View Demo

35. Uploadify - JQuery File Upload Plugin Script
Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.
View Demo

36. Multiple File Uploader - Mootools Version
A script that allows you to create a form in which your visitors can upload more than one file using MooTools.
View Demo

37. Extension - UploadForm
The Ext UploadForm is Ext.form.BasicForm extension for easy upload of (multiple) files to a server. The files are added to a queue first then they are uploaded to the server. Files can be removed from queue individually before upload or whole queue can be cleared. Result of upload is shown for each file by the success or failure icon.
View Demo

Top

Tables

38. TinyTable JavaScript Table Sorter
Easy to use JavaScript table-sorting script. Features column highlighting, optional pagination, support for links, date/link parsing, alternate row highlighting, header class toggling, auto data type recognition and selective column sorting.
View Demo

39. JavaScript Tabifier
Automatically creates an HTML tab interface using plug-and-play JavaScript. Does not require you to set up a list of links, or anchors for the tabs, and you can use CSS to customize the appearance of the tabs.
View Demo

40. Accessible Charts And Graphs From Table Elements
The plugin provides a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.
View Demo

41. Table With Dynamically Highlighted Columns
When you click on “Sign Up” for an option on Crazy Egg’s pricing table, that plan’s column highlights, the other plans vanish, and a signup form takes their place. There is a number of impressive things happening within this small area. The CSS Guy wanted to try and recreate the behavior step by step, and share the power of combining CSS, JavaScript, and images in clever ways.
View Demo

42. TableGear
TableGear is a software package for working with data on the web. It is designed get your data into a web page, and let you work with it quickly and easily, the way you would in powerful desktop applications like Excel.
View Demo

Top

Tool Tips And Boxes

43. Duplicate the jQuery Homepage Tooltips Using MooTools
The jQuery home page has a pretty suave tool tip-like effect, as seen above. Here’s how to accomplish the same effect using MooTools.
View Demo

44. qTip - The jQuery Tooltip Plugin
qTip is an advanced tooltip plugin for the jQuery JavaScript framework. Built from the ground up to be user friendly, feature rich, qTip provides you with tonnes of features like rounded corners and speech bubble tips.
View Demo

45. MooTooltips - JavaScript Tooltips With MooTools
MooTooltips can display tooltip messages from HTML elements, Ajax calls or text added manually. Tooltip parameters can be passed either when instantiating the class or on the rel element parameter.
View Demo

46. Coda Popup Bubbles
In this tutorial you will learn how to create Coda’s ‘puff’ pop-up bubbles, shown when you mouse over a downloadable image. This effect can be perfected by changing the initial reset code to read from the trigger element and approximate it’s position.
View Demo

47. Prototip 2
Prototip allows you to easily create both simple and complex tooltips using the Prototype JavaScript framework. You can easily customize it, control the tool tip position and get configurable rounded corners (with no PNG images required).
View Demo

48. Better Tooltip With JQuery
Browsers will automatically display a tooltip when you provide a title attribute. In this tutorial Jon Cazier is going to show you how to quickly write a jQuery plugin that will replace the typical browser tooltip with something a little flashier.
View Demo

49. MoreCSS
An easy to use, lightweight and fast JavaScript toolkit/library with CSS syntax for common things. With only 8 KB and it’s CSS like syntax MoreCSS is perfect for all the daily JavaScript things: popups, tabs, tooltips and more.
View Demo

50. - Link is deactivated due to hacker attack on Web2Ajax.com
FaceBook Like – jQuery and autosuggest Search Engine. Features autosuggest and ajax support, support search plugins, support cache and cross browser support.
View Demo

51. Facebook-Style Modal Box Using MooTools
Facebook’s Modal box is one the best modal box around. It’s lightweight, subtle, and very stylish. David Walsh has taken Facebook’s imagery and CSS and combined it with MooTools’ awesome functionality to duplicate the effect.
View Demo

52. GlassBox
GlassBox is a lightweight JavaScript User Interface (UI) library, which uses Prototype and Script.aculo.us for some effects. GlassBox lets you easily build lucent borders, colorful layouts and “Flash-like” effects.
View Demo

Top

Calendars And Timelines

53. Elegant Animated Weekly Timeline
This tutorial explains how to design an elegant and animated weekly timeline, with daily annotations, you can customize and reuse quickly in your web projects.
View Demo

54. Unobtrusive Date-Picker Widget V4
This unobtrusive datePicker (calendar), which is accessible using the keyboard, requires no embedded JavaScript blocks, uses no pop-up windows and is suitable for use within documents served as application/XHTML+XML.
View Demo

55. Date Picker - jQuery Plug-In
Date Picker component with a lot of options. Date Picker allows users to easily select a date or range of dates. Some features are: multiple calendars; single, multiple and range selection; marking of special, weekend and special dates; an easy-to-customize look via CSS and more
View Demo

56. JQuery Interactive Date Range Picker With Shortcuts
Date Range Picker plugin uses jQuery UI 1.7 and the new jQuery UI CSS Framework. This plugin wraps the jQuery UI datepicker into an interactive component specifically designed for choosing date ranges.
View Demo

57. Calendar - A JavaScript Class For Mootools
Calendar is a JavaScript class that adds accessible and unobtrusive date-pickers to your form elements. Features highly configurable inputs and selects, multi-calendar support, variable navigation options and multi-lingual and fancy date formatting.
View Demo

58. Scrollable Timelines
Making use of the overflow and scrollLeft DOM property to scroll elements is a much more effective use of the CPU, over animating using CSS top/left. This tutorial demonstrates the same effect used in two completely different ways.
View Demo

59. MooGenda - JavaScript Calendar Based On MooTools
MooGenda is a calendar based on MooTools, that reads events from JSON requests. Supports double click on event to see the deafult event view and features also drag and drop event in month view, drag and drop and resize event in diary view and every change send a request to back end (to store when and what changed in the event).
View Demo

60. MooTools Events Calendar
The MooTools Events Calendar is a JavaScript calendar class that was built using the MooTools framework - the calendar supports week/day/month view and the addition of events.
View Demo

Top

Image Handling And Sliders

Image Previewing

61. imgPreview - jQuery Plug-In
The ‘imgPreview’ plugin allows your users to preview an image before clicking on it and, out of necessity, will preload the image so when a user does click through to it there is no waiting time. The image preview shows up in a tooltip-like box appearing alongside the user’s cursor when hovering over a link.
View Demo

62. SlideItMoo - Image Slider
SlideItMoo is a banner and image slider developed with MooTools. The image slider supports continuous sliding when navigating, offers the possibility to set how the slider will slide (from left or from right) when used with the auto slide feature on, offers the possibility to give it the item width (width of the slider’s items) and let it display the elements according to that width and the visible items parameter.
View Demo

63. Fancy Thumbnail Hover Effect With JQuery
This is a thumbnail hover effect jquery and CSS tutorial. If you switch up the absolute potion coordinates, you can create various ways the hover effect pops out as well.
View Demo

64. FancyZoom Meet Prototype
FancyZoom uses Apple’s rounded corners and supports pretty much any HTML you can throw in a div (images, text, Flash, etc.). It was built using script.aculo.us and Prototype - it now works with any HTML already included on the page.
View Demo

Top

Slideshow

65. Moving Boxes
A jQuery slider with buttons to change panels, and the panels zoom in and out.
View Demo

66. Supersized – Full Screen Background/Slideshow jQuery Plugin
Supersized features include: cycles Images/backgrounds via slideshow with transitions and preloading, navigation controls allow for pause/play and forward/back, resizes images to fill browser while maintaining image dimension ratio.
View Demo

67. Animated JavaScript Slideshow
This dynamic JavaScript slideshow is feature packed and under 5KB. A few features include description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status.
View Demo

68. Easy Slider 1.7 - JQuery Plugin
JQuery plugin for sliding images and content. Easy Skider features include: auto-slide, continuous sliding, “Go to first” and “Go to last” buttons, hiding controls, optional wrapping markup for control buttons, vertical sliding, multiple sliders on one page.
View Demo

69. Image Rotator With Description
Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch.
View Demo

70. BarackSlideshow
BarackSlideshow is a very tiny and lightweight slideshow script, that takes the power of MorphList to enhance visualization and navigation of the images.
View Demo

71. noobSlide - MooTools
An easy to install and flexible slider plug-in created by using MooTools. The download includes a ready page example.
View Demo

Top

Lightbox

72. Lightview - Overlay Anything With Style
Lightview was built to change the way you overlay content on a website. Designed to complement your content, and features include: smart image preloading, customization without CSS, adjustable rounded corners, no PNG required, resizing to always fit the screen and one-click slideshow.
View Demo

73. LightWindow
The ultimate modal window system, LightWindow, allows you to build your own theme, create mixed media galleries including flash, quictkime and images.
View Demo

Top

Image Effects

74. jParallax
jParallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse.
View Demo

75. swfIR - swf Image Replacement
Using JavaScript and Flash, swfIR gives you the ability to apply an assortment of visual effects to any or all images on your website.
View Demo

76. Animated Postcard With jQuery
In this tutorial we will learn the basics of setting up a continuous animation which can be applied pretty much anywhere. Sam Dunn will teach you the art of looping animations using setTimeout(), how to take advantage of the Easing plugin and a new way to spice up your banner.
View Demo

77. BBC Radio 1 Zoom Tabs
How to achieve the effect on the latest BBC Radio 1 website, where the mouse rolls over the image block, tabs slide up and the image zooms a little to reveal more of the picture.
View Demo

78. Animate Image Filling Up Using jQuery
Spruce up your website’s header by letting Sam Dunn teach you how to make an image appear to fill up with just a splash of jQuery and Photoshop.
View Demo

Top

Image Cropping

79. UvumiTools Crop
This simplified tool gives your users the ability to create a selection area that can be used to crop an image live on your web site. This is an extremely useful tool for any site that provides image hosting, for example.
View Demo

80. Jcrop - The jQuery Image Cropping Plugin
Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.
View Demo

Top

Content Sliders

81. Ultra Versatile Slider
In this tutorial Antonio Lupetti explains a simple step-by-step way to implement an ultra versatile slider with horizontal scrolling and animated effects using MooTools.
View Demo

82. Mootools Slider With Two Knobs
Mootools slider with two knobs (double pinned slider) with range indicator. You can easily change the look and feel of the range indicator, slider knob, the slider track by modifying the slider.css.
View Demo

83. Mootools CSS Styled Scrollbar
A small piece of JavaScript that creates a CSS-styled scroll bar from the MooTools “slider” class.
View Demo

84. AnythingSlider - JQuery Plugin
This new AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders Chris Coyier created and adding new features. In other words, to create a really “full featured” slider that could be widely useful.
View Demo

85. Fantastic News Ticker Newsvine-Like Using Mootools
In this tutorial Antonio Lupetti teachs you how to in a simple way implement a Newsvine-like News Ticker (with news vertical scrolling) on your website.
View Demo

86. Amazon Books Widget With jQuery And XML
It makes sense to forgo database tables and server-side code when you need to store a limited amount of non-sensitive data. Accessing this data can be a snap with jQuery because the library was built to traverse XML documents with ease. With some custom JavaScript and jQuery magic you can create some interesting widgets. A good way to demonstrate this functionality is by building a browsable Amazon.com books widget.
View Demo

Top

Interactivity And Communication

87. Starbox - Rating Stars For Prototype
Starbox allows you to easily create all kinds of rating boxes using just one PNG image. The library is build on top of the Prototype JavaScript framework. For some extra effects you can add Scriptaculous as well.
View Demo

88. JQuery Plugin For Zoomable And Interactive Maps
A jQuery plugin for zoomable and interactive maps - the map was made to be as appealing as possible by using crisp graphics and smooth animations.
View Demo

89. Digg-Style Post Sharing Tool With JQuery
Kevin Liew will show you how to create a social bookmarking tool that looks similar to digg’s. He also includes the komodomedia’s social bookmarking icons and a long list of submission URL for one click bookmark.
View Demo

90. Ajax IM
Ajax im is a browser-based instant messaging client. It uses AJAX to create a near real-time IM environment that can be used in conjunction with community, intranet, and social websites. Demo usernames are “test”, and “test (1 to 4)”. Password is “test”.
View Demo

91. Drag To Share
We’ve all seen the brilliant functionality on Mashable where news stories and interesting articles can be shared to social networking sites; the functionality is driven by the images accompanying the articles; you click and hold on an image and can then drag it into a toolbar to share it. In this tutorial Dan Wellman is going to show you how you can replicate this behavior with jQuery and jQuery UI.
View Demo

92. Better Blogroll - Dynamic Fun With SimplePie And JQuery
A traditional blogroll is a simple list of other sites, often in the sidebar. Let’s improve upon the concept of a blogroll by not just listing sites, but dynamically pulling recent headlines from them, and using some fun jQuery animation.
View Demo

93. Twitter Friends And Followers Widget - JQuery Plugin
Here is a jQuery plugin that you can embed anywhere to display pictures of your Twitter followers or friends (whom you follow) and their latest tweets if you like.
View Demo

94. Search And Share
Search and Share makes highlighting text to a more functional action. More specifically, it attempts to understand the intention of a user’s text selection and presents a variety of options accordingly.
View Demo

95. Realtime Related Tweets Bar - JQuery Plugin
A real-time tweets bar related to your posts from your twitter timeline or from anybody or even limit it by a geocode coordinates. Features; show realtime related tweets based on your post tags, show your twitter timeline (related to your post or not), return only tweets with links or return all and more.
View Demo

96. jsDraw2D - 2D Graphics Library For JavaScript
This is a pure JavaScript library to draw 2D graphics on web pages inside web browser without using SVG or VML. JavaScript developers, web developers and webmasters can take advantage of the library to add graphics drawing functionality to their web applications or websites using the library.
View Demo

Top

Miscellaneous

97. Typeface.js - Rendering Text With JavaScript, <canvas>, And VML
Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.
View Demo

98. FontEffect - JQuery Plugin
Font effect is a jQuery plugin that adds some effect to html text. The available effects are Outline, Shadow, Gradient and Mirror. No images are used for these effects and no additional CSS is necessary. All effects are contained in the plugin and do not interfere with page rendering in older browser or browser with JavaScript disabled.
View Demo

99. Ajax Page Loads Using MooTools Fx.Explode
When you click on any of the designated Fx.Explode elements, the elements “explode” off of the screen. Click again and they magically reappear.
View Demo

100. Step By Step - Show And Explain Visitors What Your Page Has For Them
You might have encountered interactive demos created with screencasting and screengrabbing software that explain an interface to users in a step-by-step manner. This is exactly what this script does for web sites.
View Demo

101. Music Player In JQuery
In this tutorial you create an amazing music player coded in xHTML and jQuery that made use of mouse gestures and hotkeys. You can click and drag with mouse to interact with interface’s music player or use directional keys and spacebar instead of mouse.
View Demo

102. Skype-Style Buttons Using MooTools
JQuery expert Janko Jovanovic dropped a sweet tutorial showing you how to create a Skype-like button using jQuery. David Walsh was impressed by Janko’s article so he decided to port the effect to MooTools.
View Demo

103. Folder Collapser For Dynamic Content
How to create a group of collapsible folders using pure JavaScript and some JQuery added to the final product to give it a little bit of flare. The code will be structured in such a way that allows for implementation into a dynamic page - wherein the number of folders may be unknown.
View Demo

104. Twitter-Like Load More Widget
Twitter uses a brilliant technique for loading more information; you click the link and fresh items magically appear on the screen. This tutorial teaches you to use AJAX, CSS, JavaScript, JSON, PHP, and HTML to create that magic. This tutorial will also feature both jQuery and MooTools versions of the script.
View Demo

105. Web 2.0 Document Search Site
In this tutorial we will create a document searching site with jQuery. This site will be used to search documents by specifying an extension (file type). The data is then filtered and sent to Google.
View Demo

Top

The resources are not in any particular order and as usual you decide what resource fits best for your purposes. Cashrevelations.com is not affiliated with any of the authors.

• Part Two: 40 JavaScript Tools

People use Blogger in different ways and for various purposes. Many of the bloggers on Blogger don’t get the attention they deserve although they have very appealing blogs (see some examples below) with great and interesting content.

• Sarah’s Covenant Homes
• The Seeker
• Dolce far niente
• The V Factor
• 18thC Cuisine

Changing the look of your blog does not guarantee automatic success, but it does give you some advantage to build upon. And if changing the look of the blog is free and easy, why not giving it a try?

In this article we will change the appearance of your Blogger blog by using an extern template (not provided by Blogger). If you are a driven blogger, there’s no reason for you to continue to read - you could find something else to read on Cashrevelations.com. But if you just have begun to use Blogger, then this article could be for you.

Preparations

Remember to backup a copy of your current Blogger template. If something goes wrong or if the new template isn’t that great after all, it is possible you might like to change back to your current template.

How To Backup Your Template

1. Login to Blogger
2. After entering the Dashboard page - click Layout.
3. Then click edit HTML tab.
4. Click the Download Full Template link.
5. Choose where to save and name the file - click the Save button.
6. Finished - you have now a backup of your template

You could create a folder on your computer called “Blog Templates - Back-Up” and “Blog Widgets - Back-Up” or something similar. The important is to have some kind of system - templates and backups have a habit to be mysteriously absent when you really are in need of them. Do the same with all files which belong to your blog.

Bare in mind that once you upload a new template, all your widgets configurations can be lost. You can use Notepad and save your widgets configurations by the “copy and past” method. A tip is to take a screenshot of your widget configuration in the Layout section of your Dashboard - it will not save your configuration but at least it will help you to remember what widgets you use before you change the template.

Read More:
How to Back up Your Blogger Widgets
How To Download Or Backup Blogger Blogspot Posts And Comments

Find A New Blogger Template

If you search for “free blogger template” in Google you will get more results than you ever will have strength to go through. You have to ask yourself seriously what your practical and aesthetic needs are - and then choose from that.

A good idea is to keep it as clean as possible - cluttered templates with many widgets take time to load and can be extremely annoying and confusing.

Some Blogger Templates You Can Use For Free

1. Butterfly by Blogger Tricks
Butterfly is originally a Wordpress theme designed by Templates4all.com converted into Blogger format. The template comes with two sidebars in the left and the main column in the right side. The highlight of the template is the mind blowing vector header.

2. Pepper by Web2Feel
Pepper is a 3 column Blogger Template. The template was orginally a Wordpress theme designed by Jinsona of web2feel.com and then converted into Blogger format. The template has built-in spots for 125×125 ads. Suitable for personal and affiliate blogging.

3. Portfolio Press by Blog Oh! Blog
2 Columns and fixed width template. Designed for Wordpress by Blog Oh Blog and adapted for Blogger by Anshul Dudeja. A dark and clean Blogger template suitable for photography and personal pages. Could also be used for product portfolios.

4. Just News by Dhampire
2 Columns Blogger template with fixed width. Originally designed for Wordpress by New WordPress Themes and adapted for Blogger by Dhampire. The template has built-in spots for 125×125 and 468×60 ads and is suitable for affiliate marketers.

5. Whiteness by Quite Random
A minimalist and white 2 columns Blogger template with fixed width. The template is good looking and loads very fast - which is important if you want your visitors return on a regular basis. Developed by Fernando Coello on Quite Random.

Of course you can search for some other templates if you don’t like those above, there is a huge selection of both free and premium templates out on Internet. Just type in “free blogger template” in Google and you will have a lot to choose from.

Remember to extract (unzip) the archive with the Blogger template you just downloaded.

Read More:
Blogger Templates - Free Blogger Templates for your Blog
Free Blogger Templates - An extensive gallery of the best blog themes

Upload A New Template

Now when you have chosen a template you would like to use it’s time to upload the template to Blogger. It is not at all a complicated procedure and everybody with some basic Internet knowledge can do it.

Click here to view the embedded video.

Watch the tutorial video above and follow the instructions or read below (or do both). You can also watch the video on the Original YouTube Video Page.

How To Upload A New Template

1. Download and unzip the template file.
2. Login to your Blogger Dashboard.
3. Go to Layout, click Edit HTML.
4. Browse for the XML template file that you have just downloaded.
5. Click on the Upload button.
6. Confirm and save template

If you now view your blog you should see that the appearance has changed. Now you can add some widgets - but remember, do not add too much of them. A cluttered and slow blog is a sure way to scare off visitors.

If you really want a unique look on your blog then customizing the template is the option for you - small changes can make a surprisingly big difference. Amanda Fazani at Blogger Buster has a serial of articles on how to customize your Blogger Template. The tutorials explain in a fairly simple way how to do the customizations - you find the link below.

Read More:
A cheats’ guide to customising Blogger templates
How to Upload a Blogger Template on your Blogger Blog?