Slide Up and Down Style Blogger Official contact form for Blogger
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.
Post a Comment