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

Memasang Widget Contact Form Accordion Pada Blog

Widget Contact Form Blogger Memasang Widget Contact Form Accordion Pada Blog – masih pada tema tutorial yang sama seperti sebelumnya mengenai cara memasang dan memodifikasi atau merubah tampilan awal widget contact form official blogger yang masih sederhana agar bisa menjadi lebih menarik dan bisa kita atur sendiri dimana letak widget contact form tersebut supaya bisa di pasang pada letak yang kita kehendaki. Tentu sudah tidak asing lagi dengan kata floating di kalangan blogger. Istilah floating tentu sangat identik dengan kata melayang atau dalam istilah lain widget contact form ini nantinya akan kita pasang di bagian atas layout blog dan apabila nanti scroll mouse di putar kebawah maka widget contact form akan tetap pada posisinya, yakni di pojok atas layout blog sebelah kanan. Namun pilihan lain bisa juga widget contact form ini dipasang pada sidebar blog dan jangan khawatir mengenai layout, tidak terlalu memakan banyak tempat juga karena widget contact form ini mempunyai efek accordion dimana contact form akan muncul apabila button contact sudah di klik. Untuk penjelasan lebih lanjut, berikut adalah tutorial cara memasang Memasang Widget Contact Form Accordion Pada Blog.

1. Login ke akun blogger.
2. Kemudian klik Tata Letak > Tambah widget > Gadget Lainnya > Formulir Kontak, lalu klik Simpan.
Widget Contact Form Blogger 3. Selanjutnya adalah menyembunyikan widget contact form bawaan blogger tersebut, caranya klik Template > Edit HTML lalu cari kode ]]></b:skin> gunakan CTRL+F.
4. Copy kode berikut ini lalu paste tepat diatas kode ]]></b:skin> kemudian klik Simpan Template.
#ContactForm1 {display:none}
5. Lalu langkah berikutnya adalah membuat tampilan baru widget contact form, caranya pilih salah satu kode yang ada pada blockquote lalu Copy kode tersebut selanjutnya klik Tata Letak > Tambah Widget > HTML/Javascript kemudian paste kode tersebut.

