Cara Mudah Membuat Contact Form Keren Pada Blog

Contact Form atau Formulir Kontak berguna agar si pengunjung dengan mudah mengirim pesan pada si empunya blog, mungkin anda pernah atau sering melihat contact form ini di blog lain pada saat mengunjungi blog tersebut. Jika anda tertarik untuk membuatnya caranya gampang, bahkan contact form yang akan Kang AP bagikan ini lebih keren karena contact form ini mempunyai warna background yang bisa anda atur sendiri. Baiklah tanpa banyak berbicara lagi, berikut cara mudah membuat contact form keren pada blog. Mangga disimak !!

1. Pertama, silahkan login terlebih dahulu ke Blogger

2. Pilih Template » Edit HTML

3. Kemudian cari kode ]]></b:skin>

4. Pasang kode berikut tepat diatas kode ]]></b:skin>

#contacts-forms{width:100%;margin-bottom:10px}#widget-contact{border:2px solid #E74C3C;position:fixed;top:15%;left:50%;width:400px;height:auto;background-color:#fff;z-index:1000;display:none;margin:0 0 0 -200px}#widget-contact h3.juduls{background:#E74C3C;color:#fff;font:normal 18px

Tahoma,Sans-Serif;Tahoma,Sans-Serif;position:relative;margin:0;padding:15px;text-transform:uppercase}#widget-contact h3.juduls a{position:absolute;top:10px;right:15px;color:#fff;font-size:22px;text-decoration:none;cursor:pointer}#ContactForm1 h2{display:none}#area-overlay{position:fixed!important;z-index:999;top:0;right:0;bottom:0;left:0;background-color:#000;display:none}#ContactForm1_contact-form-email-message{width:355px;background:#222;outline:none;border:1px solid #E74C3C;overflow:hidden;height:150px;color:#fff;margin:0 10px 10px;padding:7px}#ContactForm1_contact-form-submit{font-weight:700;background:#E74C3C;position:relative;cursor:pointer;float:right;width:100px;outline:none;border:none;margin:0 10px 10px;padding:7px}#ContactForm1_contact-form-submit:hover{background:#d00}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:250px;margin-top:10px}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{width:350px;background:#222;color:#fff;outline:none;border:1px solid #E74C3C;margin:0 10px 10px;padding:10px}#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{border:1px solid #1e90ff}.contact-form-widget p{margin:0}.contact-form-widget{padding:5px}.buka-contact{width:100%;padding:10px;background:#E74C3C;color:#fff;font-size:16px;cursor:pointer}.buka-contact:hover{background:#d00}

5. Sekarang anda pasang kode berikut diatas kode </body>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/> <script type='text/javascript'>$(function(){$('.buka-contact').click(function(){$('#widget-contact').show();$('#area-overlay').fadeTo("normal",0.8);return false});$('#widget-contact .close').click(function(){$('#area-overlay, #widget-contact').hide();return false})});</script>

6. Lalu pasang kode berikut tepat dibawah kode <div id='sidebar-wrapper'>

<div id='contacts-forms'><div id='widget-contact'><h3 class='juduls'>Contact Form<a href='#' class='close' title='Close'>&#215;</a></h3><b:section class='kontaks' id='kontaks' maxwidgets='1' preferred='yes'/></div><div id='area-overlay'></div><button class='buka-contact'>Kirim Pesan</button></div>

Note.
» Silahkan anda berkreasi untuk lebih mempercantik widget dengan merubah nilai css pada kode yang pertama

Baca juga :
» Cara Membuat Kolom Permalink Keren
» Cara Agar Postingan Blog Cepat Terindek
» Cara Membuat Auto Read More Pada Blog

7. Simpan Template

8. Langkah terakhir, silahkan anda buka Tata Letak, maka disitu sudah muncul satu elemen widget baru » Tambah Gadget » Formulir Kontak seperti gambar dibawah ini

9. Simpan dan lihat hasilnya

Demikian cara mudah membuat contact form keren pada blog, semoga bermanfaat. Happy nice day !!

Please Share » » Facebook Google+ Twitter