New Google style blogger Template for Free

Google recently changed the style of the Google page, which gave a new look to it. On seeing its simple and cool layout i started designing this template.
This template is designed user friendly. You no need to host any images since its already done. All you have to do is.

• Download the file and extract it.
• Goto Blogger Dashboard and select your blog to which you are willing to apply this template.
• Click on Design, then on Edit HTML
• There in 'Upload a template from a file on your hard drive:' Browse the downloaded xml file and upload it.
• You are done.

To change the links of Home, About, Services and so on. which is in top Navigation
Find the code

<li><a href='#'>Home</a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Products</a></li>
<li><a href='#'>Contact</a></li>

and modify it as per your requirement.
Now again search for

<li class='home'><a href='http://www.techirsh.tk'>Home</a></li>
<li class='about'><a href='http://www.techirsh.tk'>About</a></li>
<li class='contact'><a href='http://www.techirsh.tk'>Contact</a></li>
<li class='fb'><a href='http://facebook.com/techirsh'>Facebook</a></li>
<li class='twitter'><a href='http://www.twitter.com/ishuspace'>Follow on twitter</a></li>

and modify as per your wish.

Preview Template | Download Template

Changing Favicon of blogger blogs made easy by Blogger in Draft

 For adding favicon in blogger blogs, earlier we have to use scripts with our own hosting for ico files. Blogger in Draft included option in Design area in Dashboard of blogger. All you have to do is create an .ico file, if you feel difficulty in creating .ico file. You can convert image file to .ico file from the site www.iconj.com.

 

Once you have converted the image file to ico file. Download it to your computer.
Now goto http://draft.blogger.com click on the link Design of your blog to which you want to add the favicon.
Click on Edit in Favicon which is on top left corner of design area.

Once you click on the Edit link, popup window will be open. There select the downloaded .ico file using browse/chose file option. Then click on Save

Now you are done.
In Blogger in Draft's it is also mentioned that later more supported files for favicon other than .ico files will be supported in future.

New Official Twitter Follow button with Followers Counter

Web developers were using various methods to add the twitter follow button with the Number of followers information. Twitter made it more easy to add follow button on your blogs or website. Twitter uses two methods for adding the follow button into your site.

• Using Javascript
• Using an iframe

We can easily embed the follow button to our blogger by adding the code in the HTML/Javascript under the Add a Gadget in blogger Dashboard.

When a visitor clicks on the follow button. A pop up window opens, which shows the recent two tweets of user and brief info about the user. On top right we can see the follow button. This is really an important and useful Resource of Twitter.
You can get the basic Follow button by providing your Twitter username and some customizing option from https://twitter.com/about/resources/followbutton
Advanced users can customize the button using the supported attributes from http://dev.twitter.com/pages/follow_button

How to send email using different email address in gmail

Earlier i made a post How to Manage Multiple Email ids in which i wrote how to manage multiple gmail account using mail forwarding, that allows you to read all the incoming mails of different email id in single id. Recently a new feature was added in gmail which allows you to send mail using a different sender address, you can add alternate email address from setting > accounts > Send mail as: for better understanding i have added a video tutorial.

Attractive Twitter timeline widget for blogger

Add attractive twitter timeline widget to your blogger sidebar. All you have to do here is that,

• goto blogger Dashboard 
• click on Add a Gadget
• Then click on HTML/JavaScript 
• Paste the below code in Content 
• Now change the word ishuspace which is in Red to your twitter profile name
• Here the number 5 is to display no of tweets to show, you can change it as per your wish.
• Save the template, You are done..

<style>
.tweetboxbg1 {
background: #017398 url(http://i319.photobucket.com/albums/mm445/itsmeeirsh/twitterboxbg1.png) no-repeat;
padding: 101px 3px 3px 3px;
border-radius: 5px;
}

#twitter_update_list {
color:#fff;
font-size:13px;
font-weight:normal;
}

#twitter_update_list a {
color:#42a9cc;
text-decoration:none;
font-size:14px;
font-weight:bold;
}

