jQuery released version 1.3 in January 2009 and more plugins have been appearing online as well.
Here is the last collection of jQuery plugins in 2009 that shown on my blog .Check it out my friend .

I recommend using the Yahoo! Media Player that auto-detects links to MP3 files in your web pages and creates an embedded player for each link.

He want to remove the first post section and remove the summary text ,keep only image and title .
Here is the screen shot :

Live demo | Download here
This template install instruction is the same to Simplex Pro .
You can get it here
I hope this template helpful to you all .
Enjoy it !
Merry Xmas and Happy newyear ,my friends ^^

So it's the reason why I made this one ,you can take a look at screenshot :

here is the page layout :

Live demo | Download
I added to this version a slideshow ,and a headline corner at the top ,4 columns at the bottom . All of them can add or remove easily as you see in page layout . There are many place for adding widget and advertisements .
Now this is instruction for installing this template
1,Download it
2,Extract it ,you will get a template file in xml format and a folder of images . Upload all image to hosting .
3,Open template file :
3b,Find this script :

In this script there are some variables :numposts is the number of post in recent post section,numheadline is the number of headline in the top-left ,numfeature is the number of post in slideshow section , headlinelabel is the label of posts in headline section , if you want to show post under specific label in headline section ,just change the value blogger to label you want. The same is to featurelabel .
home_page is the home page of your blog ,change it to your blog url .Remember to adding a slash at the end .
Save template .
5,To set up other element such as navigation bar ,logo ... you can see in my previous instruction on how to install Simplex Pro template .
6,You can add widget as you want in this template to expand its function .
7,Save ! and you are done .

here is the screenshot :

