BLog: How To Add Together A Floating Contact Us Widget Inward Blogger

Previously, nosotros receive got already showed you lot away on how to add together a contact us widget inwards blogger. However, you lot powerfulness receive got noticed that sometimes users detect it hard to locate your contact us page link because it is located somewhere deep downwards into your footer. What if you lot are running an eCommerce site on blogger in addition to your client needs to ship a quick enquiry electronic mail to the back upwards to detect around wishing information. Since, your contact us page is located deep downwards the footer he may non ship whatever electronic mail in addition to would motion to around other ameliorate site taking away all the possibilities of making a novel sale. Influenza A virus subtype H5N1 uncomplicated solution to this employment is to receive got a floating contact us widget. Today inwards this article, nosotros volition present you lot how to add together a floating contact us widget inwards blogger.

The alive preview of this widget tin hand the sack live on seen on this page.

The real kickoff affair you lot take away to create is to take a backup of your template, hence inwards illustration you lot did non followed the bellow instructions properly you lot tin hand the sack utilisation the backup to restore the template.

Go to Blogger >> Template >> Edit HTML >> Click anywhere inwards the HTML template editor in addition to press (CTRL+F), this volition enable a search box. Now search for peel tag in addition to simply higher upwards it glue the next CSS mode canvas 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 amongst the assistance of search box, await for the starting <body> tag in addition to simply below it glue the next coding which consists of a contact us widget in addition to JavaScript that volition brand 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” push located at the real overstep of the HTML template editor. Congratulations, you lot receive got successfully added a floating contact us widget inwards blogger. Now become to your site in addition to you lot volition notice a floating contact us widget on the bottom correct of your screen.

We promise this tutorial nosotros receive got helped you lot to larn how to add together floating contact us widget inwards blogger. If you lot similar this widget then, create part it amongst your blogger friends on Facebook, Google+ or tweet well-nigh us on Twitter.

BLog

Friday, March 2, 2007

How To Add Together A Floating Contact Us Widget Inward Blogger

No comments:

Post a Comment