- Untuk memasang agar melayang di sudut atas kanan blog (floating contact form), berikut kodenya:
<style>
#form-evolutions { position:fixed; top: 0; right:20px; float:right; } #contact-faceblog { height:310px; width:280px; background:#e9fbe9; border:1px solid #52e052; padding:10px; display:none; } #ContactForm1_contact-form-name{ width: 230px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background:#000 url(http://2.bp.blogspot.com/-GoNmkIDybR0/UZuZDpVOXaI/AAAAAAAAEO8/pNPaQU1aiwQ/s1600/user.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email{ width: 230px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(http://3.bp.blogspot.com/-zGxMJ_C5R60/UZuZGnKgcuI/AAAAAAAAEPE/KwPOHFuBffc/s1600/pen.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email-message{ width: 230px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(http://4.bp.blogspot.com/-RzL4e1-qZD4/UZuZMsnxqSI/AAAAAAAAEPM/y-NS0XTs-x8/s1600/msg.png)no-repeat 10px 10px; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-submit { width: 95px; height: 30px; float: right; color: #000; font-weight: bold; padding: 0; cursor:pointer; margin: 25px 0 3px 0 0; background-color:#52e052; text-shadow: 1px 0 0 #999; border:1px solid #333; } #ContactForm1_contact-form-submit:hover { background:#00ff00; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 230px; margin-top:30px; } #contactbutton { height:40px; width:302px; background-image:url('https://lh5.googleusercontent.com/-R2cc6lNmpo4/Ug6EYjW4FPI/AAAAAAAAGAk/Q9S5NM4LLmo/h47/contact_button.png'); display:block; cursor:pointer; margin:auto; }
</style>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){ $("#contactbutton").click(function(){ if ($("#contact-faceblog").is(":hidden")){ $("#contact-faceblog").slideDown("slow"); } else{ $("#contact-faceblog").slideUp("slow"); } }); }); function closeForm(){ setTimeout('$("#contact-faceblog").slideUp("slow")', 2000); }
</script>
<div id="form-evolutions">
<div id="contact-faceblog">
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<div id="contactbutton"></div>
</div>
- Untuk memasang widget contact form accordion pada sidebar blog, kodenya sebagai berikut:
<style>
#form-evolutions { position:relative; margin:auto; } #contact-faceblog { height:310px; width:280px; background:#e9fbe9; border:1px solid #52e052; padding:10px; display:none; margin:auto; } #ContactForm1_contact-form-name{ width: 230px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background:#000 url(http://2.bp.blogspot.com/-GoNmkIDybR0/UZuZDpVOXaI/AAAAAAAAEO8/pNPaQU1aiwQ/s1600/user.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email{ width: 230px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(http://3.bp.blogspot.com/-zGxMJ_C5R60/UZuZGnKgcuI/AAAAAAAAEPE/KwPOHFuBffc/s1600/pen.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email-message{ width: 230px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(http://4.bp.blogspot.com/-RzL4e1-qZD4/UZuZMsnxqSI/AAAAAAAAEPM/y-NS0XTs-x8/s1600/msg.png)no-repeat 10px 10px; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-submit { width: 95px; height: 30px; float: right; color: #000; font-weight: bold; padding: 0; cursor:pointer; margin: 25px 0 3px 0 0; background-color:#52e052; text-shadow: 1px 0 0 #999; border:1px solid #333; } #ContactForm1_contact-form-submit:hover { background:#00ff00; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 230px; margin-top:30px; } #contactbutton { height:40px; width:302px; background-image:url('https://lh5.googleusercontent.com/-R2cc6lNmpo4/Ug6EYjW4FPI/AAAAAAAAGAk/Q9S5NM4LLmo/h47/contact_button.png'); display:block; cursor:pointer; margin:auto; }
</style>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){ $("#contactbutton").click(function(){ if ($("#contact-faceblog").is(":hidden")){ $("#contact-faceblog").slideDown("slow"); } else{ $("#contact-faceblog").slideUp("slow"); } }); }); function closeForm(){ setTimeout('$("#contact-faceblog").slideUp("slow")', 2000); }
</script>
<div id="form-evolutions">
<div id="contact-faceblog">
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<div id="contactbutton"></div>
</div>
 - Untuk memasang widget contact form accordion versi 2 pada sidebar blog, kodenya sebagai berikut:
<style>
#faceblog-contact { height: 300px; width: 302px; overflow: hidden; background-color: darkgreen; } #evolutionsbutton { height:40px; width:302px; background-image:url('https://lh5.googleusercontent.com/-R2cc6lNmpo4/Ug6EYjW4FPI/AAAAAAAAGAk/Q9S5NM4LLmo/h47/contact_button.png'); display:block; cursor:pointer; } .form-contact { width: 322px; height: 300px; padding: 10px; margin: auto; } #ContactForm1_contact-form-name{ width: 230px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background:#000 url(http://2.bp.blogspot.com/-GoNmkIDybR0/UZuZDpVOXaI/AAAAAAAAEO8/pNPaQU1aiwQ/s1600/user.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email{ width: 230px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(http://3.bp.blogspot.com/-zGxMJ_C5R60/UZuZGnKgcuI/AAAAAAAAEPE/KwPOHFuBffc/s1600/pen.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email-message{ width: 230px; height: 120px; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(http://4.bp.blogspot.com/-RzL4e1-qZD4/UZuZMsnxqSI/AAAAAAAAEPM/y-NS0XTs-x8/s1600/msg.png)no-repeat 10px 10px; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-submit { width: 95px; height: 30px; float: left; color: #000; font-weight: bold; padding: 0; cursor:pointer; margin: 25px 0 3px 0 0; background-color:#52e052; text-shadow: 1px 0 0 #999; border:1px solid #333; } #ContactForm1_contact-form-submit:hover { background:#00ff00; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 230px; margin-top:30px; }
</style>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/contactform.js" type="text/javascript"></script>

<div id="faceblog-contact">      
<form class="form-contact">           
<input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<div id="evolutionsbutton"></div>
6. Langkah terakhir klik Simpan.

