Blogger Widget

Showing posts with label Blogger Widget. Show all posts

Adsense, Blogger Widget, Google, Online Money

Add Adsense Between Posts on Home Page

Adsense placing is very important in the sense of earning online because good placement of ads will make more and more money easily for you and this is also important that ad placement should be correct and if it goes wrong then our ads could be banned easily be'coz many ads placement doesn't compatible with the Google Adsense Policy. So, we should place our ads at some certain good places where our adsense account be remain active and easily we can get more and more money.

Blogger Widget, Web Designing

Give Access to Visitors to Change Your Blog's Background Color

Hemant Verma - 11:22 PM

We can easily change the color of our blog's background and also can easily customize it but we can do this only when we are admin OR owner of blog / site, but suppose if we give access to our visitors that they able to change the color of our background without give the login access to our visitor. Just only give a color changing widget to our visitor which directly works on our blog's template but it will not remain same for every visitor that color can see only a single visitor, who will try to change it's color.

Live Demo

Add Color Changing Widget

Login to Blogger
Click on Add to Blogger Button below
Your Widget add automatically.

If Any Problem Comes, Ask in Comments

Blogger Widget, CSS

Add a Biggy Simple and Professional Subscription Widget

Hemant Verma - 8:59 PM

What should I say about any widget be'coz all widgets are very awesome and very helpful for any blogger and there are thousands of widgets are available on internet where you can get the many kinds of professional widgets for blogging and many kinds of platforms like Wordpress, Blogger, Tumbler etc. but we deals on the blogger platform be'coz it's very easy and compatible for all kinds of HTML, JavaScript and CSS languages. We have a new a fresh Subscription widget for blogger with mouse hover effect.

Live Demo

Add Biggy Simple and Subscription Widget

Click on Drop Down Menu and select Layout

Add a HTML/JavaScript Gadget

Paste below code in it.

<style>
.rosyy{
color:#3e3e3e;
font-family: Impact, sans-serif;
font-size: 30px;
font-weight: normal;
line-height: 30px;
padding: 10px 0 0 10px;
text-shadow:0px 1px 0px #fff, 0px 2px 0px #C6C6C6;
}

.WG-91481wid {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIYiLHOJaDTVY3xjrq5PIKtiBuVN8_vOeQLtGxRvQduzw0eLVqLJFUjbB5W6W1ZcfraTGtjablz145iXX0Id2N9y7sRtxuBoUUD133w_qGbtgNHRko6MdrL1L0pc2XbWiOD6cDvFa9WlCO/s400/body.png);
margin: 20px;
border-radius: 10px 30px 10px 30px;
width: 728px;
height: 120px;
color: #fff;
font-size: 14px;
padding: 15px;
transition:border-radius .5s;
-webkit-transition:border-radius .5s;
-moz-transition:border-radius .5s;
}
.WG-91481wid:hover{
border-radius:30px 10px 30px 10px;
}
.WG-91481wid p {
width: 350px;
line-height: 21px;
}
.subsbox {
float: right;
}
#subbox {
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTa21R9gzR2fQPWCBHjCIs3uQ5AKyWm9Zh7L2_TxIhfK1Y0SrVO_5hvKHOsGwk2SPT91GukxGuk3bqt4r8rPJ2GnRvzUgPKERqlzaMefhe2NxzUCBFXiSMkdWrnDbqnoKKctFKSCN92GIU/s1600/subscribe-email.png) no-repeat right;
width: 200px;
padding: 10px;
color: #888;
border: 1px soiid #222222;
}
#subbutton {
background: #2aa4cf;
color: #fff;
border-radius: 5px 15px 5px 15px;
height: 40px;
border: 1px solid #292929;
text-transform: uppercase;
font-weight: bold;
transition:border-radius .5s;
-webkit-transition:border-radius .5s;
-moz-transition:border-radius .5s;
}
#subbutton:hover {
border-radius:15px 5px 15px 5px;
}

