Kali ini akan mengembangkan 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 melaksanakan kontak antara pengunjung dengan pemilik blog. Tidak jarang dari mereka ingin menciptakan widget kontak form yang menarik supaya tidak terlalu kuno.
Widget kontak form yang aku bagikan kali ini yaitu kontak form show hide yang akan muncul bila di klik terlebih dahulu, style kontak form ini simple dan ringan dengan perhiasan dampak yang keren.
Widget kontak form yang aku bagikan kali ini yaitu kontak form show hide yang akan muncul bila di klik terlebih dahulu, style kontak form ini simple dan ringan dengan perhiasan dampak 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" kemudian Simpan.
2. Blogger > Template > Edit HTML > Tambahkan CSS di bawah ini sempurna di atas isyarat
]]></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 isyarat HTML di bawah ini sehabis
<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 sanggup aku bagikan kali ini, Semoga Bermanfaat bagi anda.
Sumber https://www.idblanter.com
Referensi : https://jalantikusgo.blogspot.com/search?q=cara.memasang.slide.box.rekomendasi.di.blog