#twitter_update_list li {
border-bottom: 1px dotted #fff;
}
</style>
<div class="tweetboxbg1"><ul id="twitter_update_list"></ul></div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/ishuspace.json?callback=twitterCallback2&count=5" type="text/javascript"></script>

Gtalk bot for twitter - chitter.im

chitter.im is new Gtalk bot which posts the recent timeline of your twitter account in the gtalk or chat in gmail. You no need to open the twitter website when you are in gtalk or using any other gtalk client. The chitter.im bot send you message when ever you get a new tweet. There are various commands that will help you in using the bot. Just send /h as instant message to the bot id, it will listout various commands that will help you managing the bot. you need to send /on to start receiving the tweets. To stop the updates, just send /off look at the video tutorial for easy setup of the bot. 

Gmail guru bot which can provide you information about score, weather, define, translate, web.

guru@googlelabs.com is a cool bot id which provides you various information such as score, weather, define, translate, web.
To add this bot to your gmail id. Invite the id guru@googlelabs.com to chat. For your better understanding video tutorial is added below. Once you have added the bot send the message help which will list out the features of the bot. To know information about how to use the score feature or some other feature information, send help example: help weather.

• To know the score Enter 'score ' to get recent scores, i.e. 'score Arsenal'.
• To know the weather Enter 'weather ' to get weather info, i.e. 'weather Nairobi'.
• To get definition of a word Enter 'define or 'd ' to get definition of the term i.e. 'd internet'. Ask for one definition at a time.
• To translate a word Enter 'translate from to ', i.e. 'translate goodbye from English to French'. If 'from ' is omitted we will try to detect the language of your phrase. You can abbreviate 'translate' to 't', i.e. 't goodbye to German'.
• To get web result for a query Enter 'web ' to get results from the web and then type 'next' to scroll to see more results. Only text is displayed.

Round Cornered Navigation Menu without using Image-CSS

Mozilla CSS Extensions is a cool extension for designing attractive website, round corner box is one of the feature which allows you to add rounder corner to a div content or even a list item. I would like to add some of the CSS style using which a stylish Navigation Menu can be designed. This type of menu works fine in browsers like Mozilla Firefox, Opera and Chrome Browser. I have designed some 7 CSS here with id as ishumenu1, ishumenu2 and so on.

Demo

Mozilla CSS Extensions is a cool extension for designing attractive website, round corner box is one of the feature which allows you to add rounder corner to a div content or even a list item. I would like to add some of the CSS style using which a stylish Navigation Menu can be designed. This type of menu works fine in browsers like Mozilla Firefox, Opera and Chrome Browser. I have designed some 7 CSS here with id as ishumenu1, ishumenu2 and so on.

// Style 1
#ishumenu1 {padding: 0px 15px;list-style: none;height:25px;text-transform:uppercase;}
#ishumenu1 ul {margin: 0px;padding: 0px 5px;list-style: none;height:25px;}
#ishumenu1 a {color: #ffffff;display: block;font: 14px Georgia,Century gothic,verdana, Arial, sans-serif;text-decoration: none;}
#ishumenu1 a:hover {color: #56bb33;display: block;text-decoration: none; }
#ishumenu1 li {float: left;margin: 2px 5px;padding: 5px 10px 0px 10px;height:25px;border-radius:5px;-moz-border-radius:5px;background: #730948; -webkit-border-radius:5px;}
#ishumenu1 li:hover { background: #b13866;}
#ishumenu1 li:hover a { color: #ffffff;}

// Style 2
#ishumenu2 {padding: 0px 15px;list-style: none;height:25px;text-transform:uppercase;}
#ishumenu2 ul {margin: 0px;padding: 0px 5px;list-style: none;height:25px;}
#ishumenu2 a {color: #000000;display: block;font: 14px Georgia,Century gothic,verdana, Arial, sans-serif;text-decoration: none;}
#ishumenu2 a:hover {color: #56bb33;display: block;text-decoration: none; }
#ishumenu2 li {float: left;margin: 2px 5px;padding: 5px 10px 0px 10px;height:25px;border-radius:5px;-moz-border-radius:5px; -webkit-border-radius:5px;border:1px solid;}
#ishumenu2 li:hover { background: #b13866;}
#ishumenu2 li:hover a { color: #ffffff;}