Untuk tinggi, lebar maupun warna widget contact form silahkan custom dan sesuikan selera sendiri. Sekarang jika ingin memasang tinggal tergantung selera saja, mau menggunakan efek floating atau efek accordion pada sidebar blog. Atau bahkan mungkin lebih suka memasang widget contact form kedalam halaman statis blog.

“Pada dasarnya penampilan memang bukanlah sesuatu hal yang terbaik, namun seseorang bisa menilai dari segi penampilan menjadi sesuatu hal yang terbaik”. Bukankah sesuatu hal yang enak di pandang akan terlihat segar di mata? keep the spirit, continue to work and success always!!! appearance is reflective of one's personality.

Berlangganan artikel via email

30 Response to "Memasang Widget Contact Form Accordion Pada Blog"

malem mas...kok postingnya tengah malem trs ya hehehe

Balas

malem jelang pagi mas.. maaf baru bisa balas komentar, ini sudah saya posting sejak minggu lalu mas tapi setiap posting saya jadwal 2 hari sekali dan waktunya tepat jam 12 malam. nanti saya berkunjung mas, minggu ini lagi ngerjain pesenan website orang

Balas

tengkyu kunjungannya mas, nanti saya berkunjung kembali

Balas

saya udah memakai contact form dari blogger.....tp masih ndk sempat ngoprek template lg

Balas

yang ini bisa melayang bagus dan keren.. udh suka sama contact from yg pake amplop mas, cuma blm sempat pasang :)

Balas

kayaknya widget contact yang ini lebih keren daripada yang lain nih. ^_^

Balas

memang sangat keren contact fromnya mas :D

Balas

Hmm makasih Mas, saya juga sudah pake versi Mas sugeng, heheheh.. keep sharing ajaaaaa...

Balas

Keren Mas... Widgetnya Menambah Menarik Blog Kita deh....

Balas

Owwh gitu to, klu saya ma ga prnah tak jadwal coz sibuk ama kerjaan sendiri asal ada ide ya posting...

Balas

oh jadi bisa posting dulu dan dijadwal sesuai keinginan yah mas, baru tahu saya gimana caranya yah?

Balas

perangkonya jangan lupa yah mbak Yanti...

Balas

makasih mas Andes postingannya keren juga keliatannya, tapi nggak ada demonya yah mas ?

Balas

mas virlyz@ hehe biar berjalan semua soalnya mas.. kerjaan pokok lancar, kerjaan sampingan lancar, blogging juga lancar :) hehehe tapi kuliah gak tuntas2

mas anthoni@ pasti udah tau tapi nanya :) hehe kan tiap posting pasti selalu liat di sebelah kanan ada tulisan jadwal tinggal setel tanggal dan waktu aja mas :D

Balas

belum tahu mas, makasih udah dikasih tahu hehe...

Balas

wah lagi hoki widget contact blogger yh mas ?hihi

Balas

mayan juga nih jadi ilmunya dobel, senang ketemu master master di sini..
apalagi mas andes jago banget bikin web..
semoga orderan banyak dan lancar mas

Balas

cocok nih buat yang nyerempet masalah jualan, bisa pakai kontak form plus modifan dari mas andes,
keren mas

Balas

kontak form keberadaannya dibutuhkan terutama yang sedang melamar GA ya mas karena katanya ini juga menjadi salah satu pertimbangan mbah Google

Balas

oke aku simpan dulu di memori ku, tar aku coba widget nya

Balas

eh saya malah ngga pernah pasang, ngga pede saya mah...awal ng'blog dipasang, tapi emangnya ada yang mau dikirimin email, sementara postingan kita banyak ngacao nya dari pada benernya coba?

Balas

Kode pos nya jyga jgn sampe ketinggalan ya mba :)

Balas

Bener keliatan fresh mas
Kayak baru metik di kebun ya hehe :)

Balas

Terimakasih atas sharing...lagi pakai hape jadi belum bisa liat demonya.

Balas

kalau saya perhatikan postingannya terus modifikasi widget follower nih ..
ceritanya fokus nehhh hehhe

Balas

haha ono opo to le ...

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 "Memasang Widget Contact Form Accordion Pada Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode