Horizontal Floating Share Bar Widget For Blogger

Here is another cool sharing widget got blogger with a close button so if your visitors don't like this then they can close it by simply clicking on that close button. Let's smooth , cool , user friendly and provided by AddThis.com so it's 100% awesome. So not it's time to show you how to add this in your blog :

• Go To Blogger > Tempate > Edit HTML > Search For </head>
• Just above </head> post the script given below :

<script type="text/javascript">
var addthis_config = {
    bar_show_below : 150
}
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>

 Now search for </body> and just above it paste following code :

<div class="addthis_bar addthis_bar_medium">
    <label>Share This Page:</label>
    <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
        <span><a class="addthis_button_preferred_1"></a></span>
        <span><a class="addthis_button_preferred_2"></a></span>
        <span><a class="addthis_button_preferred_3"></a></span>
        <span><a class="addthis_button_preferred_4"></a></span>
        <span><a class="addthis_button_compact"></a></span>
        <span><a class="addthis_counter addthis_bubble_style"></a></span>
    </div>
</div>

• Save your template and we're done :)

 Comment to show your support :)

Shareaholic Sassy Bookmarks Widget For Blogger

No doubt that sharing a key of success for all bloggers and it's important to give our visitors a cool and friendly sharing widget. So instead of cool and friendly here is a sassy and friendly widget for your visitors. Shareaholic is one of the leading bookmarks widget website around the internet and here is an another widget of them for blogger.

On hover this widget will expand and give us some beautiful ways to share our articles with social networking sites like twitter and facebook. Adding this widget is so easy just click on Add To Blogger button below :

Dropdown Labels List Widget For Blogger

Tagging posts in labels makes navigation so easy for our visitors but soon list becomes big and take over our blog's sidebar and we have to remove other widgets.

Fortunately you can prevent that from happening by converting the widget into a a dropdown (so call Select List) menu.So here we go :

• Go To Blogger > Template > Edit HTML 

• Don't mark Expand Widget Templates and search for :

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Now replace this code with :

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<select style='width:100%' onchange='location=this.options[this.selectedIndex].value;'>
<option>Click to choose a label</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget> 

You can change widget width by changing width:100% . Maybe now you can add more widgets yo your sidebar.

Styling A Select Box Using CSS3

I often use select box in my html documents and i was wondering if i could style them with CSS3 and i searched it on google and found out. So today i'am gonna teach you how to style html select box :

Here is our simple select box/list :

Everything Widgets Tutorial CSS3 jQuery

This is the HTML code:

<select>
<option> Everything </option>
<option> Widgets </option>
<option> Tutorial </option>
<option> CSS3 </option>
<option> jQuery </option>
</select>

Very simple , basic and boring. There are certain elements of a select box that we can style such as the font, border, color, padding and background color:

Everything Widgets Tutorial CSS3 jQuery

But that annoying drop down arrow always stays the same. There is no direct way to do style it, but the workaround is pretty simple.

First we need to surround our select box element with a div container like this:

<div class="styled-select">
<select>
<option> Everything </option>
<option> Widgets </option>
<option> Tutorial </option>
<option> CSS3 </option>
<option> jQuery </option>
</select>
</div>

Now we'll add some CSS in it :

<style>
.styled-select {
width: 228px;
height: 34px;
overflow: hidden;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_JRz-bgAc-hcLVTK4jrgxxU5Vns_75MO_7pJ27Rcr3H2hHftuOzsxi4jeLTeb6jpZ_ZrY5x98VuwX2rvalWy7GbqrqfK3Ww475TgzfqsE3-qOJDljwGMa6oOxu1NnR2v1QV0O-YkUqQM/s1600/Select.png) no-repeat ;
border-radius: 10px;
}
.styled-select select {
background: transparent;
width: 228px;
padding: 5px;
border: 1px solid #CCC;
font-size: 16px;
height: 34px;
font-weight: bold;
outline:0px;
-webkit-appearance: none;
border-radius: 10px;
}
.styled-select option {
background: lightgrey;
width: 228px;
padding: 5px;
border: 1px solid #CCC;
font-size: 16px;
height: 34px;
outline:0px;
-webkit-appearance: none;
}
</style>

This will look like :

Everything Widgets Tutorial CSS3 jQuery

Knowing this little workaround will make it a whole lot easier to style your select box exactly how you want it to be styled using nothing but CSS.

Protect Your Email Address From Spam

There are many reasons why you shouldn't place your email in on a Web Page; the number one being spambots. There are tons a spambots running around the Web looking for that '@' symbol so that they can bombard you with as much spam as possible. Instead of displaying my email address, I use a contact form.Below trick will reduce your chances of getting targeted by spambots.

As you can see in above image, today my spam box got 867 mails (In last 7day) so here is a clever and safe way to display your email address using CSS redirection.

First we have to post this CSS in your HTML document or Blogger template above </head> :

<style type="text/css">
span.redirect {
unicode-bidi:bidi-override;
direction: rtl;
}
</style>

Now we have to write our email address in backwards like this :

<span class="redirect">moc.liamg@emanruoy</span>

It's a simple and useful trick.

Blogger Limits

Just like every website blogger has some user friendly limits.Blogger is one of the best blogging platform after wordpress and it's 100% free but blogger has some user limits (Per Account) which are listed below :

Account limits

• Number of blogs: 100 per account.
• Profile Interests and Favorites: 2,000 characters in each field.
• Number of blogs to follow: 300 blogs per account.
• Profile "About Me" info length: 1,200 characters.
• Image uploaded via post editor: 1600px wide. Larger images can be uploaded but it will be scaled down to 1600px wide while preserving the aspect ratio.Image (for background) uploaded via Template Designer > Background page: No limit
• Image uploaded via post editor: 8MBImage (for background) uploaded via Template Designer > Background page: 300kB.
• Uploaded via Blogger Mobile: 250KBCapacity of image hosting (on Blogger partner Picasa Web Albums): 1024MB per account.
• Bandwidth of image hosting: No limit.

Blog Limits

• Length of blog title: 90 characters.
• Length of subdomain name (as in http://SUBDOMAIN.blogspot.com): 37 characters.
• Length of blog description: 500 characters.
• Number of members: 100 member invitations per blog.
• Number of readers (for a private blog): 100 per blog.
• Number of posts: No limit. (However, currently the Edit posts list maxes out at 5000 posts, which could make some older posts inaccessible for editing. Blogger is working on a fix).
• Number of posts displayed on multiple-post pages (homepage, archive etc.):
• Blogger will attempt to display the number of posts as set in Settings > Formatting > Show At Most provided the posts’ file size does not exceed the Blogger auto-pagination file size cap of 1MB.
• Bigger posts may cause fewer number of posts to be displayed.
• Number of static pages: 10 per blog.
• Number of labels: 5000 unique labels per blog.

Post Limits

• Length of individual post: No limit.
• Size of individual post: No limit, but very large posts may run you up against the multiple-post page size limit (see above).
• Number of labels: 20 unique labels per post.
• Number of comments: No limit.
• Length of post filename: 39 characters (auto-generated from post title, truncated to length).

Other Limits 

• Label length: 200 characters per label.
• Comment length: 4,096 characters per comment.
• 1,000 images per Picasa album.

I hope this will help you in future and if you see any mistake then please comment to let me know. :)

Add A Copyright Notice To Copied Text

I use tynt tools for my other blogs which add a copyright text and post link into all text visitors copy from my blog and i thought that there would be some trick to do this without using tynt. While searching it on Google i found one post about it on Bavotasan , which i'am going to share with you guys.

It's easy and you can do this in your html documents/blogger/wordpress and every single thing which supports HTML and JavaScript. One more thing that this script doesn't support IE so i suggest you to download Google Chrome.

Below is the script

<script type="text/javascript">
function addLink() {
var body_element = document.getElementsByTagName('body')[0];
var selection;
selection = window.getSelection();
var pagelink = "<br /><br /> Read more at: <a href='"+document.location.href+"'>"+document.location.href+"</a><br />Copyright &#169; Widget Craft"; // change this if you want
var copytext = selection + pagelink;
var newdiv = document.createElement('div');
newdiv.style.position='absolute';
newdiv.style.left='-99999px';
body_element.appendChild(newdiv);
newdiv.innerHTML = copytext;
selection.selectAllChildren(newdiv);
window.setTimeout(function() {
body_element.removeChild(newdiv);
},0);
}
document.oncopy = addLink;
</script>

That's.....If you're copying content from any site please respect their copyrights.

Creating Smiley Face In CSS3

Here is an another article on CSS3 power which is amazing as always.There are two qualities of this , first that it's cool and second that if you're a 8-bit fan than go to Internet Explorer and it'll look something like this :

And all i wanna say this that go and please download Google Chrome if you wanna see every CSS3 element beautiful as that. So here we go :

HTML :

<div class="smileyface">
    <p class="eyes lefteye"></p>
    <p class="eyes righteye"></p>
    <div class="smile">
        <div class="corner"></div>
        <div class="corner right"></div>
    </div>
</div>

CSS :

div.smileyface {
width: 300px;
height: 300px;
position: relative;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
display: block;
background: #ffe632;
background: -webkit-gradient(linear, left top, left bottom, from(#fffe8d), to(#f6d23e));
background: -moz-linear-gradient(top,  #fffe8d,  #f6d23e); box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
-webkit-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
}

p.eyes {
width: 50px;
height: 80px;
background: #222;
border-radius: 100px/160px;
-webkit-border-radius: 100px 160px;
-moz-border-radius: 100px/160px;
position: absolute;
top: 40px;
box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
-webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
-moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
}
p.eyes.lefteye {
left: 75px;
}

p.eyes.righteye {
right: 75px;
}

div.smile {
width: 200px;
height: 70px;
border: 10px solid #222;
border-top: 0;
background: rgba(0,0,0,0);
-moz-border-radius: 0 0 120px 120px / 0 0 90px 90px;
-webkit-border-radius: 0 0 120px 120px 0 0 90px 90px;
border-radius: 0 0 120px 120px / 0 0 90px 90px;
position: absolute;
bottom: 50px;
left: 38px;
box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
-webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
-moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
}

div.corner {
width: 10px;
height: 30px;
background: #222;
border-radius: 100px/160px;
-webkit-border-radius: 100px 160px;
-moz-border-radius: 100px/160px;
position: absolute;
top: -12px;
-webkit-transform: rotate(65deg);
-moz-transform: rotate(65deg);
left: -12px;
}

div.corner.right {
left: 202px;
-webkit-transform: rotate(-65deg);
-moz-transform: rotate(-65deg);  
        }

So here in the full document :

<div class="smileyface">
    <p class="eyes lefteye"></p>
    <p class="eyes righteye"></p>
    <div class="smile">
        <div class="corner"></div>
        <div class="corner right"></div>
    </div>
</div>
<style>
div.smileyface {
width: 300px;
height: 300px;
position: relative;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
display: block;
background: #ffe632;
background: -webkit-gradient(linear, left top, left bottom, from(#fffe8d), to(#f6d23e));
background: -moz-linear-gradient(top,  #fffe8d,  #f6d23e); box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
-webkit-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
}

p.eyes {
width: 50px;
height: 80px;
background: #222;
border-radius: 100px/160px;
-webkit-border-radius: 100px 160px;
-moz-border-radius: 100px/160px;
position: absolute;
top: 40px;
box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
-webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
-moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
}
p.eyes.lefteye {
left: 75px;
}

p.eyes.righteye {
right: 75px;
}

div.smile {
width: 200px;
height: 70px;
border: 10px solid #222;
border-top: 0;
background: rgba(0,0,0,0);
-moz-border-radius: 0 0 120px 120px / 0 0 90px 90px;
-webkit-border-radius: 0 0 120px 120px 0 0 90px 90px;
border-radius: 0 0 120px 120px / 0 0 90px 90px;
position: absolute;
bottom: 50px;
left: 38px;
box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
-webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
-moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
}

div.corner {
width: 10px;
height: 30px;
background: #222;
border-radius: 100px/160px;
-webkit-border-radius: 100px 160px;
-moz-border-radius: 100px/160px;
position: absolute;
top: -12px;
-webkit-transform: rotate(65deg);
-moz-transform: rotate(65deg);
left: -12px;
}

div.corner.right {
left: 202px;
-webkit-transform: rotate(-65deg);
-moz-transform: rotate(-65deg); }
</style>

That was awesome and all credits of this awesome works go to Bavotasan.com .

5 Stylish Newsletter Forms

Every blogger wants a good newsletter template for their newsletter just like me and with help of Google Docs even peoples who are using Blogger as their blogging platform can also create their own newsletter.

All newsletter are image-based forms which are created on a image with HTML and CSS and looks really amazing.

---

<style type="text/css">
#WC-Newsletter1-Box {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3FX1HYoeIV1pidduutXnbiT52rvKxvHX8Xlnw3ouNtK7fOFip46YSy4lfxUwijhHeXu5_Z6QIIykOJDrIlz9_f73VMJg5IMlvkm6OZ7Qio_kn-PGlpwaLyPSCTewo8_P9ciCoBUWLIx0/s1600/Newsletter-1.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 264px;
}
form#WC-Newsletter1-Form {
    display: block;
    margin: 0;
    padding-left: 71px;
    padding-top: 63px;
}
form#WC-Newsletter1-Form #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 21px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 160px;
    outline:0px;
}
form#WC-Newsletter1-Form #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 21px;
    padding-right: 45px;
    position: relative;
    left: 92px;
    top: 28px;
    width: 35px;
}

</style>
<div id="WC-Newsletter1-Box">
    <form id="WC-Newsletter1-Form" action="#" method="post">
        <input type="email" id="s" name="email" value="Enter Your E-Mail"
        onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/>
        <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFD1aSgSrFBkh9dR3o3kaHzw6AlA5dF96bT0RYsUmNJXsfKyfdcIsZhbdEsgVUi2CiaErEILNFuhWpWWxRqQkCBgwu1-cNuJiQBAW7DWew0FlwSTvmjXHjVVC8NRAOw-8G5scNl7JHpew/s1600/blank.gif" id="sbutton"/>
    </form>
</div>

---

<style type="text/css">
#WC-Newsletter2-Box {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRkjC2ar-lJbACrGANsZGv9t5R6_WXUIGVfkRpOqNztuuyUUewNkXYakVjOmo2CAmizPh-XkSWTCkqBUe5Oj8f4XkDkqO-_7OlL87YPurlpHZPn3W-couMLSa8U0QZ8ZuIXyo8vi-BAo4/s1600/Newsletter-2.png)no-repeat scroll center center transparent;
    height: 142px;
    width: 300px;
}
form#WC-Newsletter2-Form {
    display: block;
    margin: 0;
    padding-left: 71px;
    padding-top: 63px;
}
form#WC-Newsletter2-Form #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: -6px;
    padding-left: 2px;
    vertical-align: top;
    width: 270px;
    outline:0px;
    position: relative;
    left: -57px;
}
form#WC-Newsletter2-Form #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 32px;
    position: relative;
    left: 107px;
    top: 13px;
    width: 111px;
}

