Hi in this post I am telling you that How To Add a Floating Contact Us Widget on Blogger
it is very easy way to add contact us widget in blogger in this way a visitor can contact you if he/she have some problem that could not be solved so in this way he/she contact with you and you give him/her solution of their problems but now I am telling you more best and unique way to help others and others can get help of you it is very helpful way not just for visitor its helpful for blogger
i many blogs you can visit there Contact Us Widget is added but you can't find
so I Am telling you the best way in this way you can also find and visitor easily contact with helper.
it is very easy way to add contact us widget in blogger in this way a visitor can contact you if he/she have some problem that could not be solved so in this way he/she contact with you and you give him/her solution of their problems but now I am telling you more best and unique way to help others and others can get help of you it is very helpful way not just for visitor its helpful for blogger
i many blogs you can visit there Contact Us Widget is added but you can't find
so I Am telling you the best way in this way you can also find and visitor easily contact with helper.
you can add like this Contac us Widget on your blogger uper page so Now i am tellin you the HTML code that you can add and get Floating Contact Us Widget on Blogger
Now Question is that...
How To Add a Floating Contact Us Widget ??
Go to Blogger>>>Click On Template>>>Edit HTM>>>Click any where in HTML code and Press the(CTRL+F) to get a search box for finding HTML code..
Now time to Search the Skin Code in search box when you will find the skin tag than copy and add the following CSS code above the skin tag..
#tipy tricky-contact .ContactForm {Now time to search other tag for the help of search box now search <body> tag
margin: 0px!important;
}
#tipy tricky-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;
}
.#tipy trickycontact .contact-form-button-submit:hover {
background-color: #222;
background-image: none;
border: 0;
}
#tipy tricky-contact #contact {
position: fixed;
bottom: 0;
right: 1%;
background-color: #EEE;
color: #555;
width: 300px;
z-index: 1.0E+15;
}
#tipy tricky-contact #contact .contact-form-widget {
padding: 30px;
display: none;
}
#tipy tricky-contact #contact {
position: fixed;
bottom: 0;
right: 1%;
background-color: #EEE;
color: #555;
width: 300px;
z-index: 1.0E+15;
}
#tipy tricky-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;
}
#tipy tricky-contact #contact h2.title .fa {
position: absolute;
left: 10px;
top: 12px;
}
#tipy trickycontact #contact .contact-form-widget {
width: 240px;
padding: 30px;
display: none;
}
#tipy tricky-contact #contact * {
transition: all 0 ease;
-webkit-transition: all 0 ease;
-moz-transition: all 0 ease;
-o-transition: all 0 ease;
}
#tipy tricky-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;
}
#tipy tricky-contact .contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-widget {
max-width: none;
margin-bottom: 15px;
}
and folowing HTML code below the tag that will give you Contact Us floating button with contact us forum
<div id="tipy tricky-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>
Now click on Save Template congratulation you are added the a Floating Contact Us Widget on Blogger now you can visit your site and you can find Floating Contact Us widget in the lower left side Contact Us button click here to find the Contact Us forum.
We hope that this tutorial very helpful for you if you wanna help the others bloggers so share our knowledge with other friends on Facebook google+ etc....