How To Add Floating Contact us Widget in Blogger.

Add  Floating Contact us Widget in Blogger.

Steps To Add Floating Contact Us Widget In Blogger.

• To add this widget to your blogger dashboard >> Layout >> Gadget >> HTML/JavaScript copy the below code and past in it.

<style type="text/css">

.form-float {width:323px;height:auto;background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcwxZZdLJmXSAFRqe1UBFhFAu9_xegWreLxha-1XdRLx92eAulzLdDdeBzmPnskX7pG86_GlEgjvLQOOkBaEq5NNrgl9JWt2rHFrXHxV_vZs5U7243tm3xS1nd4AEvMiWZl2qvuHOs0Ow/s1600/contact-button.png') no-repeat right 10px;position:fixed;top:150px;left: -275px;z-index:9999999;transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;}

.form-float:hover {left:0;}

.nf-float-form {background:-moz-linear-gradient(top, #2b2 5%, #00248E 100%);background:-webkit-linear-gradient(top, #2b2 5%, #00248E 100%);background:-o-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%); background:-ms-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%); background:linear-gradient(to bottom, #2b2a2b 5%, #0a0a0a 100%);color:#fafafa;padding:10px; width:250px;border:2px solid #000; border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}

#ContactForm1 {display:none;}

.contact-form-area {background: #FF0000;width: 245px;padding: 10px 0px;border: 1px solid #111;box-shadow: 2px 2px 2px #111 inset; -webkit-box-shadow: 2px 2px 2px #111 inset;font-family:Verdana, Geneva, sans-serif;color:#fafafa;font-size: 12px;}

#nf {float:right;font-size:9px;margin-top:-10px;color:#777;}#cc a { color: #777;text-decoration:none;}

</style>

<div class='form-float'>

<form name="contact-form" class="nf-float-form">

<p></p>

Name:<br />

<input class="contact-form-area" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />

<p></p>

Email:

<span style="color:red;">*</span><br />

<input class="contact-form-area" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text" />

<p></p>

Message: <span style="color:red;">*</span><br />

<textarea class="contact-form-area" id="ContactForm1_contact-form-email-message" name="email-message" cols="25" rows="5"></textarea>

<p></p>

<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button" />

<p></p>

<div style="text-align: center; max-width: 222px; width: 100%">

<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>

<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>

</div>

<div id="nf">

By <a href="https://freetemplateandwidget4u.blogspot.com/search/label/Widget" target="_blank" rel="dofollow">Nafisflahi</a>

</div>

</form>

</div>

After That Click on Save Now,All Done!