Cara Membuat Lightbox Widget Contact From Blogger

Cara Membuat Lightbox Widget Contact From Blogger - Sekarang saya akan berbagi tutorial bagaimana cara membuat Lightbox Widget Contact From seperti di blog ini, cekidot....

Contact From

Nah keren kan, sebenarnya ini punya Mas Andes tapi karna banyak yang minta dan nanya ke saya ya mending saya bagikan lagi :D hehehe, widget contact form ini dengan efek lightbox agar tidak memerlukan halaman statis untuk memasang widget contact form dimana nantinya widget contact form akan muncul seperti kotak dialog karena ini juga cara yang sama seperti saat membuat modal dialog lainnya. Langsung aja disimak cara penerapannya....

Pertama-tama masuk ke Edit HTML template blogger anda lalu cari kode ]]></b:skin> lalu pasang kode di bawah ini tepat di atasnya

#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;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}

Langkah selanjutnya cari kode </body> lalu pasang kode di bawah ini tepat di atasnya

<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>

Selanjutnya cari kode <div id='sidebar-wrapper'> jika tidak ada cari kode <aside id='sidebar-wrapper'> atau yang hampir mirip, lalu letakkan kode di bawah ini tepat dibawahnya

<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>

Lalu klik Simpan

Sekarang pergi ke Tata Letak, maka disitu sudah muncul satu elemen widget baru, lalu klik tambah gadget di elemen widget baru tersebut, klik Tambahkan Widget > Gadget Lainnya > Formulir Kontak seperti gambar dibawah ini

Tambah Gadget

Nah itu dia Cara Membuat Lightbox Widget Contact From Blogger, Jika ingin merubah tampilannya silahkan sesuaikan sendiri
Semoga Bermanfaat.

Source : http://mas-andes.blogspot.com/2014/01/membuat-lightbox-widget-contact-form.html