How to install a new and stylish Hide/show contact form widget in blogspot blog - Hey Today I'm going to share with you an awesome widget for your blog. With the help of this widget you & your visitors can be able to make contacts in just one single click. It won't take much of your blog space, this widget will appear on bottom right hand corner of your blog. The best part is that, if you want to close this widget then you can close it by clicking on the X icon.
Before you add this widget in your blog, make sure to take a look of this widget by clicking on the below demo button.
For those who want to try this widget, simply follow the below steps and install this widget on your blog without any problem.
How to New Hide Show Contact Form Widget?
At the first, visit to your blogger dashboard - Visit
Go to the layout section, click on Add a widget, click on Other Gadgets option, select the Contact form widget and save it.
After that, go to the Template section and then click on the Edit HTML button.
In template editor add the below CSS code just before ]]></b:skin> or </style>.
/* CSS Contact Form */
#chslidingbox{background:#fff;width:100%;max-width:355px;width:100%;position:fixed;overflow:hidden;border:none;right:0;z-index:99;text-align:left;transition:all .4s ease-out}
.chslidingbox-title{background:#5996C1;color:#fff;display:block;height:45px;line-height:45px;width:100%;font-size:14px;text-transform:capitalize;font-weight:700;letter-spacing:.5px}
.chslidingbox-title span a{font-family:initial;float:right;height:40px;margin:0 0 0 15px;text-align:center;color:#fff;font-size:20px}
a#chslidingbox-close,a#chslidingbox-close{margin-right:15px}
.chslidingbox-title >span >h2{font-size:20px!important;font-weight:normal!important}
.chslidingbox-container{border:1px solid #ddd;float:left;width:100%;height:auto;padding:10px}
.chslidingbox-container >div{border:none;margin:3px 0;padding:10px 0}
.chslidingbox-container >div >span{font-size:14px}
#ContactForm1{display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width:300px;height:auto;margin:5px auto;padding:5px;background:#fff;color:#666;border:1px solid #ddd;transition:all 0.5s ease-in-out;box-shadow:none;}
#ContactForm1_contact-form-email-message{width:300px;height:120px;margin:5px 0;padding:5px;background:#fff;color:#666;font-family:'Droid Sans',sans-serif;border:1px solid #ddd;transition:all 0.5s ease-in-out;box-shadow:none;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none; border-color:#444;color:#444;background:#fff;}
#ContactForm1_contact-form-submit {background:#5996C1;color:#fff;border:1px solid #5996C1;width:100px;height:40px;line-height:30px;cursor:pointer;font-weight:700;font-size:13px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;transition:all 0.4s ease-out;}
#ContactForm1_contact-form-submit:hover{background:#fff;color:#5996C1}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:300px;margin-top:35px;}
.show{bottom:-375px}
.hide{bottom:0}
Copy the below HTML code and paste it just after <body or <body>
<div class='show' id='chslidingbox'>
<div class='chslidingbox-title chslidingbox-www'>
<span style='float:left;margin:0 15px;'>Contact Us</span>
<span><a href='javascript:void(0);' id='chslidingbox-close' title='close'>×</a></span>
<span><a href='javascript:void(0);' id='chslidingbox-maximize' title='maximize'>+</a></span>
<span><a href='javascript:void(0);' id='chslidingbox-minimize' title='minimize'>−</a></span>
</div><div class='chslidingbox-container'>
<form name='contact-form'>
Nama<br/>
<input id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<br/>Email Address*
<br/><input id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<br/>Pesan*<br/>
<textarea cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<br/><input id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<br/><div style='max-width:222px;text-align:center;width:100%;'>
<div id='ContactForm1_contact-form-error-message'>
</div><div id='ContactForm1_contact-form-success-message'>
</div></div></form></div></div>
Now add the below JavaScript just before </body>
<script type='text/javascript'>
//<![CDATA[
// Contact Us
$(document).ready(function(){var i=$("#chslidingbox"),s=$("#chslidingbox-close"),o=$("#chslidingbox-maximize"),l=$("#chslidingbox-minimize");l.hide(),s.click(function(){i.css({right:"-350px"}),i.fadeOut("slow")}),o.click(function(){i.toggleClass("hide"),$(this).hide(),l.show()}),l.click(function(){i.toggleClass("hide"),$(this).hide(),o.show()})});
//]]>
</script>
After that, click on the orange save template button.
That's it! I hope you like this widget! Stay tuned for more cool widgets! Thanks for reading @Prince.
0 Comment to "New Hide Show Contact Form Widget For Blogger"
Post a Comment