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.

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.

Implementing jsBloggerLightbox in Blogger

jsBloggerLigthbox is based on jQuery framework and is created by James Simpson of J.S. Blog Stop (A great resource for Blogger Related Tutorials).

The one thing that makes this different from other Lightbox scripts is its easy of integration. Normally when you add a Lightbox in a website ,you have to fiddle with the HTML of  all the elements (Images,iFrame,etc) to which you have to apply the Lightboxing effect but in the case of jsBloggerLightbox you just have to include the script and the rest is taken care by it.

Currently it only supports images.

Implementing NuvuShift Lite in Blogger

The NuvuShift jQuery Plugin allows you to animate up to 5 different images or divs within a container when you move the mouse cursor around the document. Each image's movement has a independent range that can be set along with a starting pont.

Features:
>Control the amount of shift per image.
>Lightweight at only 4Kb(Lite) in size.
>Easily set and modify the starting point of each image.

Implementing PhotoBoard in Blogger

Want to show off your Photos in a cluttered fashion, then this is the right Plugin for you. Photoboard is based on Mootools framework and gives you the capability to define a space where you can freely Drag your Pictures  (and even move them over each other!).The code is tiny, as it relies heavily on the framework for much of the functionality.

Implementing Orangebox in Blogger

OrangeBox is made to be simple. The javascript is just 16KB but has powerful features. It supports common image file types, QuickTime movies, SWF files, inline content, iFrames, and Vimeo & YouTube video streaming as well as item groups with navigation, hidden item groups, keyboard navigation, and image preloading.There is also a added functionality for sharing each element using AddThis widget.

Implementing EnlargeIt! in Blogger

EnlargeIt! is a little Javascript. It enlarges thumbnail images beautifully with a mouse click. You can use different animations if you like.

Features:
>works for pictures, flash files, FLV videos, YouTube videos, DivX videos and iframes
>enlarge several files at the same time
>grouping of and navigation between files

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

Implementing Slightly Thickerbox in Blogger

This is a simple image viewer working as a modal windowing system.It is a little old and has a very simple interface.It automatically generates "Previous Image" and "Next Image" links if more than one image is presented in a set.

The result is that the user can use Slightly ThickerBox to create image galleries. In addition, he can create groups of galleries by setting a "rel" attribute on the links.

There is also a option for adding movies (MPEG or AVI) to a Slightly Thickerbox group and group AJAX pages together.

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.

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.

Implementing Koolbox in Blogger

KoolBox is a jQuery Plugin for displaying image, gallery slide show, inline content, maps, and videos in a "modal-box" style that floats overtop of web page.It comes in five different themes namely facebook, Violet, White, Window-7 and 003366.In this tutorial I will be showcasing the Window-7 theme (my favorite).Some of its other interesting features are:
- Keyboard support
- Zoom effect with overlay shadow
- Rounded corners of overlay window
- Large images fit to browser window

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.

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.

Implementing Control.Window in Blogger

Control.Window is a fully programmable, multi purpose windowing toolkit for Prototype. It covers a wide variety of use cases and allows for a high degree of customization. It can attach to links to open the targets as windows, or can be filled with dynamic content. It includes support for stackable, draggable and resizable windows. Subclasses to handle Modal windows, LightBoxes and Tooltips are also present.

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 www.w3css.co.uk, 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.

Implementing tinylightBox in Blogger

tinyLightbox is a lightweight gallery viewer like original lightbox with slideshow. It can be extended with any other animations and has a lot of settings.

tinyLightbox is based on Jquery framework and also provides two different animations namely "parallel" and "original".

Implementing ZoomIt in Blogger

ZoomIt is a JavaScript image zoom developed for MooTools 1.3 (1.2 compatible) and jQuery that allows display of detailed, large images based on smaller images that can be placed into the context of web pages.

A new approach, different from the previous one (that can be seen here) allows easier placement and implementation along with possibilities of styling using CSS classes placed in stylesheets. The two script versions (for jQuery and MooTools) offer the very same functionality so whatever your preference, you get the same thing no matter what JavaScript framework you use.

This tutorial is for the Mootools version.

Implementing Cerabox in Blogger

CeraBox is the alternative Lightbox build on MooTools 1.3, inspired by Fancybox.Requires MooTools 1.3 + MooTools more Assets.

CeraBox is a JavaScript plugin used to display larger images (or other objects) without leaving the page using modal dialogs. The CeraBox is triggered by clicking a standard anchor tag. When JavaScript is disabled the objects will still be opened, but without the Cerabox effect.

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+.

Implementing imgZoom in Blogger

imgZoom is a jQuery plugin that implements a smooth zoom effect on images. It uses vector graphics (SVG or VML) to create a graceful transition between the thumbnail and the full-sized image.

Plugin features:
>Lightbox-like interface (dark overlay, previous/next image switching)
>Highly customizable (CSS styling, custom HTML wrapper block)
>Images can be zoomed in with a fade-in effect or with rotation
>Provides API functions to zoom in and zoom out
>Lightweight — the packed version is less than 7KB

The plugin works in all major browsers, including Firefox 2+, Opera 9.5+, Google Chrome, Safari 3+, and Internet Explorer 6+.

Implementing Photoshoot in Blogger

Photoshoot plugin, which requires at least the jQuery version 1.3.2 as the basis of its functionality ,is just 4KB creates a very special big photo shoot effect, by which one can relate to working with a camera. Photoshoot offers some modifiable features to the user like blur and opacity.
Developed by Martin Angelov, Photoshoot plugin for jQuery is very simple to understand and implement

Note:It is recommended that you use this plugin in the Static Pages only because it interferes with the CSS of the Blogger templates. 

Implementing Fullsize in Blogger

Fullsize is an attempt to add a new IMG attribute called “fullsize” in the next version of HTML. The idea is simple; create a standardized solution by which browsers handle the image popups rather than javascript/AJAX. Whenever the fullsize attribute is found within the img tag, browsers would tackle the heavy lifting, generating a popup of the full size image.Even though it is not standardized till now but it is available as a Jquery plugin

Implementing YUI Lightbox in Blogger

YUI Lightbox provides a very handy class for creating modal dialog box with background masking

This script can be used as a full-screen image gallery.

This script has been tested in IE 6, Firefox 2.0.0.4, Netscape 8.1, Mozilla 1.7 and Opera 9.21, which was created without any hacking. Another hot feature is that one can easily create a drag & drop lightbox without any extra effort.

Implementing jsImagebox in Blogger

jsImageBox is a compact and easy to connect a script that allows you to display enlarged image in a popup box. Script code is only 9kb. For his work on the page you want to connect only a single js file. The script is written without using third-party frameworks and libraries, so that should not cause conflicts when connecting to sites that have already made ​​with the use of any framework.

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.

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

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.

Features
>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

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.

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.

Implementing ReMooz in Blogger

ReMooz is an open-source widget for great looking and unobtrusive inline-pop-ups, powered by MooTools. It enables how your vistors browse through content, such as thumbnail images and HTML. ReMooz features centered or relative-positioned draggable zoomed images, content preloading, fading captions, with plenty of options and is highly configurable: Add a simple image zoom or create a fancy design element for any graphic that needs to be enlarged on your site.

Features

No plugins like Flash or Java needed, no problem with popup blockers
Unobtrusive behaviour, visitors with disabled JavaScript or old browsers can still click the images to see the full size.
Simple and intuitive behaviour: loading-indicator, close button and changing icons describe possible interactions.
No obstrusive modal pop-up: your design and content is still visible (not hidden under the common black lightbox effect).
Open several instances at one time, e.g. to preview multiple images.

Implementing Quickbox in Blogger

QuickBox is a Lightbox clone written for the MooTools Javascript framework.It was written from the ground up for version 1.2 of the lightweight MooTools framework.

QuickBox was written for speed, allowing you to zip through images as quickly as possible. One improvement made to facilitate this is allowing use of the mouse wheel to scroll through images.

Also changed are a more stable background, captions that can be localized for other languages, and a few other minor improvements.

Implementing iBox in Blogger

iBox is a lightweight script that lets you overlay images and documents in a small dialog without a page reload. It's built to be easy to install and use.

iBox easily supports the standard overlay of images, in many sizes, and will automatically scale down the window if the browser's viewpane is too small.

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.

Implementing MopBox in Blogger

MopBox is draggable show box similar to lightbox that can contain div, image , flashmovie, video, etc. If it has more than one children, slider navigation is shown automatically. It also has an resizable option.

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

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.

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.