If you are owner of music site ,or podcast ,or blog ,and you want to embedded a music player into your site so that visitors can listen to the audio in the browser itself without requiring an external player like QuickTime or Windows Media Player.
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.

Here is another version of Simplex Pro template for portfolio or something like that . This template is made as request of reader Tuan in my blog .
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 ^^

One man asked me re-design this template for his blog ,he want to applied a slideshow at the top ,headline at the top-left and 4 columns at the footer .
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 :
4,Upload template to blogger .

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 .

Did you see my previous posts on making a slideshow for blogspot ? Now I want to show you another plugin which has the same functions . With this plugin ,you can make a complete slideshow ,which can scroll in both of vertical and horizontal .
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 .

Agile Carousel

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.

CrossSlide

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

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 .

jQuery spherical panorama viewer

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.

Step Carousel Viewer

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

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

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 .

Christmas is coming ,and why don't you re-design your blog for Christmas ? I found in deviantart.com a set of Blogger Christmas logo icons ,it's a nice icon set designed by author tayzar44 .

Format : .png
Size : 200×200
You can Download here

I hope this useful for you in designing ! Christmas is coming ^^

For 2 months ago ,I found Full Screen Image Gallery plugin .It's a full screen image gallery that automatically scales the image with kept aspect ratio to fill the browser background. It comes packaged with a flickr search engine, thumbnails, captions, and with a preloader. It basically loads image links one by one and replaces it with a full screen image gallery and it scales the image using CSS only (with some JS for IE6).
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.

This plugin is still under protection of copyright laws . Personally ,I can decode and give you the script of this gallery , offer you a Blogger template base on this gallery . But it's not fair . I think we should give the author some respect for his work and wait until he offer it for free .
You can go to this page to know more about this script

Google offer various tools for internet users . One of them is Google Docs . This is a tool for working and sharing document online . You can also use Google docs for creating form that you can embed it into web page or email .Once someone fill out the form ,data is fed to Google data spreadsheet .
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 !^^