Membuat Show Hide Contact Form with Effect di Blog
02 December 2015
Kali ini Dunia Blanter akan berbagi tutorial Cara Membuat Show Hide Contact Form dengan Efek di Blog. Memasang widget kontak form pada blog sudah menjadi kewajiban setiap blogger, widget kontak form ini berfungsi untuk melakukan kontak antara pengunjung dengan pemilik blog. Tidak jarang dari mereka ingin membuat widget kontak form yang menarik agar tidak terlalu kuno.
Widget kontak form yang saya bagikan kali ini adalah kontak form show hide yang akan muncul jika di klik terlebih dahulu, style kontak form ini simple dan ringan dengan tambahan efek yang keren.
Widget kontak form yang saya bagikan kali ini adalah kontak form show hide yang akan muncul jika di klik terlebih dahulu, style kontak form ini simple dan ringan dengan tambahan efek yang keren.
Bagi Sobat yang ingin memasang widget Kontak form ini, silahkan simak tutorial Cara Membuat Show Hide Contact Form di bawah ini :
1. Login ke Blogger > Tata Letak > Tambahkan Gadget > Gadget Lainnya > Pilih "Formulir Kontak" lalu Simpan.
2. Blogger > Template > Edit HTML > Tambahkan CSS di bawah ini tepat di atas kode
]]></b:skin> atau </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}
3. Tambahkan kode HTML di bawah ini setelah
<body> atau <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>
4. Tambahkan Javascript di bawah ini sebelum
</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>
5. Simpan Template dan Lihat Hasilnya.
Demikian tutorial Cara Membuat Show Hide Contact Form di Blog yang dapat saya bagikan kali ini, Semoga Bermanfaat bagi anda.
Referensi : http://www.arlinadzgn.com/2015/12/cara.memasang.slide.box.rekomendasi.di.blog.html