Slide Up and Down Style Blogger Official contact form for Blogger

Slide Up and Down Style Blogger Official contact form for Blogger

0
data:blog.title
Default contact form

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. 
Slide Up and Down Style Blogger Official contact form for Blogger
4 Stars stars - "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...
Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *