Here I found some very useful links for you.

How To Create Your Own Blogger Template Theme *Updated*

Blog Theme Design tutorial

How I copy widget

Getting Started Designing Blogger Templates

First, get a simple free theme closest to what you desire.

Change the theme

In the XML file, the first thing you will see are many variables. Please enlarge the following image to see the codes.

Change the colors to the ones you would like to have and remember their names, cause you ganna use those variables later.

Change the CSS with some help from firebug .

css codes

There is no need to change any of the layout structure code unless you want to add some complication like costume widget area ect.

Beginning of webpage

Aqua Text Effect

Create a Shiny Text & Effect in Photoshop

Create A Floral Colorful Solid Text Effect

Creating Editable Letterpress Styled Text

Create Icy Text with Water Reflection

3D Text effect

Spiderman Text Style Tutorial

Easy 3D Text Effect

Design a Golden Flame Text Effect in Photoshop

Design a Horror Style Text Effect with Dirt and Splatter Texture in Photoshop

How to Make a Green & Sleek Web Layout in Photoshop

Create a Clean and Colorful Web Layout in Photoshop

Make a nice corporate website for a product

Modern Web 2.0 Web Layout

Design a trendy business & finance layout

Corporate Business Layout

Photoshop tutorial to design a clean business layout

Business Layout

Create a Business PSD Layout in less than 10 minutes*

Play with jQuery

This is how this “game” works. The flashing text says “LOOK AT ME”. When you hover just underneath the text it reveals a little cartoon girl. It covers the girl again when you move the mouse away quickly. When you click the “LOOK AT ME” text the sliding animation will end. Refresh it if you wanna see the animation again.
To see the Demo

Simple HTML

<div id="nav">
<div id="girl">
	<a href="#">LOOK AT ME</a></div>
</div>

CSS to add background image

#nav{background:url(images/girl-11.png) no-repeat;width:150px;height:150px;top:100px;left:400px;position:absolute;}
#gate{position:absolute;background:#fff;width:50px;height:50px;padding:50px;}
#girl a{position:absolute;top:-20px;left:10px;color:pink;font-weight:bold;font-family:arial;text-decoration:none;font-size:18px;}

Javascript

• jQuery Infinite Loop from line 2 to line 9:basically you make a loop start with show end with hide. Put anything you want in between and put this in a runIt function. This is also useful if you wanna do a warning sign.
• Sliding effect from line 10 to line 25:This is very similar to my previous tutorial on Make fancy light up RSS button with jQuery I changed fadeTo to slideUp and slideDown, inserted line 21 cause it has slide down from a hiding state.

$(document).ready(function() {
function runIt() {
		$("#girl a").show(100);
		$("#girl a").fadeTo(500,0);
		$("#girl a").fadeTo(500,1);
		$("#girl a").fadeTo(500,0);
		$("#girl a").hide(1, runIt);
		   }
		    runIt();
		$(function () {
			 $('#girl')
			    // create our new span.hover and loop through anchor:
			  .append('<span id="gate" class="hover">').each(function () {
			   var $span = $('&gt; span.hover', this).css('opacity', 1);
			   // when the user hovers in and out
			   $(this).hover(function () {
			    // on hover
			     $span.stop().slideUp(1200);
			      }, function () {
			        // off hover
			 $span.hide();
			$span.slideDown(1500);
			      });
			    });
			});
	 });
</span>

Conclusion

You are welcome to copy the code and experiment with it. I believe the next web trend will be “game like” interactions and jQuery is a great framework to do all sorts of fancy effects. Learn more and prepare yourself for the challenge.

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, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.

Next, I will show you how to make a beautiful header that response to mouse movements. My portfolio site uses this trick, so you can see the result first.

Linking javascripts

<script src="js/jquery-1.3.2.js" type="text/javascript"><!--mce:0--></script>
<script src="js/jquery.lightbox-0.5.min.js" type="text/javascript"><!--mce:1--></script>
<script src="js/jquery.jparallax.js" type="text/javascript"><!--mce:2--></script>

HTML and CSS code.

Setup the window, give its id name parallax and width, so only this area responses to mouse movements. As the diagram shows above, the image you list first goes to the back.
Make sure the width is set properly to prevent collapsing view point. If any of the layer travels outside the parallax window, it will be hidden.

<div id="parallax"> <img style="width: 400px;" src="images/0.png" alt="" />
<img style="width: 500px;" src="images/1.png" alt="" />
<img style="width: 600px;" src="images/2.png" alt="" />
<img style="width: 550px;" src="images/3.png" alt="" /></div>

CSS

#parallax
    {position:relative; overflow:hidden; width:800px; height:450px;border:none;
	margin:0 auto 20px auto;}

My image 0

My image 1

My image 2

My image 3

Basic JavaScripts

jQuery(document).ready(function(){
	jQuery('#parallax').();
});

This is the result with default settings. As you can see, it is a bit weird.

Use Layers option

jQuery(‘element’).jparallax(options, layer_0_options, layer_1_options, etc.);

I disabled the Y axis movement and gave travel range to layer 0 (image 0) and layer 1(image 1). Now I have a nice ocean view header!!

jQuery(document).ready(function(){
	jQuery('#parallax').jparallax({yparallax:false},{xtravel: '100px'},{xtravel: '300px'});
});

Tutorials on certain style

design an awesome colorful layout

create a dark and sleek web layout using photoshop

design typography layout

design a realistic website layout in photoshop

Design a clear website layout in Photoshop

Create a clean PSD layout with a 3D look

Tutorials by Topic

Create an awesome portfolio layout

Modern Blog Layout

Non-profit Photoshop Layout

Tutorial RocknRolla Blog Design

Design Studio Layout

Design Principles and techniques

1. Visual Hierarchy in Web Design

2. 9 Essential Principles for Good Web Design

3. 5 Pixel Poping techniques

4. 5 simple tricks to bring light and shadow into your designs

5. Quality within web design

Another Round up of quality tutorials

45 step by step tutorials on web design with photoshop

It is only a simple animation technique. In this tutorial, I will show you how to do it with jQuery Fading effect. It is actually very simple.

You can look at the demo first.

First, I downloaded this RSS icon from devian art
Then I made it black and white

What we gonna do is to make the button fade from black and white to full color. We set black white as default so your RSS button’s background image is rss_bw.png at first.

HTML

Let’s do some simple preparation: the html is very simple.

<div id="rss"><a href="#" title="fancy light up RSS"></a></div>

CSS Code

At this part, we need to define RSS buton’s default background image as well as span that holds the colored background image.

body{
background:#000;}
#rss{
width:500px;
height:500px;
margin:auto;
position:relative;
display:block;}
#rss a{
	background-image:url(rss_bw.png);
	background-repeat: no-repeat;
	position:relative;
display:block;
width:500px;
height:500px;
}
 #rss span.hover{
 width:500px;
height:500px;
 background-image:url(rss.png);
	background-repeat: no-repeat;
	position:relative;
display:block;}

Using fadeTo

fadeTo( speed, opacity, [callback] )

What this javascript does is find “a” under #rss > append “span” within a element > set span’s opacity to 0 at first > when user hovers in, change the opacity to 1 within 800ms > when user hovers out change the opacity back
This is what the html looks like with JavaScript

Make fancy light up RSS button with jQuery fading

$(function () {  
  $('#rss a')   
    // create our new span.hover and loop through anchor:
    .append('<span class="hover" id="rsscolor"/>').each(function () {
      var $span = $('> span.hover', this).css('opacity', 0);      
      // when the user hovers in and out 
      $(this).hover(function () {
        // on hover
        // stop any animations currently running, and fade to opacity: 1
        $span.stop().fadeTo(800, 1);
      }, function () {
        // off hover
        // again, stop any animations currently running, and fade out
        $span.stop().fadeTo(800, 0);
      });
    });
});

