Adding Floating Contact Form To Blogger

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

Just a quick news before I start the stuff. Google Code has suspended my code account & all repositories I hosted there, so all my code that I use in this website & in tutorials in no longer controlled by me. That's it!

If you're not satisfied with adding Blogger's contact form widget to a specific page of your blog, you can also use it as a floating widget.

BloggerItems has created a cool floating contact form widget for Blogger. First, add Blogger's official contact form widget to your blog.

• Go To Blogger > Template > Edit HTML

• Search and paste this code just about ]]></b:skin>:

.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;
}

Then paste the below code before </body> tag in your template:

<script type='text/javascript'>
//<![CDATA[
/*Floating Contact Form by BloggerItems.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>

That's IT!

Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.