</style>
<div id="WC-Newsletter2-Box">
    <form id="WC-Newsletter2-Form" action="#" method="post">
        <input type="email" id="s" name="email" value="Enter Your E-Mail"
        onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/>
        <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFD1aSgSrFBkh9dR3o3kaHzw6AlA5dF96bT0RYsUmNJXsfKyfdcIsZhbdEsgVUi2CiaErEILNFuhWpWWxRqQkCBgwu1-cNuJiQBAW7DWew0FlwSTvmjXHjVVC8NRAOw-8G5scNl7JHpew/s1600/blank.gif" id="sbutton"/>
    </form>
</div>

---

<style type="text/css">
#WC-Newsletter3-Box {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEkxRY38f8yU-4ADMpUP65fSehxktShCVIVNO3uXnLpOhhkmlKYZc2I-eid52w1BazMO3mQ0Eni2tWR2HjEuJQQTQrHLaFo6ygrxHpxMJ97_FV14lW0DwRm8ICQcupZjEOE-cfRkuNaKM/s1600/Newsletter-3.png)no-repeat scroll center center transparent;
    height: 230px;
    width: 355px;
}
form#WC-Newsletter3-Form {
    display: block;
    margin: 0;
    padding-left: 71px;
    padding-top: 63px;
}
form#WC-Newsletter3-Form #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 118px;
    vertical-align: top;
    width: 235px;
    outline:0px;
    position: relative;
    left: -35px;
}
form#WC-Newsletter3-Form #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 32px;
    position: relative;
    left: 206px;
    top: -31px;
    width: 55px;
    border-radius: 0px 25px 25px 0px;
}

</style>
<div id="WC-Newsletter3-Box">
    <form id="WC-Newsletter3-Form" action="#" method="post" >
        <input type="email" id="s" name="email" value="Enter Your E-Mail"
        onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/>
        <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFD1aSgSrFBkh9dR3o3kaHzw6AlA5dF96bT0RYsUmNJXsfKyfdcIsZhbdEsgVUi2CiaErEILNFuhWpWWxRqQkCBgwu1-cNuJiQBAW7DWew0FlwSTvmjXHjVVC8NRAOw-8G5scNl7JHpew/s1600/blank.gif" id="sbutton"/>
    </form>
</div>

---

<style type="text/css">
#WC-Newsletter4-Box {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhScvYBHYBWBx_W6TEF1RSNpO9fKlZyxGCsKd_SPsNYWlmB3-dqrwlSK46-M74NKWhjtoAyKaeMwXujpXHHXK7TUXSEBYFpXIlgLPdQ6Px-zdi8VOQpJjzXQYx5C2-P6PsCWe9v_U3lflw/s1600/Newsletter-4.png)no-repeat scroll center center transparent;
    height: 311px;
    width: 349px;
}
form#WC-Newsletter4-Form {
    display: block;
    margin: 0;
    padding-left: 71px;
    padding-top: 63px;
}
form#WC-Newsletter4-Form #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 37px;
    vertical-align: top;
    width: 235px;
    outline:0px;
    position: relative;
    left: 43px;
}
form#WC-Newsletter4-Form #d {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 22px;
    vertical-align: top;
    width: 235px;
    outline:0px;
    position: relative;
    left: 43px;
}
form#WC-Newsletter4-Form #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 28px;
    position: relative;
    left: 179px;
    top: 41px;
    width: 90px;
}

</style>
<div id="WC-Newsletter4-Box">
    <form id="WC-Newsletter4-Form" action="#" method="post">
        <input id="d" name="name" value="Enter Your Name"
        onfocus='if (this.value == "Enter Your Name") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your Name";}'/>
        <input type="email" id="s" name="email" value="Enter Your E-Mail"
        onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/>
        <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFD1aSgSrFBkh9dR3o3kaHzw6AlA5dF96bT0RYsUmNJXsfKyfdcIsZhbdEsgVUi2CiaErEILNFuhWpWWxRqQkCBgwu1-cNuJiQBAW7DWew0FlwSTvmjXHjVVC8NRAOw-8G5scNl7JHpew/s1600/blank.gif" id="sbutton"/>
    </form>
</div>

---

<style type="text/css">
#WC-Newsletter5-Box {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSIv6QlfK6M3sg6ljYqmmSiZ-RFXnHpfTp11fAZWDKcIKXYYUA9HpHDuXtx73UOlIpM-UD8-xKpN6U4J081hXlNBoeyaHINcW45KhnmOPUtMUF8Z15G1dLtRaBagz0dSgGEEiKaq5_EB4/s1600/Newsletter-5.png)no-repeat scroll center center transparent;
    height: 299px;
    width: 408px;
}
form#WC-Newsletter5-Form {
    display: block;
    margin: 0;
    padding-left: 71px;
    padding-top: 63px;
}
form#WC-Newsletter5-Form #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 37px;
    vertical-align: top;
    width: 275px;
    outline:0px;
    position: relative;
    left: -25px;
}
form#WC-Newsletter5-Form #d {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 38px;
    vertical-align: top;
    width: 275px;
    outline:0px;
    position: relative;
    left: -25px;
}
form#WC-Newsletter5-Form #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 43px;
    position: relative;
    left: -36px;
    top: 25px;
    width: 144px;
    border-radius: 5px;
}

</style>
<div id="WC-Newsletter5-Box">
    <form id="WC-Newsletter5-Form" action="#" method="post">
        <input id="d" name="name" value="Enter Your Name"
        onfocus='if (this.value == "Enter Your Name") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your Name";}'/>
        <input type="email" id="s" name="email" value="Enter Your E-Mail"
        onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/>
        <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFD1aSgSrFBkh9dR3o3kaHzw6AlA5dF96bT0RYsUmNJXsfKyfdcIsZhbdEsgVUi2CiaErEILNFuhWpWWxRqQkCBgwu1-cNuJiQBAW7DWew0FlwSTvmjXHjVVC8NRAOw-8G5scNl7JHpew/s1600/blank.gif" id="sbutton"/>
    </form>
</div>

---

If any got some cool form images like this then please post them in comment below and i might add them in some next posts..... :)

5 Amazing CSS3 Contact Us Forms

Original creator and form source CSS Globe and all credits goes to them i'am just sharing with you guys , visit their website for more awesome stuff including this forms. So these forms looks truly beautiful and professional ( Thanks to CSS Globe ) so here we go with CSS:

CSS :

<style>
/* form 1 */
#form1{
margin:1em 0;
                width:600px;
