Customize Google Custom Search Box

Google Custom Search is one of those tools whose list of Plus points is nearly endless. From providing super relevant search results  to options for On-Demand Indexing. GCS is a boon for all Blog and Website Owners.But the one thing that doesn't fit in place is its exceedingly over simple Search Form ,that again with Google Watermark. In this post I will be telling you how to change the Look of your GC Search Box with a CSS3 search Box.

[click to continue reading]

Implementing Simple jQuery Slideshow in Blogger

Simple jQuery Slideshow is a very basic Image slider plugin.Its main features include ability to cycles through slides at a time interval that we can set. It also has forward and back buttons so we can jump around between slides and each slide has a title, a description and a link associated with it.

[click to continue reading]

A Cool Music Player for Blogger

There are many ways to add Music to your blog. The most common way is to embed it into your post.In this tutorial I will be using the Wordpress Music Player to do the same.

Note:You will be needing a Free Hosting Service like Dropbox to host the SWF file.

Also You will first have to find a music file that is already hosted on the web, or if you have your own music file stored in your computer, upload it into a file host.

[click to continue reading]

Implementing Syntax Highlighter in Blogger

Syntax Highlighter is a simple JavaScript which is used to represent your Code in a more sophisticated manner.I have used this in nearly all my previous posts.In this tutorial I will be implementing Version 2.1.364 of SH. It has the ability to copy Code into the Clipboard and also supports 13 different brushes.
[click to continue reading]

Implementing Clearbox in Blogger

Clearbox is a lightbox script based on the jQuery framework. It is capable of displaying image galleries, Flash, Quicktime, Windows Media formats, HTML, inner content, etc.One of its Plus point is that it works BEFORE the page is fully loaded! It is even capable of Rotating the images (not working in Internet Explorer or some other older browsers).It can effectively scale down large images with no comprise in quality and also features a Download button (For Images,MOV,other Media Fromats) as well as a Play button (For Slideshow).

Note: This tutorial requires that you either have a free Dropbox account or some other file hosting which provides a Folder options.

[click to continue reading]

Unlimited Bandwidth Image & JavaScript Hosting

Hosting is a vital part of any Website or Blog. In the following tutorial I will be telling you how to host Images (JUST for the sake) and JavaScript files on Blogger platform (with UNLIMITED BANDWIDTH that is). Image hosted on Blogger is no big surprise but the main focus of this tutorial is hosting JS files on Blogger which can be quite useful. The main reason I am doing this post is because ,all the Past posts I have done as well as many of the incoming Future posts that I will do ,use a JS file as their core. This simple trick will do away with all the problem related to hosting JS files on Third Party Servers.

[click to continue reading]

Implementing CSS Lightbox in Blogger

You have read it right, this is a purely CSS based lightbox with the ablitly to show images only (That is quite understandable).This marvel of a lightbox can be found at, but I am unable to find its real author.The major plus point about this Lightbox over others is that, you only have to include a CSS code for it to work, with no dependencies on a JavaScript (But there is a tiny exception).It has some minor bugs ,that I will discuss later in the tutorial.

[click to continue reading]

Implementing Slides in Blogger

Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.Slides is compatible with all modern web browsers and jQuery versions 1.4.4+.

[click to continue reading]

Implementing JqZoom Evolution in Blogger

JqZoom allows the user to inspect an image with a small magnifier window

It can be modified to display a mask over the image or not to show an magnifier window.

This jQuery plugin helps to embed detailed big images in any website.

The script can be applied to single or multiple images on the same webpage.

[click to continue reading]

Implementing PhotoViewer in Blogger

PhotoViewer is a Lightbox based on the extremely popular YUI(Yahoo UI) Framework.It is now obsolete.Some of its features are:

>Load your Flickr RSS feed
>Lightbox functionality, modal dialog and auto-centered panels
>Slide show configuration models
>Cross-browser, cross-platform compatibility
>Create galleries using existing HTML
>Create galleries using remote XML files
>Quick set-up time, endless configuration options
>Light weight for the flexibility

[click to continue reading]

Implementing ZoomBox in Blogger

Zoombox is an easy to use jquery modul that allows you to display images, html content and multi media content with a "lightbox" that floats over your web page.

>Can display all kind of links : Images, Flash animations, Youtube videos, Dailymotion videos, Iframe, HTML Content
>Everything is customizable, you can create new themes using CSS
>You can group your link and make galleries

[click to continue reading]

Implementing Videobox in Blogger

Videobox is a 6kb script, which shows your videos in the page with an overlay. It was inspired from Lightbox.v2 and uses some of the Slimbox's code. It's written for the wonderful mootools library. And used swfobject to embed flash.

[click to continue reading]

Implementing Squeezebox in Blogger

SqueezeBox is an unobtrusive LightBox inspired overlay, for modal boxed content on your blog. It’s a snap to show images but just as easy to use HTML elements, Ajax requests, iFrames, SWF movies and more.

[click to continue reading]

Implementing Fancy Zoom in Blogger

Fancy Zoom works with any html (images, text, headings, flash). The only caveat is it doesn't currently work with AJAX. Whatever you want to zoom to must be html already on the page.Width and height of zoom box are configurable through optional setting or css.

Note: This tutorial requires that you either have a free Dropbox account or some other file hosting which provides a folder options.

[click to continue reading]

Implementing NyroModal in Blogger

NyroModal is a simple jQuery plugin that implements a complex modal window system

The modals are able to load content such as inline HTML, AJAX calls, iframes with external links, images, gallery sets, external Flash and much more.
Here are some key features of "NyroModal":
· Ajax Call
· Single Image
· Images Gallery with arrow navigating
· Form
· Form in iframe
· Iframe

[click to continue reading]

Implementing SuperBox in Blogger

Superbox is a jQuery plugin for creating easily customizable modal windows (lightbox-like).

It is an accessible script, uses the rel attribute of an element for triggering & href attribute is used for defining the source to be displayed.

It can display any type of content as every HTML content can be presented. But by default, images (single or gallery mode), text content & iframes are supported

Dimensions of the modal window can be choosen to resize automatically according to the content or width & height can be defined for a standard size.

[click to continue reading]

Implementing HighSlide JS in Blogger

Highslide JS
is an open source script offering a Web 2.0 approach to popup windows. It streamlines the use of thumbnail images and HTML popups on web pages.It uses modal windows instead of pop-up windows to open larger versions of the thumbnail images. It’s free for non-commercial uses.

Special thanks to the maker of this JavaScript for providing a tutorial for implementation of Single image version of HighSlide into Blogspot Blogs.

[click to continue reading]