Adding a Floating Contact Us Widget in Blogger
Step 1. Go to Blogger Dashboard >> Template
Step 2. Click Edit HTML button
Step 3. Click anywhere in the HTML template editor and press (CTRL+F), this will enable a search box. Now search for the tag below
]]></b:skin>
Step 4. And just above it paste the following CSS style sheet coding.
#btat-contact .ContactForm {
margin: 0px!important;
}
#btat-contact .contact-form-button-submit {
max-width: none;
width: 100%;
height: 35px;
border: 0;
background-image: none;
background-color: #168eca;
cursor: pointer;
font: normal normal 13px Oswald;
font-style: normal;
font-weight: 400;
}
.#btat-contact .contact-form-button-submit:hover {
background-color: #158aee;
background-image: none;
border: 0;
}
#btat-contact #contact {
position: fixed;
bottom: 0;
right: 1%;
background-color: #EEE;
color: #555;
width: 300px;
z-index: 1.0E+15;
}
#btat-contact #contact .contact-form-widget {
padding: 30px;
display: none;
}
#btat-contact #contact {
position: fixed;
bottom: 0;
right: 1%;
background-color: #EEE;
color: #555;
width: 300px;
z-index: 1.0E+15;
}
#btat-contact #contact h2.title {
margin: 0px;
font-weight: 400;
background-color: #168eca;
color: #FFF;
padding: 8px 15px;
font-size: 16px;
cursor: pointer;
letter-spacing: 3px;
text-align: center;
}
#btat-contact #contact h2.title .fa {
position: absolute;
left: 10px;
top: 12px;
}
#btat-contact #contact .contact-form-widget {
width: 240px;
padding: 30px;
display: none;
}
#btat-contact #contact * {
transition: all 0 ease;
-webkit-transition: all 0 ease;
-moz-transition: all 0 ease;
-o-transition: all 0 ease;
}
#btat-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;
}
#l-contact .contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-widget {
max-width: none;
margin-bottom: 15px;
}
Step 5. Look for the </body> tag and just above it, paste the code below
<div id="btat-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(1000);});
//]]>
</script>
Short Customization:
Simply change the hexadecimal color 168eca to change the background color of your "send button"
Step 6. Save your template and your done.
Enjoy Blogging Buddies!
About the Author:
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
hola, un favor a que correo me llegan los mensajes?
ReplyDeleteIt was lovely.....thanks guys
ReplyDelete