padding-top:10px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOllfwxq6ig3TcQS2gXKjvTibJqXtRLKpaaaMCqe1ZKMpfAL_PWDeM_ePDXIsTQZserb3anRnlccK2QKKN0BJsXAZAK9g6B5DwqMjpVW5BVqN88cAP0L-tO7yJH-9tq-tth_8MOGXgVyY/s1600/form_top.gif) no-repeat 0 0;
}
#form1 fieldset{
margin:0;
padding:0;
border:none; float:left;
display:inline;
width:260px;
margin-left:25px;
} #form1 legend{display:none;} #form1 p{margin:.5em 0;} #form1 label{display:block;} #form1 input, #form1 textarea{ width:252px;
border:1px solid #ddd;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6zrvdja_8GXtemDlLwglRa9tp_vDoKX-geIKMs9U5Gci5mbII0cBSzyQczZIM9GtUB1u03jGskg_OFnOfFkivYVFlTkLQQ7NZpDAjtRmBIZKjGrWYp3jVnI9vf2-vq3fig5aClKTgeyo/s1600/form_input.gif) repeat-x;
padding:3px;
                outline:0px;
} #form1 textarea{
height:125px;
overflow:auto;
                outline:0px;
} #form1 p.submit{
clear:both;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzEKjhC8zBE8NYD1zdElE8UoaonG74oWl411nUMU69YKWwmgNZewLDFqNZdpvwX_hmFSpzNoj6XnB_lG_vkuyJP_9tPjyXCIRdEz8UrhZSU5d3xl4grSz99ZlYFUzo_IdUpfRp2_dWVq4/s1600/form_bottom.gif) no-repeat 0 100%;
padding:0 25px 20px 25px;
margin:0;
text-align:right;
} #form1 button{
width:150px;
height:37px;
line-height:37px; border:none;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5a0CIdAbAC_cO2JOWHNIdpsVoRit5HVjHwoRjnES-TfDDjcjfHswVPI00wbecLfuIOo1mn6y4YyEBEQUPr5qQVNOd5q92WJKhguajWUPjM9PTpQox_bFZjcJwGEaIPDiaM2Cv6jWcbZY/s1600/form_button.gif) no-repeat 0 0;
color:#fff;
cursor:pointer;
text-align:center;
}
/* // form 1 */

/* form 2 */
#form2{
margin:1em 0;
color:#fff;
width:320px; /* customize width, this form have fluid layout */
}
#form2 h3{
margin:0;
background:#57a700 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYzpNY2vmaIIxdh6aZ1E8iDTcXMSfXyZSCawjuFGsA5ETaJncLpJxtxflwodutg8nbxs_HHpJVquBJcZHy26ECokv4kZ9yn-NTbeZ0IxPKQQB7iM5vjYCjClKElrmk-XPvqN94RfBQmOE/s1600/form_heading.gif) repeat-x; color:#fff;
font-size:20px;
border:1px solid #57a700;
border-bottom:none;
} #form2 h3 span{
display:block;
padding:10px 20px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu8-M1zEuu2gQYeUl9a9Vht-olHPhCiVXDyvjjLCstofiWlkxzAErBX9kn59jVAaq1_5Y9UfL61QThm1lXzpo5kCcB1uR4nQxAXFSMtIoukzNiT0WxxPIYzJHVD8JUBHci72SIbZ8LSK0/s1600/form_ico.gif) no-repeat 93% 50%; } #form2 fieldset{
margin:0;
padding:0;
border:none; border-top:3px solid #000;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaErEKNi_PNoYdhY_xbWehFB-AJMARvYmqOIuTUluGgS-kZmFNQTIk0UoSogWXc5kda0MXd8SZCQQfH5UhEW0yeJV86xey2KJo28P256ViofmCbb3Igf9gL1BTGeWrv_ztTHW5UXzo4Xo/s1600/form_top.gif) repeat-x; padding-bottom:1em;
} #form2 legend{display:none;} #form2 p{margin:.5em 20px;} #form2 label{display:block;} #form2 input, #form2 textarea{ width:272px;
border:1px solid #111;
background:#282828 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcM2K-bpd4f3ki2wP7VecItJP2KEiI9tK2iz5tA1JhfNdm6S9VmpVEZeMw7RjxoFT1ItrYRx_PmCAFVeynbdMRCUEapXW2C1dX0nvutm_zfo3TmbzyqfzBtl684ITuzTIdo0BNsMMkW6Q/s1600/form_input.gif) repeat-x;
padding:5px 3px;
                outline:0px;
