20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

How To Add Slide Up And Slide Down Contact Us Widget

learn trick to create install fixed blogger footer bottom right side contact us button inside template,slide up and slide down,slide out responsive contact us widget gadget.
How To Add Slide Up And Slide Down Contact Us Widget
Heya ! How all are you doing ? Today in this tutorial we are going to explain How to add a Fixed Contact From gadget In Blogger Template.Lot's of using blogger default contact us widget that is just like a ok ok type.if you want to increase a niche of your blogger website or blog you must add this custom CSS contact form tool which will add in right side of bottom in your website and whenever you will click on contact us button it will slide up and you can fill the form and directly send the email to the author or admin of website or blog.
We have also seen some are installing contact form in blogger pages even i have also installed :P but that is different thing you can add there too.but this contact us floating widget is very useful for every blogspot website.We have customized the some functions of contact us widget to look more beautiful.We have used CSS and jquery to make it work perfect.To grab the floating contact us widget follow the steps mentioned below.

Demo

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. After 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 !!

3 comments

  1. where is your demo ???
    1. Hello Globe it 24..Sorry for the inconvenience..First of our all widgets and tricks are tested..and second if you are facing trouble we will arrange the demo for you..Alright ? But before installing above slide out contact us widget tricks first you need to add default contact us gadget from blogger then it will work.let me know if you want to know anything else.
      Team : Bloggersstand.com
  2. @ Globe IT 24 We have arranged the demo for you,kindly check it out and let know if you need any other help.Thanks for visiting and kindly join us on social media sites too.
    Team : Bloggersstand.com