To use the particular file I release for downloading in this post you have to

1. write a post you want to put in the gallery
2. tag it with “photo”
3. make a custom field called article_image
4. put image url into the custom field

This is how I made it

First get featured posts with tag

What this snippet does is getting 10 posts with the tag named photo

1
2
3
4

<?php
$feature_posts = get_posts('tag=photo&numberposts=10&orderby=post_name&order=DSC');
foreach($feature_posts as $post) : setup_postdata($post);
?>

Use custom field to get image URL

This code fetches the url you put in custom field called article_image, and put them in an array called image

<?php $image = get_post_meta($post->ID, 'image', TRUE); ?>
  <?php if($image) { ?>
  <img src="<?php echo $image; ?>" alt="Alt Text" />
  <?php } ?>
  <?php //get article_image (custom field) ?>
  <?php $image = get_post_meta($post->ID, 'article_image', true); ?>

Code from previous tutorial

Now this part should look familiar to you if you have read my previous post on making a content slideshow.

<div class="bigimg" title="<?php the_title(); ?>" id="<?php echo $image; ?>" name="<?php echo $image; ?>" alt="<?php the_title(); ?>"> <a href="<?php the_permalink() ?>"><img src="<?php echo $image; ?>" alt="<?php the_title(); ?>" class="change"/></a> </div>
<?php endforeach; ?>

Putting all php code together

This is the php file, I called it gallery.php

<div id="feature_gallery" class="clear">
<?php
$feature_posts = get_posts('tag=photo&numberposts=10&orderby=post_name&order=DSC');
foreach($feature_posts as $post) : setup_postdata($post);
?>
 
  <?php $image = get_post_meta($post->ID, 'image', TRUE); ?>
  <?php if($image) { ?>
  <img src="<?php echo $image; ?>" alt="Alt Text" />
  <?php } ?>
  <?php //get article_image (custom field) ?>
  <?php $image = get_post_meta($post->ID, 'article_image', true); ?>
  <div class="bigimg" title="<?php the_title(); ?>" id="<?php echo $image; ?>" name="<?php echo $image; ?>" alt="<?php the_title(); ?>"> <a href="<?php the_permalink() ?>"><img src="<?php echo $image; ?>" alt="<?php the_title(); ?>" class="change"/></a> </div>
<?php endforeach; ?>
<div id="output"></div>
 
</div>

JavaScript File

This is the same javascript file from previous tutorial. The only changes I have made are: 1. I took out $(‘body’).addClass(‘hasJS’); 2. I put thumbnail url in id attribute instead of title. I didn’t use “output” in my example, cause it is not necessary for that site but if you want to use it you can put excerpt or title in “title” attribute and it will display at your output div.

$(function(){ 
 
    // homepage cycles
    $('#feature_gallery .bigimg').wrapAll('
<div class="bigimgs">').parents('#feature_gallery').prepend('
<ul id="feature_gallery_pager" class="menu">').cycle({
        fx:'scrollLeft',
        easing: 'swing',
        inDelay:    250,
        drop:       40,
        timeout:    5000,
        pause:      true,
		before:  onBefore,
        slideExpr: '.bigimg',
        pager:      '#feature_gallery_pager',
        pagerAnchorBuilder: function(idx, slide) { 
 
            return '
	<li><a href="#"><img class="thumb" src="'+slide.id+'" alt="" /></a></li>';
        } 
 
    });
 
$(function() {
    jQuery('#feature_gallery_pager').jcarousel({
        scroll:1
    });
});
 
function onBefore() {
    $('#output').html("Scrolling image:
" + this.title);
} 
 
});</ul>
</div>

linking files

Last step, link the js file in head section and include your gallery.php file wherever you want the slide show to appear in your theme.

  <?php include (TEMPLATEPATH . '/gallery.php'); ?>

You can download the gallery.php and gallery.js file here
Please feel free to change the file for your convenience. I will try to make it into a plugin when I have time.