How to Add Blogger`s Official Contact Form to Your Blog

Blogger launches officially This is a wonderful very important gadget for any blogger,If your blog visitors need any help or suggestion regarding your posts or articles, they will try to contact with you.

Demo

How to Add Contact Form To Your Blog

Step 1

1. Login to your blogger dashboard--> Layout-->'Add A Gadget'

2. Now click on More Gadget--> Select Contact Form

3. Click  save.

Step 2
1. Login to your blogger dashboard--> Pages
2. Now click on New Page--> Select Blank Page

3. Now Click on HTML an Paste below code in it.

<div class='form'> 

<!-- Custom Contact Form By WG Starts -->

<form name='contact-form'>

<!-- Name Field -->

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

<p></p>

<!-- Email ID Field -->

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

<p></p>

<!-- Message Field -->

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

<p></p>

<!-- Clear Button --> 

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

<!-- Send Button -->  

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

<p></p>

<!-- Validation --> 

<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>

<!-- Custom Contact Form By WG Ends --> 

</div>

4. Publish that Page.

Step 3
1. Now go to Blogger Dashboard > Template
2. Download a copy of your template
3. Click on Edit HTML
4. Find below code in your template (Press Ctrl + F)
   ]]></b:skin>
5. Add below code just above it,

#ContactForm1

{

display: none ! important;

}

6. Now Search for </head> (Press Ctrl + F)
7. 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(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/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(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/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>

      <!--[if IE 9]> 

    <style> 

    

.contact-form-name { 

background: #FFF url(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 0px; 

}

.contact-form-email { 

background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/s320/email.png) no-repeat 7px 6px; 

}

    </style> 

    <![endif]--> 

    

    <style> 

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

.contact-form-name { 

background: #FFF url(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 6px; 

padding: 15px 15px 15px 28px;

}

.contact-form-email { 

background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/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>

8. Save the Template ,And you're done!
Enjoy and happy blogging!

read more

Top 10 Best Blogger Templates Sites

I'll show you today through my experience modest top 10 sites for Blogger templates, as we all know that the terms of the success of sites are consistency and aesthetic of template, so I'm going to show you this order:

1. Premium Blogger Templates

Visit the site

2. B Templates

Visit the site

3. Blog Template 4u

Visit the site

4. Zoom Template

Visit the site

5. Mas Template

Visit the site

6. All Blog Tools 

Visit the site

7. Blogger Themes

Visit the site

8. Blog Crowds

Visit the site

9. Deluxe Templates

Visit the site

10. Best Theme

Visit the site

In the end I hope you enjoy.

read more

How to Add "Change Text Size And Font Face Gadget" For Blogger

How to Add Text And Font Gadget To Your Blog

1. Login to your blogger dashboard--> Layout-->'Add A Gadget'--> Choose HTML/JavaScript

2. Copy and paste the code below into the HTML/JavaScript gadget :

<script>

function go1(){

if (document.selecter2.select2.options

[document.selecter2.select2.selectedIndex].value != "none") {

document.getElementById('main').style.fontSize

=document.selecter2.select2.options

[document.selecter2.select2.selectedIndex].value

}

}

function go2(){

if (document.selecter2.select3.options

[document.selecter2.select3.selectedIndex].value != "none") {

document.getElementById('main').style.fontFamily

=document.selecter2.select3.options

[document.selecter2.select3.selectedIndex].value

}

}

</script>

<form id="forma" name="selecter2" method="POST">

<select onchange="go2()" style="font-family:verdana;font-size:8pt" name="select3" size="1">

<option value="Times New Roman"/>Times New Roman

<option value="Arial"/>Arial

<option selected value="Book Antiqua"/>Book Antiqua

<option value="Bookman Old Style"/>Bookman Old Style

<option value="Century Gothic"/>Century Gothic

<option value="Comic Sans Ms"/>Comic Sans Ms

<option value="Tahoma"/>Tahoma

<option selected value="Trebuchet Ms"//>Trebuchet Ms

<option value="Verdana"/>Verdana

</select>

<select onchange="go1()" style="font-family:verdana;font-size:8pt" name="select2" size="1">

<option value="8px"/>8

<option value="9px"/>9

<option value="10px"/>10

<option value="11px"/>11

<option selected value="12px"/>12

<option value="14px"/>14

<option value="16px"/>16

<option value="18px"/>18

</select></form>

3. Save HTML/JavaScript you are done.

read more

Best Free XML Sitemap Generators

Hi all, Here I am sharing some XML Sitemap Generators that will help you to generate Auto Sitemap for Your site/blog.

1. AutoMapIt Sitemap Generator Click here
2. Google Sitemap Generator for WordPress  Click Here 
3. XML Sitemap Generator  Click Here
4. A1 Sitemap Generator Click here

5. Online XML Sitemap Generator Click here

6. The Free XML Sitemap Generator Click here

7. Free Sitemap Generator Click here

 That is all , thank you :)

read more

How to Add Cool Chat Box to Blogger

Chatwee is a new chat service, unlike other Chatwee is added as a toolbar and chat deployed on the right side (you can switch to the left), showing the flag next to the user depending on the country where connect. Its design is attractive, however the functions are very limited because you can not choose a nickname unless you register, and so far I still do not know how to change the avatar once you're registered. But yes, it has the advantage of allowing users to share files such as PDF, music and photos.
Once you register you'll have the code you can use on your blog, you can also customize the colors of it.

It is recommended to have a script that prevents the redirection of countries, since the chat is only displayed in the URL you have registered, so if someone from another country comes in and adds another extension is not shown.

How to Add Cool Chat Box to Blogger?

Step 1

1- Go to the following link: chatwee
2- And do like the image

3- After creating your chatwee account, login to your account with your username and password, then you will see a code, just click on “Copy script to clipboard”.

Step 2

1- Login to your blogger dashboard --> Layout --> 'Add A Gadget' --> Html/Javascript

2- then paste the code into the box and then Save Arrangement

3- Now go to your blog to see your chat box.

read more

How To Add a Clock To Your Blogger Blog

How To Add a Clock To Your Blogger Blog

1. Login to your blogger dashboard--> Layout-->'Add A Gadget'

2. Choose Html/Javascript Gadget and add the one of code given below : 

<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-23.swf">

<embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-23.swf" width="150" height="150" 
wmode="transparent"> </embed></object>

<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-33.swf">

<embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-33.swf" width="150" height="150" 
wmode="transparent"> </embed></object>

<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-58.swf">

<embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-58.swf" width="150" height="150" wmode="transparent"></embed></object>

<embed height="200" src="http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-190.swf" type="application/x-shockwave-flash" width="200" wmode="transparent"></embed>

<embed height="200" src="http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-183.swf" type="application/x-shockwave-flash" width="200" wmode="transparent"></embed>

<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf">

<embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf" width="150" height="150" wmode="transparent"> </embed></object>

<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf">

<embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf" width="150" height="150" wmode="transparent"> </embed></object>

<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-8.swf">

<embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-8.swf" width="150" height="150" wmode="transparent"> </embed></object>

<embed src=http://safir85.ucoz.com/bdlab-blogspot/24work/WorldCupClock.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

3. Save HTML/Javascript you are done.

For more visit:      freeflashclocks.com 

read more

How To Add Zoom Effect in Blogger Images

How to add zoom effect in your blog?

1. go to Blogger Dashboard > Template
2. Download a copy of your template
3. Now click on Edit HTML
4. Hit Proceed button
5. Check Expand Widget Templates checkbox

6. Use ctrl F to find ]]></b:skin> and paste the following code above/before it.

.zoomeffect img{

-webkit-transform:scale(0.8);

-moz-transform:scale(0.8);

-o-transform:scale(0.8);

-webkit-transition-duration: 0.5s;

-moz-transition-duration: 0.5s;

-o-transition-duration: 0.5s;

opacity: 0.7;

margin: 0 10px 5px 0;

}

.zoomeffect img:hover{

-webkit-transform:scale(1.1);

-moz-transform:scale(1.1);

-o-transform:scale(1.1);

opacity: 1;

}

 7. Click on Save the template

How to activate it on images?

Whenever you have uploaded any image in your post editor, simply switch to HTML mode and change the class from what ever it is, to zoomeffect.

Example: Your image class in post editor will be <div class="seperator", now change it to <div class="zoomeffect"

If you are adding it to any other part on your blog, you can use the following code.

 <a class="zoomeffect" href="YOUR-IMAGE-URL/" target="_blank">

<img src="http://YOUR-IMAGE-URL" /></a>

Replace YOUR-IMAGE-URL with the link of the image you want to apply the effect to.

That's all!

read more

How To Add Search Box To Blogger (Header)

How To Add Search Box To Blogger

1. Now go to Blogger Dashboard > Template
2. Download a copy of your template
3. Click on Edit HTML
4. Hit Proceed button
5. Check Expand Widget Templates checkbox
6. Find below code in your template

<div class='descriptionwrapper'>

<p class='description'><span><data:description/></span></p>

Now Add your search box code immediately after these lines.

7. Save the template.That's it :)

read more

How To Add JS-Kit Rating to Blogger

How To Add Js-Kit Ratings To Blogger?

1. Now go to Blogger Dashboard > Template
2. Download a copy of your template
3. Click on Edit HTML
4. Hit Proceed button
5. Check Expand Widget Templates check box
6. Find this code in your template <data:post.body/>

7. Copy one of the code below and paste it immediately after the line <data:post.body/>.

Note : This will add rating widget under your blog post. If you want to add the rating widget under post title, add below code just after <div class='post-header-line-1'/> .

Code 1 

<div style="float:left; margin-right:3px;"></div>

<div class="js-kit-rating" expr:path="data:post.url" expr:permalink="data:post.url" expr:title="data:post.title"></div>

result :

Code 2 

<div style="float:left; margin-right:3px;"></div>
<div class="js-kit-rating" expr:path="data:post.url" expr:permalink="data:post.url" expr:title="data:post.title" view="score"></div>

result:

8. Now again scroll down to where you see the </body> tag.
9. Add below code just before the </body> tag.
<script src="http://js-kit.com/ratings.js"></script>
10. Click on "Save Templates" and now you are done.

read more

How To Create "Scroll to Top" Button To Blogger

How To Create "Scroll to Top" Button To Blogger?

1. Go to Blogger Dashboard > Template
2. Download a copy of your template
3. Click on Edit HTML
4. Hit Proceed button
5. Find below code in your template
]]></b:skin>

6. Now add below CSS code before ]]></b:skin> tag .

/* to top */
#toTop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }

7. Now add below code before </body> tag:

<a href="#" id="toTop">^ Scroll to Top</a>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
/*-----------------------
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
* Bring to you by Zen from http://zenplate.blogspot.com
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
* Do not delete these infomation
* Version: 1.0, 12/03/2009
-----------------------*/

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});

$(function() {
$("#toTop").scrollToTop();
});
</script>

 8. Save your template and you are done!

read more

How To Add Popular Post Widget For Blogger

How To Add Popular Post Widget To Blogger

1. Login to your blogger dashboard--> Layout-->'Add A Gadget'
2. Choose Html/Javascript Gadget and paste the following code into the area provided :

<script type="text/javascript">

function pipeCallback(obj) {

document.write('<ol style="text-transform: capitalize;">');

var i;

for (i = 0; i < obj.count ; i++)

{

var href = "'" + obj.value.items[i].link + "'";

var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";

document.write(item);

}

document.write('</ol>');

}

</script>

<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=1a1c6e4e6d4f148e3650fda46910e15f&url=http%3A%2F%2FYOURBLOG.blogspot.com&num=10" type="text/javascript"></script>

Note : Remember to replace YOURBLOG with your blog name.Also you can change 10 to show different number of popular posts.

3. Save HTML/Javascript you are done.

read more