Live demo
Here is the instruction :
To add an element to your blog ,you can insert it to Template file directly or insert in a HTML/Javascript widget . I personally insert into template file ,but I think use a widget is very useful because you don't need to encode the script and you can remove the script any time you want easily .
Now ,create a HTML /Javascript widget . Here is the HTML structure of this slideshow :
<!-- main navigator -->
<ul id="main_navi">
<li>[thumbnail #1]</li>
<li>[thumbnail #2]</li>
<li>[thumbnail #3]</li>
</ul>
<!-- root element for the main scrollable -->
<div id="main">
<!-- root element for pages -->
<div id="pages">
<!-- page #1 -->
<div class="page">
<!-- sub navigator #1 -->
<div class="navi"></div>
<!-- inner scrollable #1 -->
<div class="scrollable">
<!-- root element for scrollable items -->
<div class="items">
<!-- items on the first page -->
<div class="item"> [The Content] </div>
<div class="item"> [The Content] </div>
<div class="item"> [The Content] </div>
</div>
</div>
</div>
<!-- sub navigator #1 -->
<div class="navi"></div>
<!-- page #2 -->
<div class="page">
...
</div>
</div>
</div>
main navigator is the navigation on the left side .
sub navigator is small button on the top .
each page element in the code is controlled by an element in main navigator ,and each item in page element is controlled by sub navigator .
You can add as many and item as you want .
From the script ,you can see the elements of slideshow code .To display them as you want ,you can add CSS code for formatting these elements .
Basic CSS code here .
<style>
/* main vertical scroll */
#main {
position:relative;
overflow:hidden;
height: 450px;
}
/* root element for pages */
#pages {
position:absolute;
height:20000em;
}
/* root element for horizontal scrollables */
.scrollable {
position:relative;
overflow:hidden;
width: 510px;
height: 450px;
}
/* root element for scrollable items */
.scrollable .items {
width:20000em;
position:absolute;
clear:both;
}
</style>
You can write more CSS code for other elements . This is the basic one .You got a slideshow in HTML ,and now is the time we make it operate by adding javascript code. After CSS code ,add this code
<script type="text/javascript" src="http://dinhquanghuy.110mb.com/metal/jquery.js"></script>
<script type="text/javascript">
// main vertical scroll
$("#main").scrollable({
// basic settings
vertical: true,
size: 1,
clickable: false,
// up/down keys will always control this scrollable
keyboard: 'static',
// assign left/right keys to the actively viewed scrollable
onSeek: function(event, i) {
horizontal.scrollable(i).focus();
}
// main navigator (thumbnail images)
}).navigator("#main_navi");
// horizontal scrollables. each one is circular and has its own navigator instance
var horizontal = $(".scrollable").scrollable({size: 1}).circular().navigator(".navi");
// when page loads setup keyboard focus on the first horzontal scrollable
horizontal.eq(0).scrollable().focus();
</script>
After adding this script ,you can save your widget and see the result .
In this script ,instead of jquery and scrollable plugin , they packed them into one file name jquery ,so adding <script type="text/javascript" src="http://dinhquanghuy.110mb.com/metal/jquery.js"></script>
is enough . You can download js file at this address to know more .
Save template and see the result .
If you want to know more about the code ,or don't want to write the code from the beginning ,you can go to my live demo and save it to computer . Open it ,see how it work ,and copy ,paste . I think it's easier than coding from A to Z .
Hope you like this ! Enjoy it !

Here is the list of useful Jquery Plugin .They can help you make a better web design . I hope this list helpful to you
Easy Slider 1.7 – Numeric Navigation jQuery Slider
As its name ,easy to install and use .
Jquery plugin that allows you to easily create a custom carousel.Many options for different transitions .
Sliding Boxes and Captions with jQuery
One man asked me for make a caption or title of image sliding up when mouse over and down when mouse out .And here is the plugin for him .
AnythingSlider jQuery Plugin
AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders and adding new features. I don't use this slider in my template but in my opinion ,it's a good one .
Creating a Slick Auto-Playing Featured Content Slider
In my previous blog post ,I talked about how I made slider for Simplex Darkness template . And here is another slider with content . You can use this one and still get the same result like Simplex Darkness template .How to Make a Threadless Style T-Shirt Gallery
This plugin is very useful for saving space in your site . In the demo version ,they use this plugin for T-Shirt gallery ,but you can use them with images on blog ,start with thumbnails and show the full images when mouse over .Create a gallery by using z-index and jQuery
Interesting gallery plugin . But I think it's only suitable for personal blog .
Create an Image Rotator with Description
Another solution for any one who want to make a slider in web . If you feel the instruction I wrote to create a slider so complicated and hard to follow ,you can take an eye at this one .
ImageSwitch
The main point of this plug-in is to make an easy-to-use, simple and fast plug-in to create effect when you switch between images. Minimize the arguments you need to input and still give some decent effects.
At the first time I saw the demo of this plugin ,I think it created by Flash . In fact,it is really a product of Jquery . This is a great solution for creating dynamic effects fx. in a header.You simply have to see the effect for yourself demo here.
Highslide JS
Highslide JS is an open source image, media and gallery viewer written in JavaScript. Integrate it into a page and you have a gallery for your blog .
JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.jQzoom is a great and a really easy to use script to magnify what you want.
Easiest Tooltip and Image Preview Using jQuery
You can place thumbnail in your blog posts and use this plugin for showing full image when mouse over . A good solution for saving web page space .
A javascript viewer for displaying spherical panoramas. An alternative to Java and QuickTime technology. To use this plugin you need to generate views from your spherical panoramic image. You can download and install MPRemap from Helmut Dersch website for this purpose. I think it's very good for real estate agent websites because buyer can easily imagine the house they will buy with this plugin .
prettyPhoto a jQuery lightbox clone
jQuery lightbox style script that support images, galleries, flash, qtime, iframe etc.
jQuery virtual tour
This virtual tour plugin has the particularity to be accessible and can run even if javascript has not been activated.
jQuery Cycle plugin
A greate plugin !
Fancy Box
FancyBox is tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page. Automatically scales large images to fit in window, adds a nice drop shadow under the full-size image, image sets to group related images and navigate through them. Also support media.
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.
AnythingZoomer jQuery Plugin
You have a small area. You mouse over it. An area pops up giving you a zoomed in closer look. This is a jQuery plugin that does it. I’m not going to tell you what you should use it for or elaborate use-case scenarios. Your own creativity can help you there. Demo & Download
ImgAreaSelect
imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image.
PanView
This plugin allows your visitors view details of a big image and move around with the mouse.
s3 Slider
This is an easy way to add a good looking image slideshows with text flyin to your website.
Lightbox Plus
Another Lightbox style plugin
Shadowbox
Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page. Can run alone but also has an adapter for jQuery and other frameworks.
Image Cross Fade Transition

Scrollable is useful jQuery plug-in for creating scrollable content.
jQuery Infinite Carousel
Image Loading
This tutorial will show how to load images in the background, and once loaded handle the event and create your own response. Try Demo | View Code
Creating a polaroid photo viewer with CSS3 and jQuery
A good gallery plugin ,you can drag the images . But I'm not sure this one is quite good in all browsers . CSS3 is not supported in old version of browsers .

Format : .png
Size : 200×200
You can Download here
I hope this useful for you in designing ! Christmas is coming ^^

you can take a look on Demo

Some features
- Flickr search using jQuery and JSON
- Full screen with kept ratio using CSS only
- A png raster to even out up-scaled jpegs
- Thumbnails with loader indicator and a nice hover effect that shows a bigger thumb (or description)
- A preloader loads the large images one by one for super-fast viewing
- Fetches the biggest image from flickr using their API
- Caption that can be turned on or off
- Navigate by clicking on either half of the image, or use the thumbnails.
You can go to this page to know more about this script

Creating a contact form is a simple application . In this post ,I will tell you how to use Google docs for contact form .
First ,you need a google account ( it can be a gmail account ,blogger account ... account of any service offered by google ) ,go to docs.google.com and login .
Here is the screen after login

Click on Create new ,choose Form from drop-down list
here is the screen of Creating Form

Choose add item for adding form elements ,to make a contact form ,you need at least 4 item : three text-boxes for Full name , email ,and website ,and a paragraph text-box for the content .
The form after adding look like this :

When you finish creating form elements ,click on More Action ,choose Embed .You will get a script .
Go to Blogger ,Create a post ,set the date for this post a day in past . Click on edit HTML of post editor ,paste the script you got from Google docs into editor window ,and publish this post .
Ok ,now you got a contact page for your site .
To see the data collected from contact form ,you just need to login Google docs and click on the form name you created . A spreadsheet (like MS access or MS Excel ) will appear and show you the data from contact form .
This post only show you a simple application of Google docs , in fact ,you can make a form for survey ,or a form for mailinglist through this .
Hope this post useful for you .Enjoy it !^^

Labels
Popular Posts
- Simplex PhoneMag - Template for phone magazine
- Simplex Newspaper II - An advance version of old Newspaper template
- Simplex Eshop - Blogger template for shopping cart/ecommerce
- SimplexEnews - the latest version - fixed errors ,easy to install
- Infinite scrolling or load more effect for Blogger - part 2
