Learn to Add a Floating Contact Us Widget in Blogger 2015
Previously, we have already showed you away on how to add a contact us widget in blogger.
However, you might have noticed that sometimes users find it difficult
to locate your contact us page link because it is located somewhere deep
down into your footer. What if you are running an eCommerce site on
blogger and your customer needs to send a quick query email to the
support to find some desire information. Since, your contact us page is
located deep down the footer he may not send any email and would move to
another better site taking away all the possibilities of making a new
sale. A simple solution to this problem is to have a floating contact us
widget. Today in this article, we will show you how to add a floating
contact us widget in blogger.
The live preview of this widget can be seen on this page.
Go to Blogger >> Template >> Edit HTML >> Click anywhere in the HTML template editor and press (CTRL+F), this will enable a search box. Now search for skin tag and just above it paste the following CSS style sheet coding.
Now with the help of search box, look for the starting <body> tag and just below it paste the following coding which consists of a contact us widget and JavaScript that will make the contact us widget floating across your site.
Once everything is done, press the “Save Template” button located at the very top of the HTML template editor. Congratulations, you have successfully added a floating contact us widget in blogger. Now go to your site and you will notice a floating contact us widget on the bottom right of your screen.
We hope this tutorial we have helped you to learn how to add floating contact us widget in blogger. If you like this widget then, do share it with your blogger friends on Facebook, Google+ or tweet about us on Twitter.
The live preview of this widget can be seen on this page.
The very first thing you need to do is to take a backup of your template, so in case you did not followed the bellow instructions properly you can use the backup to restore the template.
Go to Blogger >> Template >> Edit HTML >> Click anywhere in the HTML template editor and press (CTRL+F), this will enable a search box. Now search for skin tag and just above it paste the following CSS style sheet coding.
#mbl-contact .ContactForm {
margin: 0px!important;
}
#mbl-contact .contact-form-button-submit {
max-width: none;
width: 100%;
height: 35px;
border: 0;
background-image: none;
background-color: #FA411E;
cursor: pointer;
font: normal normal 13px Open Sans;
font-style: normal;
font-weight: 400;
}
.#mbl-contact .contact-form-button-submit:hover {
background-color: #222;
background-image: none;
border: 0;
}
#mbl-contact #contact {
position: fixed;
bottom: 0;
right: 1%;
background-color: #EEE;
color: #555;
width: 300px;
z-index: 1.0E+15;
}
#mbl-contact #contact .contact-form-widget {
padding: 30px;
display: none;
}
#mbl-contact #contact {
position: fixed;
bottom: 0;
right: 1%;
background-color: #EEE;
color: #555;
width: 300px;
z-index: 1.0E+15;
}
#mbl-contact #contact h2.title {
margin: 0px;
font-weight: 400;
background-color: #FA411E;
color: #FFF;
padding: 8px 15px;
font-size: 16px;
cursor: pointer;
letter-spacing: 3px;
text-align: center;
}
#mbl-contact #contact h2.title .fa {
position: absolute;
left: 10px;
top: 12px;
}
#mbl-contact #contact .contact-form-widget {
width: 240px;
padding: 30px;
display: none;
}
#mbl-contact #contact * {
transition: all 0 ease;
-webkit-transition: all 0 ease;
-moz-transition: all 0 ease;
-o-transition: all 0 ease;
}
#mbl-contact #contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message {
background-color: #DDD;
color: #111;
border: 0;
padding: 10px 5px;
font: normal normal 13px Open Sans;
}
#mbl-contact .contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-widget {
max-width: none;
margin-bottom: 15px;
}
Now with the help of search box, look for the starting <body> tag and just below it paste the following coding which consists of a contact us widget and JavaScript that will make the contact us widget floating across your site.
<div id="mbl-contact">
<b:section class='contact' id='contact' maxwidgets='1' showaddelement='yes'>
<b:widget id='ContactForm2' locked='true' title='Contact us' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><i class='fa fa-paper-plane'/> <data:title/></h2>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' expr:placeholder='data:contactFormNameMsg' name='name' size='30' type='text' value=''/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' expr:placeholder='data:contactFormEmailMsg' name='email' size='30' type='text' value=''/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' expr:placeholder='data:contactFormMessageMsg' name='email-message' rows='5'/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<script type='text/javascript'>
//<![CDATA[
$( "#contact h2.title" ).click(function() {$( "#contact .contact-form-widget" ).toggle("fast");});
//]]>
</script>
Once everything is done, press the “Save Template” button located at the very top of the HTML template editor. Congratulations, you have successfully added a floating contact us widget in blogger. Now go to your site and you will notice a floating contact us widget on the bottom right of your screen.
We hope this tutorial we have helped you to learn how to add floating contact us widget in blogger. If you like this widget then, do share it with your blogger friends on Facebook, Google+ or tweet about us on Twitter.
You might have seen sites which show a message that “Our site is in
Maintenance mode, please try accessing later”. Many popular site uses
maintenance mode when they are going through a monthly maintenance check
or improvising site experience because nobody likes to land on a page
that is either broken or no longer reachable. in other sense, new
websites often use it as coming soon page allowing users to sign up to
be notified when site is ready for launch. In this article, we will show
you how to put your blogger site on maintenance mode. 
