Today in this tutorial we are going to give an explanation for how to add a CSS Slide down Contact Us Widgets in Blogger. Lot's of the usage of blogger default contact us widget that is simply like an adequate ok type.if you want to extend a area of interest of your blogger internet site or blog you need to add this custom CSS contact form tool which will add in proper side of bottom in your internet site and whenever you will click on contact us button it will slide up and you can fill the shape and directly ship the e-mail to the writer or admin of website or blog. We have also seen some are installing contact form in blogger pages even I have also installed but that is a unique thing you can add there too. but this contacts us floating widget is very useful for each Blogspot website. We have personalized some features of contacting us widget to seem more beautiful. We have used CSS and jquery to make it work perfectly. To grasp the floating contact us widget comply with the steps referred to below.
How to add fixed contact us button in blogger footer
Installation steps:
Before customizing Contact us widget to slide up and slide down in blogger template, First add blogger default contact widget..just go to your layout->Add a gadget->More Gadget->Contact Form. Adding above step then follow to the below steps.
Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for the </b:skin> or </style> and copy the below CSS code and paste it just above </b:skin> or </style>
/* Slide Out Contact Form Widget By Www.Bloggersstand.com */.ContactForm,.ContactForm .title{display:none}.bsd-floating{position:fixed;width:280px;right:30px;bottom:0;z-index:99}.bsd-floating-head a{padding:8px 10px;background:#2997e0;color:#fff;font-weight:400;display:inline-block;transition:all .3s linear}.bsd-floating-head a:hover{background:#2588ca;color:#fff}.bsd-floating-body{height:285px;background:#fff;padding:10px;display:none;box-shadow:0 2px 5px 0 rgba(0,0,0,.26)}.bsd-floating-head{text-align:right}.bsd-floating-body .ContactForm{margin:0;display:block!important}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{background:#fff;border:0;padding:10px 0;color:#999;font-weight:normal;width:100%;max-width:initial;border-bottom:1px solid #ccc;transition:.2s ease all}#ContactForm1_contact-form-email-message{background:#fff;border:none;color:#8f8f8f;padding:10px 0;width:100%;max-width:initial;border-bottom:1px solid #ccc}#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-name:hover,#ContactForm1_contact-form-email:hover,#ContactForm1_contact-form-email-message:hover{background:#fff;box-shadow:none;border-bottom-color:#ff3c3c;transition:all .3s linear}#ContactForm1_contact-form-submit{position:relative;color:#fff;font-weight:400;font-size:12px;cursor:pointer;background:#57ad68;border:none;float:left;box-shadow:0 0 0 0 rgba(0,0,0,0.19);transition:all .3s linear}#ContactForm1_contact-form-submit:hover{background:#468a53;}#ContactForm1_contact-form-submit:active{box-shadow:0 4px 15px 0 rgba(0,0,0,0.19);}.contact-form-widget form{display:table;margin:0 auto;}.contact-form-widget {max-width:initial;}.bsd-floating-body{-moz-box-sizing:initial;-webkit-box-sizing:initial;box-sizing:initial}
Step 4. Now Search for the closing </body> tag and now copy the below script and paste it just above </body> it.
<script type='text/javascript'>//<![CDATA[// Contact Form Widget By www.Bloggersstand.com$("body").append('<div class="bsd-floating"><div class="bsd-floating-head"><a href="#no-move">Contact Form</a></div><div class="bsd-floating-body"></div></div>'),$(".ContactForm").appendTo(".bsd-floating-body");var bsd-slide_up=!1;$(".bsd-floating-head a").click(function(){bsd-slide_up?(bsd-slide_up=!1,$(".bsd-floating-body").slideUp()):(bsd-slide_up=!0,$(".bsd-floating-body").slideDown())});//]]></script>
Step 5. Now Save your Template...Done !!
I hope you enjoy this post and the photos. CSS Slide down Contact Us Widgets in Blogger.
