MASIGNALPHA101
6536304137350128937

Cara Membuat Contact Form With Effect Show Hide Style Keren Di Blogger

Cara Membuat Contact Form With Effect Show Hide Style Keren Di Blogger
10/27/2018

Baca Juga

Cara Membuat Contact Form With Effect Show Hide Style Keren Di Blogger

Pada artikel kali ini agus-jenro.com akan membagikan sebuah tutorial yang mungkin bagi sebagian blogger belum mengerti terutama para blogger pemula yaitu sebuah tutorial tentang "Cara Membuat Contact Form With Effect Show Hide Style Keren Di Blogger". Dengan contact form ini pasti blog kalian akan sangat menarik dan yang pastinya responsif.

Widget Contact Form sudah menjadi kewajiban yang harus ada pada setiap situs atau blog, karena agar ada sebuah hubungan antara pengunjung atau pembaca situs dengan pemilik situs. Tidak sedikit dari para pemilik situs atau blog membuat widget contact form nya agar menjadi lebih keren dan memberikan kesan menarik.

Dengan adanya widget contact form yang saya bagikan kali ini pasti akan menjadikan situs kalian lebih menarik, dengan tampilannya yang elegan dan juga fitur show hide yang akan muncul jika di klik terlebih dahulu.

Bagi kalian para blogger atau pemilik situs Berminat untuk memasang widget contact form seperti ini silahkan simak tutorialnya :


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'>&#215;</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'>&#8722;</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.


Itulah tutorial "Cara Membuat Contact Form With Effect Show Hide Style Keren Di Blogger" yang dapat saya bagikan kali ini, jangan lupa share ke teman kalian yang sedang membutuhkan tutorialini. Semoga Bermanfaat.

Sumber : https://www.idblanter.com/2015/12/membuat-show-hide-contact-form-di-blog.html
Antonio Ferguso

Saya hanyalah seorang blogger pemula yang suka mengintai para senior blogger lewat postingan mereka, untuk mempelajari hal baru tentang dunia blogger yang masih belum saya mengerti. Jadi tidak ada salahnya mengintai untuk hal kebaikan dan kebenaran :D

Berkomentar adalah hak asasi bagi semua pengguna internet dan akan berdampak kembali kepada diri masing - masing, maka berkomentar dengan bahasa yang baik dan sopan adalah suatu hal positif dan sangat dianjurkan.