</style>

<div class="WG-91481wid">
<div class="rosyy"><center>Get Daily Fresh Resepi Direct in Your Mail</center></div><br/>
<div class="subsbox">
<form action="http://feedburner.google.com/fb/a/mailverify" id="subscribe" method="post" onsubmit="window.open( 'http://feedburner.google.com/fb/a/mailverify?uri=WIdgetGenerators', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input id="subbox" name="email" onblur="if ( this.value == '' ) { this.value = 'Enter your email address...'; }" onfocus="if ( this.value == 'Enter your email address...') { this.value = ''; }" value="Enter your email address..." type="text">
<input name="uri" value="WidgetGenerators" type="hidden">
<input name="loc" value="en_US" type="hidden">
<input id="subbutton" value="Subscribe!" type="submit">
</form>
</div>
<font color="#434343"><p>We Will Send You Our Best Direct in Your Mail and You Get Instant Access on Our Every Article! Without Any Cost.</p></font>
</div>

Save Your Widget.

If Any Problem Comes, Ask in Comments

Blogger Widget

Add a Posts Comments and Pages Statistic Widget for Bogger

Hemant Verma - 12:48 PM

Statistic for blogger are very important be'coz we can easily track the progress of our visitors but similarly as we want to track our visitors and our visitors also may be wants to track us our posts, pages and comments etc so for this purpose we have a very unique widget for blogger by which ypu can show your visitors that how many post we have written and how many comments we got till yet and the profit will be that if your post will be above than 75 then visitors will love to read your content.

Live Demo

Add Stats Widget in Blogger

Click on Drop Down Menu and select Layout

Add a HTML/JavaScript Gadget

Paste below code in it.

<script style="text/javascript">

function numberOfPosts(json) {
document.write('Total Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}

function numberOfComments(json) {
document.write('Total Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}

function numberOfPages(json) {
document.write('Total Pages: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}

</script>

<ul><li><script src="http://www.widgetgenerators.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></li>

<li><script src="http://www.widgetgenerators.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></li>

<li><script src="http://www.widgetgenerators.com/feeds/pages/default?alt=json-in-script&callback=numberOfPages"></script></li>
</ul>

<span style="font-size:75%;"><a href="http://www.widgetgenerators.com/" target="_blank" style="color: #FFFFFF">Widgets for Blogger</a></span>

Save your Widget.

Make Changes....!

Replace it www.widgetgenerators.com with your own blog link (3 Times)

If Any Problem Comes, Ask in Comments

Blogger Widget, CSS, Generator

Add a Metro Style Social Bookmarking Widget

Hemant Verma - 11:04 PM

Presently blogger has many kinds of widgets related with social bookmarking which contents the hover effect and many kinds of pro effects in it but today this widget has a very simple look but professional feel with a awesome bigger hover effect when you touch your mouse pointer at the text of the widget. It includes the Facebook, Twitter, Google Plus and RSS Feed widget and it widget named as Metro Style Widget. This widget is simply made by the short codes of CSS it doesn't include the JavaScript and No other kind of languages, so there will not face any problem in it.

Live Demo

Add Metro Style Social Bookmarking by Widget Generator

Login to Blogger > Dashboard
Fill necessary blanks and Click on Generate button.
After Generating the code, Finally Click on Add to Blogger button
Your Widget will add automatically.

Blogger Widget, Hacks

Add a Professional eRose Author Bio Widget

Hemant Verma - 10:09 AM

Many Bloggers wants the new and fresh widgets of blogger and most of the saying we want new author bio widget which includes the all aspects of blogging like Social Media as Facebook, Twitter, Youtube etc. so keep it in mind, in this widget you will get Donation Button, Be a Blogger Button and much when you use this widget.

Live Demo

Add eRose Author Bio Widget in Blogger

Click on Drop Down Menu and select Template

Backup your Template before making any changes to your blog

Press Ctrl + F and search the code shown below.

]]></b:skin>

Paste below code just above it.

.clear {
clear:both;
}

#author-box {
margin:10px 0;
}

#author-box a:hover {
background:none!important;
}

#author-box .row-1 {
background:#333;
padding:20px;
}

#author-box .row-1 .avatar {
float:left;
line-height:1;
-moz-box-shadow:0 0 10px #FFF;
-webkit-box-shadow:0 0 10px #FFF;
box-shadow:0 0 10px #FFF;
}

