Monday, April 18, 2016

Cara menambahkan wigdet contact from slide

 caramenambahkan wigdet contact from slide
contoh seperti gambar di bawah





1 . masuk ke dasboard sobat 
2 . klik tata letak /tambahkan gadget
3 . klik HTML/Javascript
copy paste kode di bawah ini


<!--Codingcrazy.com floating contact form-->
<style>
.form-parent {width:323px;height:auto;background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC9I41OC57jdlkYaJrrZcJcmvFtHdogP7bmxmrUgzNgwaXKRJYJEt2NERriBJK4BZUUBxt9jt_doR2okC7l2VFXNpGrIzKLYJLACSNdmjyfTPirziAUtVpViNACEE7zlKgDNSj-tqsz-0_/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-parent:hover {left:0;}
.cc-float-form {background:-moz-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);background:-webkit-linear-gradient(top, #2b2a2b 5%, #0a0a0a 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: #222;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;}
#cc {float:right;font-size:9px;margin-top:-10px;color:#777;}#cc a {    color: #777;text-decoration:none;}
</style>
<div class='form-parent'>
<form name="contact-form" class="cc-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="cc">
By <a href="http://bls-cyber.blogspot.com/2016/04/cara-menambahkan-wigdet-contact-from.html" target="_blank">Get this</a>
</div>
</form>
</div><!--Parent-->
<!--All ends here-->


4 . click simpan dan lihat hasil nya,kalo gagal, comen aja jangan malu malu

Contoh Demo


DEMO



Jika hari ini menyesal karena perbuatan masa lalu, maka hari ini janganlah melakukan sesuatu yang menyebabkan penyesalan di hari esok, sebab penyesalan itu tidak berarti bila tidak diperbaiki, oleh karena itu perbaikilah penyesalan-penyesalan.


EmoticonEmoticon