√ Cara Gampang Menciptakan Contact Form Keren Pada Blog

Contact Form atau Formulir Kontak mempunyai kegunaan supaya si pengunjung dengan praktis mengirim pesan pada si empunya blog, mungkin anda pernah atau sering melihat contact form ini di blog lain pada ketika mengunjungi blog tersebut. Jika anda tertarik untuk membuatnya caranya gampang, bahkan contact form yang akan Kang AP bagikan ini lebih keren alasannya ialah contact form ini mempunyai warna background yang dapat anda atur sendiri. Baiklah tanpa banyak berbicara lagi, berikut cara praktis menciptakan contact form keren pada blog. Mangga disimak !!

1. Pertama, silahkan login terlebih dahulu ke Blogger

2. Pilih Template » Edit HTML

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

4. Pasang arahan berikut sempurna diatas arahan ]]></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 arahan berikut diatas arahan </body>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/> <script type='text/j4vascript'>$(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 arahan berikut sempurna dibawah arahan <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 arahan 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 gres » Tambah Gadget » Formulir Kontak menyerupai gambar dibawah ini

9. Simpan dan lihat hasilnya

Demikian cara praktis menciptakan contact form keren pada blog, semoga bermanfaat. Happy nice day !!


Sumber http://ap-thea.blogspot.com