Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Lightbox Widget Contact Form Blogger

Membuat Lightbox Widget Contact Form Blogger Membuat Lightbox Widget Contact Form Blogger – dari beberapa tutorial yang pernah saya share di artikel sebelumnya ada beberapa style widget contact form dengan tampilan yang bervariasi. Pada tutorial ini saya akan kembali membahas mengenai widget contact form 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. Bagi yang ingin menggunakan, berikut tutorialnya untuk cara Membuat Lightbox Widget Contact Form Blogger.

Pertama, masuk ke Edit HTML template blogger lalu cari kode ]]></b:skin> kemudian pasang kode berikut ini 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}
Selanjutnya cari kode </body> kemudian 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>
Selanjutnya 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>
Langkah terakhir Simpan template.

Sekarang 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.
Membuat Lightbox Widget Contact Form Blogger Cukup seperti itu saja untuk Membuat Lightbox Widget Contact Form Blogger. Selanjutnya apabila ingin merubah tampilannya bisa sesuaikan sendiri dengan merubah pada bagian CSS.

Berlangganan artikel via email

55 Response to "Membuat Lightbox Widget Contact Form Blogger"

tampilan baru ni kang
makin luar biasa aja kang

Balas

keren ya diberi warna hitam hehe .. :)

Balas

Aplauss......wow....pertama-tama saya berikan jempol dulu gan :) templatenya OK banget.izin nyoba gan :) thanks buat tipsnya :)

Balas

Wah templatenya seragam baru rupanya yah Mas Andes...?
Contact form nya lebih bervariasi jadinya yah Mas Andes simak ya Mas? :)

Balas

wohoho datang kesini ko lighting begini ya .. wajah baru yg cerah nih mas

Balas

lama ga berkunjung ke blog mas andes,,ehhh..sekarang muncul dengan tampilan baru dan wajah baru pada templatenya..keren mas..

berarti kudu diganti neh lingbox sebelumnya, mau coba lingbox dari tutorial mas andes,kayaknya lebih keren..izin praktek mas

Balas

Wah lama ngak mampir, sekarang templatenya sudah berubah. Makin keren jajah nih blognya :)

Balas

pengen yang simpel mas biar agak cerah dikit :)

Balas

keren yang putih mbak.. mulus :D

Balas

Pertamanya saya ucapkan selamat atas kulit barunya,,,kali ini say bilang wooow keren abis templatenya, penerapan font awesome iconnya juga sempurna.

Balas

Template baru ya kang? Template sangat bagus tapi ketika loading acak-acakan. Setelah beres loading luar biasa kerennya :D

Template pribadi apa suatu saat akan di share mas? kebelet pengen mendapatkanya nih hehe

Balas

bookmark dulu kang, :) nanti di praktekkan

Balas

iya kang di simak :)

Balas

lama ngidam yang cerah2 kang rul :) hehe

Balas

ini masih dasarnya dulu mbak efeknya masih sederhana, ntar tutorial selanjutnya pake bervariasi efek :)

Balas

masih anget nih mas baru ganti kemaren malem :)

Balas

terimakasih juga mas virly supportnya :)

Balas

template pribadi mas ngga PD mau share. belom maksimal... loadingnya juga lelet :D

Balas

Keren nih kontak formnya sob :)

Balas

wah jadi menarik tampilannya ...

Balas

wahh...... udah lama banget gak mampir keisni. blognya makin kece badai/.

Balas

Kemaren saya masih belum tertarik pakai font awesome, tp setelah melihat manfaatnya saya juga udah mulai pake lumayan buat mengurangi request gambar hehehe

Balas

Mas andes, template ente yang blues for you light itu kok gak ada code < div id='sidebar-wrapper' > ya ?

Balas

template itu pake format HTML5 mas. kodenya menjadi seperti ini:
<aside id='sidebar-wrapper'>

Balas

wah baru sempat berkunjung lagi ke blog mas andes, ternyata udah berubah tampilan blognya :D. Kirain salah alamat tadi :v

Balas

saya juga pangling sekarang mas makin cantik :D

Balas

Ane kok gak berhasil ya mastah? :(
di template beli.tipehandphone.com
mohon pencerahannyaa..

Balas

pada tata letak muncul satu elemen widget baru, tinggal tambahkan widget contact saja seperti gambar terakhir

Balas

Tetap gak bisa mastah,,, gmna ya? ane heran juga sih,,, :((

Balas

itu salah tempat mas nambahin widgetnya, naruhnya pada elemen widget yang baru. di atas widget kategori ada tulisan tambahkan widget, atasnya lagi ada tulisan seperti itu apa tidak? kalo ada, tambahkan lewat widget itu. ato kalo kesulitan printscreen aja tata letaknya, saya biar liat screenshotnya

Balas

setelah memasukkan kode2 sesuai step yang mastah buat diatas, otomatis akan ada sndiri widget formulir kontak, gmana mau nambahin lagi kalau dia sudah ada sendiri? :(

ss: https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-ash3/t1/1901164_704618209559901_527820940_n.jpg

Balas

hehehe ajaib dong berarti.. ada2 saja nih mas ari :D
yaudah mas biar mudah itu hapus aja dulu widget formulir kontak yang di tata letak.
lalu masuk edit HTML, dari kode di atas pada baris berikut ini:<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>
replace aja dengan kode ini:<div id='contacts-forms'>
<div id='widget-contact'>
<h3 class='juduls'>Contact Form<a class='close' href='#' title='Close'>&#215;</a></h3>
<b:section class='kontaks' id='kontaks' maxwidgets='1' preferred='yes'>
<b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p/>
<data:contactFormNameMsg/>
<br/>
<input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
<p/>
<data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
<p/>
<data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
<p/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>
<div id='area-overlay'/>
<button class='buka-contact'>Kirim Pesan</button>
</div>

Balas

tetep gak bisa mas, terima kasih udah care banget.. ane gak jadi deh pasang kontak gini,,, pusing..
pasang di statik page aja deh...

Balas

tutorialnya bagus sekali mas :) terima kasih ,
saya ingin tanya di template saya ko , saya tidak menemukan kode ini <..div id='sidebar-wrapper'..> ?? mohon pencerahannya :)

Balas

di template mana mas? saya kira2 aja ya.. mungkin mennggunakan <asside id='sidebar-wrapper'> mas. yang penting cari aja sidebar-wrapper

Balas

gan saya tulis ya blog agan di blog saya..

Balas

membuat contact form di pojok footer seperti punya anda gmn ya caranya???
trima kasih

Balas

membuat contact form di pojok footer seperti punya anda gmn ya caranya???
trima kasih

Balas

sama seperti di atas, pada HTML taruh footer

Balas

Mas anden kenapa saya gak bisa ya pas di Edit HTML cari Code div id='sidebar-wrapper' gak ketemu terus...Mohon jawabannya

Balas

mungkin menggunakan <aside id='sidebar-wrapper'>, mungkin juga menggunakan ID sidebar-right, dll. setiap template belum tentu sama.

Balas

Mas saya pake BMA Lover ko orang yang coment gak keliatan tulisannya gimana ya cara nya supaya bisa keliatan....di tunggu jwabannya :)

Balas

Ijn bookmark ya, mas.

Btw, blognya keren.... :')

Balas
This comment has been removed by the author.

Mas Bro ane pengen masang tulisan send message nya di dropdown menu edit/kode htmlnya gimana ya?! tolong pencerahannya mas andes

Balas

Mas Andes, saya coba bikin, hasilnya sama seperti gambar di atas, tidak muncul formnya Mas. Mohon bantuannya, Mas. :)

Balas

Bener-bener dah, mantapppp masbroo... saya demen lihat blognya master blogger begini, salam kenal antoncabon http://antoncabon.blogspot.com makasih ditunggu kunjungan ke blog jelek milik saya :D

Balas

wah mantap pak :3 , berkunjung yee http://bang-ben.com

Balas

bagus menn blognya jadi pengin , bingung mulainya ... bisakah dibuatkah tutorialnya mas mengenai pembuatan blog yang mas ada ini ?... yang lengkap... ( aku mau

Balas

maksudnya buku dalam bentuk file stepnya mas ... maklum newbie ( bisakah mas /heee maaf ya mas siap beli pokoe heee )

Balas

wah.. bagus2 nih konten blog-nya. ijin belajar soal web design mastah..
jika ada ebook, bisa dong dibagi. lagi pengen belajar bikin template blogspot sampe custom-custom-nya. makasih. (y)

Balas

makasih atas ilmu nya gan

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Lightbox Widget Contact Form Blogger" ini bermanfaat, share ke jejaring sosial.
Konversi Kode