color:#fff;
} #form2 textarea{
height:125px;
overflow:auto;
                outline:0px;
} #form2 p.submit{
text-align:right;
} #form2 button{
padding:0 20px;
height:32px;
line-height:32px; border:1px solid #70ad2e;
background:#5aae00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1JNP-htPYnQ5SkdNuwF8nlWoppFML-zCtAZRki6bbBHq2BQbwWXcHr7-uYZNRXknJU64_YTQjC2pgNQnMecJngDDTewBatQaFK0jp1BYEqJg6Hchx3-msHsRPh9TlxYfJuOSq8Hhn5Z4/s1600/form_button.gif) repeat-x;
color:#fff;
cursor:pointer; text-align:center; }
/* // form 2 */
/* form 3 */
#form3{
margin:1em 0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWhQ03lRzqemybmKRYmWzwz1l_Zm2Te7bGmtvLC_P95V_AUsss4vNdt0EcCQ1vNkDRqkoKpzcnQi8nRadUYKMWWkZcpp2u9F3J8gwwPMNswGgJ6_0AWuKIcBO5-1IhAH5aDQGKcBKk2tI/s1600/form_bg.jpg) no-repeat 0 0;
width:542px;
height:364px; /* fixed size (envelope graphic) */
overflow:hidden;
}
#form3 h3{display:none;} #form3 fieldset{
margin:0;
padding:0;
border:none; float:left;
display:inline;
width:200px;
margin-left:34px;
padding-top:80px;
} #form3 fieldset.last{
width:254px;
margin-left:17px;
} #form3 legend{display:none;} #form3 p{margin:.5em 0;} #form3 label{display:block;} #form3 input, #form3 textarea{ width:192px;
border:1px solid #ddd;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlQvpenXQKgmdoXkerk2Tpc6E6ZUN7Pc-xlaLiFFk8Nop4fGJYeNo-nAXo8PVoCYHE0eRHhX30l6aaysr71V7ac6aqRNTZH-4eWKSpUb45AvvjssnfbVoUTq9X_Mv6IB5RY-fJf6iN25A/s1600/form_input.gif) repeat-x;
padding:3px;
                outline:0px;
} #form3 textarea{
width:246px;
height:200px;
overflow:auto;
                outline:0px;
} #form3 p.submit{
margin:0 34px;
clear:both;
position:relative;
} #form3 button{
padding:0;
position:absolute;
left:0;
top:-3.5em;
width:95px;
height:36px;
text-indent:-8000px;
overflow:hidden;
border:none;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtfiDQ5jwv9OPkcT2UqunOvMKJ4i__hoJY8N4Uy4w6lt879K9OpE8TZSZ7BdTiJSvGH5eS7Gf_hkCc4HqxTunbDbS5Q_clrQRTQgq6q8yY-jinlb1lsulguL7hLONuRoWURTH7h_lfYHw/s1600/form_button.gif) no-repeat 0 0;
color:#fff;
cursor:pointer;
}
/* // form 3 */
/* form 4 */
#form4{
margin:1em 0;
padding-top:1.5em;
color:#246878;
width:350px; /* customize width, this form have fluid layout */
background:#fbfaf4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil5nqBdSbQ8ojZ7fkq9d4GJSY4B6pKzlFhNciuK5O3_R3P6GhY4JM87GVk5fG0c4mQ72mCGWTfuKz1qsw5v_vTCuDy7mN_iq7zt_3TqP18hp_f3_r1vKx2ia4VZNqRmPWQqlWHnkhfoME/s1600/form_bg.gif) repeat-y; }
#form4 h3{
margin:0 20px;
height:28px;
text-indent:-8000px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH19jQd8KKxic7DHG0URfp564ATgOvnQYc7bBXvPSnW_pfX8N4_mR8o9nts8MTfLaFG-VixUycI27Qd1Q88Sdr-0nyK6DlGAyEHDLC61CLkkXVGVGK9WGSXDQktsC1WxEsBj28dEjDw7c/s1600/form_heading.gif) no-repeat 0 0; } #form4 fieldset{
margin:0;
padding:0;
border:none; padding-bottom:1em;
} #form4 legend{display:none;} #form4 p{margin:.5em 20px;} #form4 label{display:block;} #form4 input, #form4 textarea{ width:302px;
border:1px solid #dfdfdf;
background:#fff;
                outline:0px;
padding:5px 3px;
} #form4 textarea{
height:125px;
                outline:0px;