#author-box .row-1 .info {
margin:0 0 0 110px;
}

#author-box .row-1 .info h6 {
color:#FFF;
font-size:20px;
margin:-4px 0 0;
}

#author-box .row-1 .info h6 span {
font-size:11px;
font-weight:400;
background:#1BA1E2;
-webkit-border-radius:40px;
-moz-border-radius:40px;
border-radius:40px;
filter:alpha(opacity=60);
opacity:0.6;
margin:0 0 0 1em;
padding:1px 9px 2px;
}

#author-box .row-1 .info p {
color:#DDD;
font-weight:400;
font-size:14px;
margin:0;
}

#author-box .row-2 {
background:#666;
}

#author-box .row-2 a.social-item {
display:block;
float:left;
color:#FFF;
text-align:center;
padding:15px;
}

#author-box .row-2 .social-item .icon {
height:32px;
width:32px;
}

#author-box .row-2 .social-item > span {
display:block;
text-align:center;
margin:auto;
}

#author-box .row-2 .social-item .label {
font-weight:700;
font-size:13px;
}

#author-box .row-2 .social-item .click {
font-size:11px;
color:#EAEAEA;
line-height:1;
}

#author-box .row-2 a.social-item:hover {
background:#1BA1E2!important;
}

#author-box .row-3 {
background:#1BA1E2;
}

#author-box .row-3 form,#author-box .row-3 a.donation-button {
display:block;
float:left;
}

#author-box .row-3 .donation-button {
background:#1BA1E2;
border:none;
font-family:Impact;
font-size:30px;
color:#FFF;
line-height:1.2em;
margin:0;
padding:10px;
}

#author-box .row-3 .donation-button:hover {
background:#000;
cursor:pointer;
}

#author-box .row-3 .register-button {
display:block;
color:#FFF;
border:none;
font-family:Impact;
font-size:30px;
text-align:right;
line-height:1.2em;
margin:0;
padding:10px;
}

#author-box .row-3 .register-button:hover {
color:#000;
cursor:pointer;
}

#author-box .row-2 .social-item.twitter .icon {
background-position:0 -32px;
}

#author-box .row-2 .social-item.facebook .icon {
background-position:0 -64px;
}

#author-box .row-2 .social-item.gplus .icon {
background-position:0 -96px;
}

#author-box .row-2 .social-item.linkedin .icon {
background-position:0 -128px;
}

#author-box .row-2 .social-item.youtube .icon {
background-position:0 -160px;
}

#author-box .row-2 .social-item.pinterest .icon {
background-position:0 -192px;
}

#author-box .social-item .icon {
background-image:url(https://lh5.googleusercontent.com/--PQVoN23nrI/UYHHvhtNSxI/AAAAAAAAJPA/5weO87qvER4/s224/ausocial.png)!important;
background-repeat:no-repeat;
}

Now Search for below code once again

<div class='post-footer-line post-footer-line-1'>

Paste below code just after it.

<div id='author-box'>
           <div class='row row-1'>
               <div class='avatar'>
                   <a href='http://www.widgetgenerators.com/2012/09/about-author.html'><img alt='author-avatar' class='avatar avatar-90 photo' height='90' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-0qnF72vsKqy3oaXuRAFYQI0jgYp9V5e7L5Ob5kYQrNwYIC56yzNJcj0CGhSWgXVa5IXP1QX652Hv8W02Roqz4MH5bUzyLWkIhOkeUb80w6VI3o3Pa119WAte2wBc7x5qXFQViucp2pgc/s1600/Capture.PNG' width='90'/></a>
               </div>
               <div class='info'>
<h6>Posted By: Hemant Verma <span>Admin and Author</span></h6>
    <p><strong><a href='http://www.widgetgenerators.com/2012/09/about-author.html'>Hemant Verma </a> is the founder of Widget Generators.</strong> <strong>Graduate in Computer Applications in 2012, Love to Make Blogger Hacks and Like to Play with HTML and a Business Man.</strong></p>
               </div>
               <div class='clear'/>
           </div>
           <div class='row row-2'>
               <a class='social-item website' href='http://www.widgetgenerators.com' meta='website' target='_blank'>
                   <span class='icon'/>
                   <span class='label'>Website</span>
                  <span class='click'><span class='val'>113576 Visitors</span> </span>
               </a>

               <a class='social-item twitter' href='https://twitter.com/Widgetgenerator' meta='twitter' target='_blank'>
                   <span class='icon'/>
                   <span class='label'>Twitter</span>
                   <span class='click'><span class='val'>200 Followers</span></span>
               </a>

               <a class='social-item facebook' href='http://www.facebook.com/Widgetgenerators' meta='face' target='_blank'>
                   <span class='icon'/>
                   <span class='label'>Facebook</span>
                   <span class='click'><span class='val'>500 Likes</span></span>
               </a>

               <a class='social-item gplus' href='https://plus.google.com/101961392825834817673' meta='gplus' target='_blank'>
                   <span class='icon'/>
                   <span class='label'>Google+</span>
                   <span class='click'><span class='val'>70 Joined</span></span>
               </a>

               <a class='social-item linkedin' href='http://ph.linkedin.com/Widgetgenerators' meta='linkedin' target='_blank'>
                   <span class='icon'/>
                   <span class='label'>LinkedIn</span>
                   <span class='click'><span class='val'>40 Links</span></span>
               </a>

               <a class='social-item youtube' href='https://www.youtube.com/user/Widgetgenerators' meta='youtube' target='_blank'>
                   <span class='icon'/>
                   <span class='label'>Youtube</span>
                   <span class='click'><span class='val'>30 Followers</span></span>
               </a>


           <div class='clear'/></div>
           <div class='row row-3'>
           <form action='https://www.paypal.com/cgi-bin/webscr' class='author-donation' method='post'>
               <input name='cmd' type='hidden' value='_donations'/>
               <input name='business' type='hidden' value='vhemant03@gmail.com'/>
               <input name='lc' type='hidden' value='US'/>
               <input name='item_name' type='hidden' value='Donate Blogger'/>
               <input name='no_note' type='hidden' value='0'/>
               <input name='currency_code' type='hidden' value='USD'/>
               <input class='donation-button' name='submit' type='submit' value='+Donate to Author'/>
           </form><a class='register-button' href='http://blogger.com/'>Become a Blogger</a><div class='clear'/></div>
    </div>

Finally Save your Template.

You are done

Make Changes....!

Replace this http://www.widgetgenerators.com/2012/09/about-author.html with your author bio page link (Optional)
Replace this https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-0qnF72vsKqy3oaXuRAFYQI0jgYp9V5e7L5Ob5kYQrNwYIC56yzNJcj0CGhSWgXVa5IXP1QX652Hv8W02Roqz4MH5bUzyLWkIhOkeUb80w6VI3o3Pa119WAte2wBc7x5qXFQViucp2pgc/s1600/Capture.PNG with your author image.
Replace this Hemant Verma with your Author OR Admin name.
Replace this Hemant Verma with your author bio.
Replace this www.widgetgenerators.com with your website link.
Replace this Widgetgenerator with your twitter username.
Replace this Widgetgenerators with your Facebook username.
Replace this 101961392825834817673 with your Google Plus id
Replace this Widgetgenerators with your linked in profile id.
Replace this Widgetgenerators with youtube username.
Replace this vhemant03@gmail.com with your email id on Paypal account