// Style 3
#ishumenu3 {padding: 0px 15px;list-style: none;height:25px;text-transform:uppercase;}
#ishumenu3 ul {margin: 0px;padding: 0px 5px;list-style: none;height:25px;}
#ishumenu3 a {color: #000000;display: block;font: 14px Georgia,Century gothic,verdana, Arial, sans-serif;text-decoration: none;}
#ishumenu3 a:hover {color: #56bb33;display: block;text-decoration: none; }
#ishumenu3 li {float: left;margin: 2px 5px;padding: 5px 10px 0px 10px;height:25px;border-radius:5px;-moz-border-radius:5px; background: #ffffff;-webkit-border-radius:5px;}
#ishumenu3 li:hover { background: #a7a505;}
#ishumenu3 li:hover a { color: #ffffff;}

// Style 4
#ishumenu4 {padding: 0px 15px;list-style: none;height:25px;text-transform:uppercase;}
#ishumenu4 ul {margin: 0px;padding: 0px 5px;list-style: none;height:25px;}
#ishumenu4 a {color: #000000;display: block;font: 14px Georgia,Century gothic,verdana, Arial, sans-serif;text-decoration: none;}
#ishumenu4 a:hover {color: #56bb33;display: block;text-decoration: none; }
#ishumenu4 li {float: left;margin: 2px 5px;padding: 5px 10px 0px 10px;height:25px;border-radius:5px; -moz-border-radius:5px;-webkit-border-radius:5px;border:1px solid #ffffff;}
#ishumenu4 li:hover { border:1px solid #057fa7;}
#ishumenu4 li:hover a { color: #057fa7;}

// Style 5
#ishumenu5 {padding: 0px 15px;list-style: none;height:25px;text-transform:uppercase;}
#ishumenu5 ul {margin: 0px;padding: 0px 5px;list-style: none;height:25px;}
#ishumenu5 a {color: #000000;display: block;font: 14px Georgia,Century gothic,verdana, Arial, sans-serif;text-decoration: none;}
#ishumenu5 a:hover {color: #56bb33;display: block;text-decoration: none; }
#ishumenu5 li {float: left;margin: 2px 5px;padding: 5px 10px 0px 10px;height:25px;background: #f5a146;-webkit-border-radius:5px; -moz-border-radius: 10px 2px;border-radius: 10px 2px;} #ishumenu5 li:hover { background: #bb660b;}
#ishumenu5 li:hover a { color: #ffffff;}

// Style 6
#ishumenu6 {padding: 0px 15px;list-style: none;height:25px;text-transform:uppercase;}
#ishumenu6 ul {margin: 0px;padding: 0px 5px;list-style: none;height:25px;}
#ishumenu6 a {color: #ffffff;display: block;font: 14px Georgia,Century gothic,verdana, Arial, sans-serif;text-decoration: none;}
#ishumenu6 a:hover {color: #56bb33;display: block;text-decoration: none;}
#ishumenu6 li {float: left;margin: 2px 5px;padding: 5px 10px 0px 10px;height:25px;border-radius:10px 10px 0px 0px;-moz-border-radius:10px 10px 0px 0px;background: #047ecc;-webkit-border-radius:5px;}
#ishumenu6 li:hover { background: #8fd0f9;} #ishumenu6 li:hover a { color: #000000;}