overflow:auto;
} #form4 p.submit{
text-align:right;
} #form4 button{
margin:0;
padding:0;
text-indent:-8000px;
overflow:hidden;
width:88px;
height:56px;
border:none;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfs0_k01WXDn-8VZumpq0d_JpQlvtigXIG2vWdYEoEWDwpZWXwQ4mm7DxlA9GCRRB5OdvOiZuBXt_hgHlfKbU7mF_Sv5bh67ielzSn4yhDGvBSn8zWn81X_9pva1kwUfHcmW7ImEaoUuU/s1600/form_button.gif) no-repeat 0 0;
cursor:pointer;
text-align:left;
}
/* // form 4 */

/* form 5 */
#form5{
margin:1em 0;
padding-top:10px;
}
#form5 fieldset{
margin:0;
padding-top:.5em;
border:none; border-top:1px solid #f1f1f1;
} #form5 legend{
background:#fff;
padding:0 5px;
font-style:italic;
} #form5 p{
clear:both;
margin:.5em 0;
overflow:hidden;
} #form5 label{
float:left;
width:60px;
display:block;
text-align:right;
margin-right:10px;
} #form5 input, #form5 textarea{ margin:0; width:250px;
                outline:0px;
border:1px solid #ddd; padding:3px 5px 3px 25px;
} #form5 input#name{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1HpAaUCELV4K1-7UCQ99iut8yGa4FWQqg0o0rvFy1V8oigUlb1M1hmQfHy6NucIioVp1bKrkkeCASvBPso0OaFtCZwb3ZYpQmDb2n7496SULzX1SRMyC-WNQOMoMhplo882X6MnPdtAI/s1600/form_name.gif) no-repeat 5px 50%;}
#form5 input#email{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8stcNavSUoBqa4LbJ4IehqTQeMHV0OCGKDdwydT6mcXss8MDOtFHJP_tLmYS23kM7NxA7Ujx2BOY6PRSRi9YkKqxWij13sDB_bWL9H-niqt0ya00VYsq_tqSq4ov6qVdq2HTbhxTM3F0/s1600/form_email.gif) no-repeat 5px 50%;}
#form5 input#web{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrP6eK4x-QY8mdWY3biQy0f_JClAlibialbQqbe5S66iSTWaD32RpoW1yKS7xdOj7ufXt_MoNMnhXI8VG9PlZwyc5nvDWWh0wArrmHWyhU1-_ow2E5HUu8OrbkKjyBclqId2PN_s6hc2U/s1600/form_url.gif) no-repeat 5px 50%;}
#form5 textarea#message{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHVDUB3LPRdSw2-jYwvT1cBiIEjmYq9N71BQFMMk2lj0UoPUHOR_6ZLqWgUBcNVWtSTUK7EDd3iOgI-3nj8ylkt9hRgRw3uE_RSa11F5SJRba-k0jkkFBgwcEZTE1SHIcBcdbw6D-SK_A/s1600/form_note.gif) no-repeat 5px 6px;}
#form5 textarea{
height:125px;
                outline:0px;
overflow:auto;
} #form5 p.submit{
clear:both;
margin:1em 0;
padding:.5em 70px;
border-top:1px solid #f1f1f1; } #form5 button{
height:28px;
line-height:28px; border-top:1px solid #999;
border-left:1px solid #999;
border-right:1px solid #333;
border-bottom:1px solid #333;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj37LqPnKywvbjfLcWn_EQzo_b9BLhDta3verZoMhhYLQx7D-wNcHflWTuP8r-vddbobUg3nQjt1d4hOZeyzXhR1qEXzIFBHRN-gUuts2CsuJaSzmDcOSFr5La3l2j1noyYC8BAIHauOQk/s1600/form_button.gif) no-repeat;
padding:0 10px 0 25px;
color:#333;
cursor:pointer;
text-align:left;
font-size:11px;
font-weight:bold;
}
/* // form 5 */
</style>

 Just post above CSS in your blog's CSS or on your HTML document now below is HTML markup :

<form id="form1/2/3/4/5" action="/" method="post">
<fieldset><legend>Contact form</legend>
<p class="first">
<label for="name">Name</label>
<input type="text" name="name" id="name" size="30" />
</p>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" size="30" />
</p>
<p>
<label for="web">Website</label>
<input type="text" name="web" id="web" size="30" />
</p>
<p>
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
</p>
<p class="submit"><button type="submit">Send</button></p>
</fieldset>
</form>

Post above HTML in your document and with if form1 /form2 /form3 /form4 or form5 because every id has different form style.