random
1

Add Stylish Floating Contact Form For Blogger Blogspot

If you are not interested to create a separate static page to insert contact form for your Blogger, or also don't want to place it at right sidebar or in your blogger blog footer. So this tip may be your perfect choice for alternate, create a stylish floating Contact box of contact form. 

Add Stylish Floating Contact Form For Blogger Blogspot

I Assume  You Have Already Add Your Contact From Blogger Blog Widget In Your Blogger Blog, If Not Then First Off Add It.

Step No. 01:
First Off, Go To Blogger Dashboard.

Step No. 02:
Select "Template" Tab From Blogger Dashboard.
Add Stylish Floating Contact Form For Blogger Blogspot
Add Stylish Floating Contact Form For Blogger Blogspot
Step No. 03:
Then Head To " Customize' Button.

Step No. 04:
Now Select " Ad CSS" tab Fro Menu.

Step No. 05:
Just Copy The Below Code and Paste It In To It.
/*Stylish Floating Contact Form By www.pakblogz.blogspot.com*/
.ContactForm, .ContactForm .title {
 display: none;
}
.floating-ct {
 position: fixed;
 width: 250px;
 right: 0;
 bottom: 0;
 z-index: 999;
}
.floating-ct-head a {
 padding: 5px 10px;
 background: #09f;
 color: white;
 font-weight: bold;
 display: inline-block;
 *display: block;
 zoom: 1;
}
.floating-ct-body {
 height: 285px;
 background: white;
 border: 1px solid #09f;
 padding: 10px;
 display: none;
}
.floating-ct-head {
 text-align: right;
}
.floating-ct-body .ContactForm {
 margin: 0;
 display: block!important;
}
Step No. 06:
Press "Apply To Template" Button.

Step No. 07:
Now Go To Again Your Blogger Dashboard And Select "Template" Again.
Add Stylish Floating Contact Form For Blogger Blogspot
Add Stylish Floating Contact Form For Blogger Blogspot
Step No. 08:
Select "Edit HTML" Option.

Step No. 09:
Now Find  </body> Tag In Your Coding Area.

Step No. 10:
After Finding That Tag, Just Copy The Below Code And Paste It Before The </body> Tag.
<script type='text/javascript'>
//<![CDATA[
/*Stylish Floating Contact Form By www.pakblogz.blogspot.com*/
$('body').append('<div class="floating-ct"><div class="floating-ct-head"><a href="#no-move">Contact</a></div><div class="floating-ct-body"></div></div>');
$('.ContactForm').appendTo('.floating-ct-body');
var slide_up_ct = false;
$('.floating-ct-head a').click(function(){
 if (!slide_up_ct) {
 slide_up_ct = true;
 $('.floating-ct-body').slideDown();
 } else {
 slide_up_ct = false;
 $('.floating-ct-body').slideUp();
 }
});
//]]>
</script>
Step No. 11:
Save Your Template.

Go To Your Blogger Blog Live And See The Result.
That's It.
Add Stylish Floating Contact Form For Blogger Blogspot Reviewed by Ghulam Haider on 21:58:00 Rating: 5

No comments:

All Rights Reserved by Shouted Blog © 2014 - 2015
Designed by Ghulam Haider

Contact Form

Name

Email *

Message *

Powered by Blogger.