If Any Problem Comes, Ask in Comments

Blogger Widget, Hacks, Tutorials

Customize Contact Form of Blogger

Hemant Verma - 4:06 PM

As we all know that Blogger recently launched their contact form by which you can easily contact and send your questions and queries to the admin OR author of the blog / site and this very helpful for admins be'coz many professional bloggers had to purchase the hosting and then they created their own contact form by using PHP languages OR many of us (like me) use free wufoo OR and any other contact form making service and where we have create account and also had to spend long time to create them but after all you couldn't get any professional look but in today's tutorial you will easily design your contact form in just 5 min with free cost and it will for life long.

Live Demo

It Include only 3 Simple Parts.

    1. Add Contact Form in Blogger
    2. Add Contact Form in Static Page
    3. Customize Contact Form in New Look

Part 1. Add Contact Form in Blogger

Click on Drop Down Menu and select Layout

Add Gadget

Click on More Gadget

Select Contact Form

Now Give a Name to your Contact Form as we recommend you should give Contact Form

Finally your Contact Form Saved.

Part 2. Add Contact Form in Static Page

Click on Drop Down Menu and select Pages

Click on New Page

Select Blank Page

Now Click on HTML an Paste below code in it.

<div class='form'>

<form name='contact-form'>

<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}' />
<p></p>

<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID" size='30' type='text' onblur='if (this.value == "") {this.value = "Email ID";}' onfocus='if (this.value == "Email ID") {this.value = "";}'/>
<p></p>

<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' value='Leave Your Message..' onblur='if (this.value == "") {this.value = "Leave Your Message..";}' onfocus='if (this.value == "Leave Your Message..") {this.value = "";}'></textarea>
<p></p>

<input class='WG-btnLogin' type='reset' value='Clear'/>

<input class='WG-btnLogin' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<p></p>

<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>

</div>

Finally Publish that Page

Part 3. Customize Contact Form in New Look

Click on Drop Down Menu and select Template

Backup your Template before making any changes to your blog

Press Ctrl + F and search the code shown below.

]]></b:skin>

Paste Below code just above it.

#ContactForm1
{
display: none ! important;
}

Now Search for </head>
Paste below code just before </head>

<b:if cond='data:blog.pageType == "static_page"'>
<style>
#ContactForm1{ display:none!important;}
</style>
</b:if>

<style>
/*---- Compatible contact Form by WG -----*/
.contact-form-name, .contact-form-email, .contact-form-email-message {
max-width: 220px;
width: 100%;
font-weight:bold;
}

.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBPwDFbBapogjoGEtgl8vrR5DEe1WDuf4QE6x2LYB994swdHMhGGuAKi1YgyEtTbqzFOp_wWIhDYVcll2u3BbdHdVArw3wZyQx3Ycn9ZiKYylS21voo3r0MkmjaNcHWbPd4ofEaN4VMl8/s320/name.png) no-repeat 7px 8px;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight:bold;
height: 24px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;
}

.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpIMLvY17nSo-l9VTpI3CldUc6ENiBDCfC8z18xhi2v1b_Uw2_3iKikJGGUxYanEjipy3w3k5TA-TNJ5QWGdpEm0xeRsfvsl3oAwChwBqRWgJGfpqhHNQ2Dhd3Vs_BxTcu74MK3TWNOR0/s320/email.png) no-repeat 7px 10px;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight:bold;
height: 24px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;
}

.contact-form-email:hover, .contact-form-name:hover{
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);

padding: 5px 15px 5px 28px;
}
.contact-form-email-message:hover {
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 10px;
}
.contact-form-email-message {
background: #FFF;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: arial;
font-size: 12px;
margin: 0;
margin-top: 5px;
padding: 10px;
vertical-align: top;
max-width: 350px!important;
height: 150px;
border-radius:4px;
}

.contact-form-button {
cursor:pointer;
height: 32px;
line-height: 28px;
font-weight:bold;
border:none;
}