// Style 7
#ishumenu7 {padding: 0px 15px;list-style: none;height:25px;text-transform:uppercase;}
#ishumenu7 ul {margin: 0px;padding: 0px 5px;list-style: none;height:25px;}
#ishumenu7 a {color: #ffffff;display: block;font: 14px Georgia,Century gothic,verdana, Arial, sans-serif;text-decoration: none;}
#ishumenu7 a:hover {color: #56bb33;display: block;text-decoration: none; }
#ishumenu7 li {float: left;margin: 2px 5px;padding: 5px 10px 0px 10px;height:25px;border-radius:0px 0px 10px 10px;-moz-border-radius:0px 0px 10px 10px;background: #047ecc;-webkit-border-radius:5px;}
#ishumenu7 li:hover { background: #8fd0f9;}
#ishumenu7 li:hover a { color: #000000;}

Blogger Page Navigation Hack for colorful Numbering

Page Navigation hack for blogger is really awesome trick to stylish the older post and newer post link with attractive page number buttons. You can easily get the Page Navigation Hack trick in the web. Almost all the sites provide the same style of page numbering. I would like to share some of the CSS design which will really change the style of your Page Navigation. To add these styles. Just replace the CSS of the Page Navigation with the CSS available here. You can select the style with the preview. This style includes Gradient effect without any image and has round cornered edges which give more effect to the button.

The Default Buttons look like this.

/* www.techirsh.tk */
.showpageArea {font-weight: bold;margin:5px;}
.showpageArea a {text-decoration:underline;color: #fff;}
.showpageNum a, .showpage a {text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #9dd53a; /* old browsers */
background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217),
color-stop(100%,#7cbc0a)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a',
endColorstr='#7cbc0a',GradientType=0 ); /* ie */
}
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc;
background: #6db3f2; /* old browsers */
background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2),
color-stop(50%,#54a3ee), color-stop(51%,#3690f0),
color-stop(100%,#1e69de)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2',
endColorstr='#1e69de',GradientType=0 ); /* ie */
}
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #e2e2e2; /* old browsers */
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1),
color-stop(100%,#fefefe)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',
endColorstr='#fefefe',GradientType=0 ); /* ie */
}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}

/* www.techirsh.tk */.showpageArea {font-weight: bold;margin:5px;}
.showpageArea a {text-decoration:underline;color: #fff;}
.showpageNum a, .showpage a {text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #789EB1; /* old browsers */
background: -moz-linear-gradient(top, #789EB1 0%, #618FA7 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#789EB1),
color-stop(100%,#618FA7)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#789EB1',
endColorstr='#618FA7',GradientType=0 ); /* ie */
}
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc;
background: #7d7e7d; /* old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #6B6B6B 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d),
color-stop(100%,#6B6B6B)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d',
endColorstr='#6B6B6B',GradientType=0 ); /* ie */
}
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #e2e2e2; /* old browsers */
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1),
color-stop(100%,#fefefe)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',
endColorstr='#fefefe',GradientType=0 ); /* ie */
}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}

/* www.techirsh.tk */.showpageArea {font-weight: bold;margin:5px;}
.showpageArea a {text-decoration:underline;color: #fff;}
.showpageNum a, .showpage a {text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #f85032; /* old browsers */
background: -moz-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c),
color-stop(51%,#f6290c), color-stop(71%,#f02f17),
color-stop(100%,#e73827)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032',
endColorstr='#e73827',GradientType=0 ); /* ie */
}
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc;
background: #aebcbf; /* old browsers */
background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a),
color-stop(100%,#0a0809)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf',
endColorstr='#0a0809',GradientType=0 ); /* ie */
}
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #e2e2e2; /* old browsers */
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1),
color-stop(100%,#fefefe)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',
endColorstr='#fefefe',GradientType=0 ); /* ie */
}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}

/* www.techirsh.tk */.showpageArea {font-weight: bold;margin:5px;}
.showpageArea a {text-decoration:underline;color: #fff;}
.showpageNum a, .showpage a {text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #ffb76b; /* old browsers */
background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00),
color-stop(100%,#ff7f04)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b',
endColorstr='#ff7f04',GradientType=0 ); /* ie */
}
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc;
background: #9dd53a; /* old browsers */
background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217),
color-stop(100%,#7cbc0a)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a',
endColorstr='#7cbc0a',GradientType=0 ); /* ie */
}
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #e2e2e2; /* old browsers */
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1),
color-stop(100%,#fefefe)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',
endColorstr='#fefefe',GradientType=0 ); /* ie */
}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}

