Slide Up and Down Style Blogger Official contact form for Blogger

Hi We know Google's one of the best release is their official contact form. But still this contact form hasn't option to directly place into blog static page. For this reason you have to take help with some CSS trick. Due to lack of space on your blog home page many blogger doesn't like to pace Google official contact form rather they are depending in third party contact form. So I have created a CSS code that you can place your contact form like floating style on your blog home page. It will display just like a Button Contact at the bottom right corner of your blog template. And when anybody click on contact button then the contact form will slide up. After writing and submitting the email it will slide down again if any visitors click on contact button. Its sounds like interesting. So let's proceed to install Blogger Official contact form with awesome trick.

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Template -> Edit HTML-> Unfold code  ►

Step 3 Now Find this code ]]></b:skin> by pressing Ctrl + F

Step 4 Copy the code from below and Paste it  Before/above ]]></b:skin>

/* Slide Up and Down Style Form by www.bloggerspice.com*/
.ContactForm, .ContactForm .title {
 display: none;
}
.BloggerSpiceFC{
 position: fixed;
 width: 250px;
 right: 0;
 bottom: 0;
 z-index: 999;
}
.BloggerSpiceFC-head a {
 padding: 5px 10px;
 background: #04BDFA;
 color: white;
 font-weight: bold;
 display: inline-block;
 *display: block;
 zoom: 1;
}
.BloggerSpiceFC-body {
 height: 285px;
 background: white;
 border: 5px solid #04BDFA;
 padding: 10px;
 display: none;
}
.BloggerSpiceFC-head {
 text-align: right;
}
.BloggerSpiceFC-body .ContactForm {
 margin: 0;
 display: block!important;
}

Step 5 Now Find this code </body> by pressing Ctrl + F

Step 6 Copy the code from below and Paste it  Before/above </body>

<script type='text/javascript'>
//<![CDATA[
/* Slide Up and Down Style Form by www.bloggerspice.com*/
$('body').append('<div class="BloggerSpiceFC"><div class="BloggerSpiceFC-head"><a href="#no-move">Contact</a></div><div class="BloggerSpiceFC-body"></div></div>');
$('.ContactForm').appendTo('.BloggerSpiceFC-body');
var slide_up_ct = false;
$('.BloggerSpiceFC-head a').click(function(){
 if (!slide_up_ct) {
 slide_up_ct = true;
 $('.BloggerSpiceFC-body').slideDown();
 } else {
 slide_up_ct = false;
 $('.BloggerSpiceFC-body').slideUp();
 }
});
//]]>
</script>

Step 7 Now simply hit the save button.

If you face any problem just feel free to contact me or leave a comment below.