.contact-form-button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.contact-form-button:hover {
text-decoration: none;
}
.contact-form-button:active {
position: relative;
top: 1px;
}

.WG-btnLogin
{
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:15px;
    background:#a1d8f0;
    background:-moz-linear-gradient(top, #badff3, #7acbed);
    background:-webkit-gradient(linear, center top, center bottom, from(#badff3), to(#7acbed));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#badff3', EndColorStr='#7acbed')";
    border:1px solid #7db0cc !important;
    cursor: pointer;
    padding:11px 16px;
    font:bold 11px/14px Verdana, Tahomma, Geneva;
    text-shadow:rgba(0,0,0,0.2) 0 1px 0px;
    color:#fff;
    -moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    -webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    margin-center:12px;
    float:center;
    padding:7px 21px;
}

.WG-btnLogin:hover,
.btnLogin:focus,
.btnLogin:active{
    background:#a1d8f0;
    background:-moz-linear-gradient(top, #7acbed, #badff3);
    background:-webkit-gradient(linear, center top, center bottom, from(#7acbed), to(#badff3));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7acbed', EndColorStr='#badff3')";
}
.WG-btnLogin:active
{
    text-shadow:rgba(0,0,0,0.3) 0 -1px 0px;
}
</style>

      

    <style>
@media screen and (-webkit-min-device-pixel-ratio:0) {

.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBPwDFbBapogjoGEtgl8vrR5DEe1WDuf4QE6x2LYB994swdHMhGGuAKi1YgyEtTbqzFOp_wWIhDYVcll2u3BbdHdVArw3wZyQx3Ycn9ZiKYylS21voo3r0MkmjaNcHWbPd4ofEaN4VMl8/s320/name.png) no-repeat 7px 6px;
padding: 15px 15px 15px 28px;

}
.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpIMLvY17nSo-l9VTpI3CldUc6ENiBDCfC8z18xhi2v1b_Uw2_3iKikJGGUxYanEjipy3w3k5TA-TNJ5QWGdpEm0xeRsfvsl3oAwChwBqRWgJGfpqhHNQ2Dhd3Vs_BxTcu74MK3TWNOR0/s320/email.png) no-repeat 7px 8px;
padding: 15px 15px 15px 28px;
}

.contact-form-email:hover, .contact-form-name:hover{
padding: 15px 15px 15px 28px;
}

.contact-form-button {
height: 28px;
}
}
</style>

Finally Save your Template and Say Bingo be'coz you are done with it.

Enjoy with Professional look of your own personal contact form :)

Editor's Choice

Popular Posts

Adsense, Blogger Widget, Google, Online Money

Add Adsense Between Posts on Home Page

Blogger Widget, Web Designing

Give Access to Visitors to Change Your Blog's Background Color

Add Color Changing Widget

If Any Problem Comes, Ask in Comments

Blogger Widget, CSS

Add a Biggy Simple and Professional Subscription Widget

Add Biggy Simple and Subscription Widget

If Any Problem Comes, Ask in Comments

Blogger Widget

Add a Posts Comments and Pages Statistic Widget for Bogger

Add Stats Widget in Blogger

Make Changes....!

If Any Problem Comes, Ask in Comments

Blogger Widget, CSS, Generator

Add a Metro Style Social Bookmarking Widget

Add Metro Style Social Bookmarking by Widget Generator

Blogger Widget, Hacks

Add a Professional eRose Author Bio Widget

Add eRose Author Bio Widget in Blogger

Make Changes....!

If Any Problem Comes, Ask in Comments

Blogger Widget, Hacks, Tutorials

Customize Contact Form of Blogger

It Include only 3 Simple Parts.

Part 1. Add Contact Form in Blogger

Part 2. Add Contact Form in Static Page

Part 3. Customize Contact Form in New Look

Get Updates on Facebook

About us

Editor's Choice

Followers

WG Tools

Our Success