/* www.techirsh.tk */.showpageArea {font-weight: bold;margin:5px;}
.showpageArea a {text-decoration:underline;color: #fff;}
.showpageNum a, .showpage a {text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #3b679e; /* old browsers */
background: -moz-linear-gradient(top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-stop(51%,#207cca),
color-stop(100%,#7db9e8)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e',
endColorstr='#7db9e8',GradientType=0 ); /* ie */
}
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc;
background: #aebcbf; /* old browsers */
background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a),
color-stop(100%,#0a0809)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf',
endColorstr='#0a0809',GradientType=0 ); /* ie */
}
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #e2e2e2; /* old browsers */
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1),
color-stop(100%,#fefefe)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',
endColorstr='#fefefe',GradientType=0 ); /* ie */
}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}

Styling 'Contact form 7' Contact form for Wordpress

The 'Contact Form 7' is really an awesome plugin for Wordpress for adding contact form to our wordpress blog and getting mail to our inbox instantly. I guess maximum number of users might be using it in their blog. I thought of making the contact form more stylish and colorful using the CSS3. Styling the contact form is no way difficult. You just need to add the code you get here in the bottom of the css code of Contact Form 7.
looks confusing ??

1. Go to Plugins
2. Click Edit in Contact Form 7
3. Click on contact-form-7/styles.css in Plugin Files list (which is at the right sidebar)

Now add the additional code in the bottom of the codes. You can see some sample contact forms and its code below the image preview

.wpcf7 input,.wpcf7 textarea {
margin: 4px 0px;
color: #000;
padding: 6px 6px 6px 8px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #ffffff; /* old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff),
color-stop(100%,#e5e5e5)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',
endColorstr='#e5e5e5',GradientType=0 ); /* ie */
}

.wpcf7 input,.wpcf7 textarea {
margin: 4px 0px;
color: #000;
padding: 6px 6px 6px 8px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #49c0f0; /* old browsers */
background: -moz-linear-gradient(top, #49c0f0 0%, #2cafe3 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#49c0f0),
color-stop(100%,#2cafe3)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49c0f0',
endColorstr='#2cafe3',GradientType=0 ); /* ie */
}

.wpcf7 input,.wpcf7 textarea {
margin: 4px 0px;
color: #000;
padding: 6px 6px 6px 8px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #ffd65e; /* old browsers */
background: -moz-linear-gradient(top, #ffd65e 0%, #febf04 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e),
color-stop(100%,#febf04)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e',
endColorstr='#febf04',GradientType=0 ); /* ie */
}

.wpcf7 input,.wpcf7 textarea {
margin: 4px 0px;
color: #fff;
padding: 6px 6px 6px 8px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #a4b357; /* old browsers */
background: -moz-linear-gradient(top, #a4b357 0%, #75890c 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a4b357),
color-stop(100%,#75890c)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357',
endColorstr='#75890c',GradientType=0 ); /* ie */
}

.wpcf7 input,.wpcf7 textarea {
margin: 4px 0px;
color: #09749f;
padding: 6px 6px 6px 8px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #a9e4f7; /* old browsers */
background: -moz-linear-gradient(top, #a9e4f7 0%, #0fb4e7 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9e4f7),
color-stop(100%,#0fb4e7)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7',
endColorstr='#0fb4e7',GradientType=0 ); /* ie */
}

.wpcf7 input,.wpcf7 textarea {
margin: 4px 0px;
color: #686868;
padding: 6px 6px 6px 8px;
border: 1px solid #5998f7;
outline: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 0 1px 3px #5998f7;
-o-box-shadow: 0 1px 3px #5998f7;
-webkit-box-shadow: 0 1px 3px #5998f7;
-moz-box-shadow: 0 1px 3px #5998f7;
}

You can request me if you would like to have different design based on your website design.