CARA Mudah MEMBUAT LIGHTBOX WIDGET CONTACT FORM BLOGGER




CARA Mudah MEMBUAT LIGHTBOX WIDGET CONTACT FORM BLOGGER
CARA Mudah MEMBUAT LIGHTBOX WIDGET CONTACT
 FORM BLOGGER  

 Pada penjelasan kali ini saya akan membahas mengenai widget contact form dengan efek lightbox, pasti anda sudah mengetahui apa itu contact form, nah jika anda sudah mengetahui nya, maka langasung saja kita menuju ke tahapan selanjutnya cara untuk memebuatnya,

Berikut tutorialnya untuk cara Membuat Lightbox Widget Contact Form Blogger.
1. Pertama anda masuk ke Edit HTML template blogger kemudian cari kode ]]></b:skin> lalu anda copy kode di bawah ini dan paste kan di atas 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;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}
2. Selanjutnya cari lagi kode </body> kemudian anda salin kode di bawah ini dan pasang kode berikut 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> 
3. Selanjutnya anda cari kode <div id='sidebar-wrapper'> kemudian pasang kode berikut 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>
4. Langkah terakhir Simpan template.
Note untuk cara cepat cari kode yang bewarna merah anda bisa tekan Tombol CTRL+F.
Selanjutnya  buka Tata Letak, maka disitu sudah muncul satu elemen widget baru. Selanjutnya tinggal klik Tambahkan Widget > Gadget Lainnya > Formulir Kontak seperti pada gambar dibawah ini.


Demikian cara unutk Cara nudah membuat linghtbox widget contact form blogger Selanjutnya apabila ingin merubah tampilannya bisa sesuaikan sendiri dengan merubah pada bagian CSS. jika anda kurang jelas bisa ditanyakan. terimakasih

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect