Memasang Widget Contact Form di Halaman Statis Blog – seperti yang kita tahu bahwa widget contact form memanglah penting untuk sebuah blog sebagai piranti komunikasi yang bersifat privat. Kaitannya dengan widget contact form pada beberapa waktu lalu juga sudah pernah kita bahas dimana pada tutorial tersebut terdapat bermacam widget contact form blogger official yang sudah di modifikasi juga. Untuk melihat bentuk dari widget contact tersebut bisa langsung menuju halaman artikelnya pada tutorial yang berjudul Custom Widget Contact Form Pada Blog dan Widget Contact Form Efek Accordion Pada Blog serta Widget Contact Form Efek Animasi Pada Blog. Namun apabila ingin membuat contact widget dengan tampilan yang sederhana saja bisa mengikuti langkah-langkah dibawah. Cara penerapannya kedalam halaman statis blog langkah-langkahnya sama seperti pada tutorial sebelumnya, untuk membuat widget contact form supaya bisa berfungsi dengan baik harus terlebih dahulu menambahkan contact widget yang asli (default widget contact form blogger) kemudian kita bisa menyembunyikan atau tidak menampilkan widget contact tersebut dengan menambahkan kode CSS lalu kemudian kita bisa merubahnya menjadi tampilan contact widget yang lebih menarik. Berikut langkah-langkah cara Memasang Widget Contact Form di Halaman Statis Blog.1. Login akun blogger.
2. Masuk Tata Letak > Tambah widget > Gadget Lainnya > Formulir Kontak, lalu klik Simpan.
3. Selanjutnya klik Template lalu Edit HTML untuk menyembunyikan widget lama dan mengganti dengan tampilan widget baru.
4. Copy kode berikut ini lalu paste tepat diatas kode
]]></b:skin> kemudian Simpan template.
#formcontact { margin:0 auto; width:390px; height: 380px; background:#222222; position:relative; border:1px solid #262626; }
#formcontact h3 { color:#ffffff; font:bold 20px verdana; text-transform:uppercase; text-align: center; padding:5px 0 5px 15px; background:#222; border-bottom: 1px double #333; border-top: 1px double #111; margin:10px 0px; }
#ContactForm1_contact-form-name { margin:0px 10px 10px 10px; padding:10px 10px; width:350px; background:#262626; border-bottom: 1px double #171717; border-top: 1px double #171717; border-left:1px double #333333; border-right:1px double #333333; color:#ffffff; }
#ContactForm1_contact-form-email { margin:0px 10px 10px 10px; padding:10px 10px; width:350px; background:#262626; border-bottom: 1px double #171717; border-top: 1px double #171717; border-left:1px double #333333; border-right:1px double #333333; color:#ffffff; }
#ContactForm1_contact-form-email-message{ margin:0px 10px 10px 10px; padding:7px 7px; width:355px; background:#262626; border-bottom: 1px double #171717; border-top: 1px double #171717; border-left:1px double #333333; border-right:1px double #333333; overflow:hidden; height:150px; color:#ffffff; }
#ContactForm1_contact-form-submit{ margin:0px 10px 10px 10px; padding:4px 7px; background:#CC0000; position: relative; cursor:pointer; float:right; width:100px; border-bottom: 1px double #660000; border-top: 1px double #660000; border-left:1px double #FF0033; border-right:1px double #FF0033; }
#ContactForm1_contact-form-submit:hover { background:#ff0000; }
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 250px; margin-top:10px; }
#ContactForm1 {display:none}5. Copy kode berikut ini lalu klik Laman > Laman Baru > Laman Kosong kemudian paste kode tersebut pada halaman statis HTML.<div id="formcontact">6. Langkah terakhir klik Publish.
<h3>Contact Form</h3>
<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: 250px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
Selesai sudah dan demikian tutorial untuk menerapkan widget contact form ke dalam halaman statis blog.
73 Response to "Memasang Widget Contact Form di Halaman Statis Blog"
Pertamax agak Mahal, Premium pun
BalasKeturan jadi Naek,. muga-muga nu ngawitan
Biar dapet Parcel, dari Mas Andes tentang
Memasang widget contacts form.
Terima kasih Mas, ijin belajar lagi saya.
Nice Info gan
Balaslanjutkan gan
mantap
waduuuhhh....saya baru saja pasang form contact us mas, tuh masih anget di blog saya.
Balasmantap gan,
Balaswalaupun saya sudah mencobanya.
Yuhuuu..lagi2 tipsnya pandangan pertama tuh mas
BalasKerennn gannn Tutorialnyaa Tapi Kira" Klo Dipasang Di Blogg saya Cocok Kagak yah?? hehe
BalasMantap selalu kau punya tips mas .. hebatlah
Balastumben ni mas gk pake demo.., tp kayakx keren deh.., makasih *smile
Balasmaaf mas saya mau tanya neh,, itu kan nanti misal ada yang mengisi kontk form nya masuk nya kmn gitu?
Balasini seperti tutorial yang waktu dulu ya mas Andes, namun sedikit dipoles dan didandani hehe :D
BalasCara master emang hebat !!
Balaslangsung ke email mas
Balasjangan panggil master mas saya masih pemula juga
BalasConcta form memang sangat penting untuk dipasang di blog ya mas. Jadi kalau ada orang yang mau bertanya, bisa langsung melalui contact tersebut. :)
Balasyang dulu di sikat orang mas, sekaligus sama artikelnya nih..
Balashttp://anakmudadesa.blogspot.com/2013/09/widget-contact-form-efek-animasi-pada.html
iya mas gambarnya udah bisa mewakili demo
BalasSaya juga punya 3 artikel yang disikat orang mas..ngeselin masa copas semuanya ga dirubah sama sekali, kan ga etis namanya klu ky gitu caranya...btw mas andes jadi komentator 1 itu di http://anakmudadesa.blogspot.com/2013/09/widget-contact-form-efek-animasi-pada.html...jadi lucu kesannya, kok adminnya ga sadar gitu yah wwkwkwk
BalasSalah satunya disini http://sam-soel.web.id/?p=111, sama persis isinya hadeeeh kok kebetulan sama webnya pake sam juga hehehehe
Balasbiarin mas, tapi di bawahnya udah saya bales lagi..suruh edit dikit coba ntar liat balesannya gimana masih nunggu moderasi.
Balashehe kalo itu semrawut juga mas yang http://sam-soel.web.id/?p=111 sama gambar2nya
iya mbak, maksudnya dari pada pake situs generate contact biasanya ada backlink di bawahnya widget. tapi di hapus juga bisa sih.. namun kalo saya lebih enak pasang sendiri mau di custom juga mudah
Balassapa tau bisa bermanfaat kang
Balasiya kang.. mungkin ada yang belom :)
Balasmangga kang karrysta :)
Balasmemang sangat simpel tips di atas mas,
Balassaya juga telah menggunakan manipulasi CSS untuk menyembunyikan widget Concta form mas, dan sebagai ganti saya pasang Concta form di page statis,
cocok banget mas Ainnul. coba aja kalau nggak percaya :)
Balaswkakakakaka masih bisa reply juga ya mas dmin nya, salut salut
Balashehe.. sipp mas yang penting poles aja biar kinclong
BalasSayangnya Lagi Bw pake hp....pingin nyoba minta no rekening nya mas Andes...lewat widget contact from nya...hehe :)
BalasKalo pake situs generate..apa ada pengaruh kurang bagus ya mas :)
BalasKolom reunian nih...
BalasKolom reunian nih...
BalasBlogwalking ...
Balasmas andes ....
enggak mas..sama2 di untungkan kok. kan pengguna udah mengambil (istilahnya di buatkan form contact tinggal pake) jadi wajarlah kalo biasanya setelah ambil kode dari situs generate contact pasti di bawahnya widget ada backlink yang mengarah ke situs mereka
Balasini seperti kemarin-kemarin ya
Balas:D mantab, jadi keren
BalasReuni abdul jamil ya mas
BalasKeren mas kebetulan saya belum punya, saya mau nyoba mas Andes mungkin besok kali, ini masih refot :)
Balasada apa nih mas.. sepertinya saya mau dapat rejeki :) hehe
Balasrefot banget apa refot amat mas.. hohoho
Balasshare yang bagus ya,.... blognya juga keren :)
Balaspunyaku pakai pihak ke tiga. dulu tidak tahu jika ternyata blgospot juga menyediakan widget ini.
Balasblogger hebat selalu menghasilkan artikel hebat, dan lebih hebatnya lagi dicopas oleh orang wkwwkwk :D
Balassaya juga merasakan kalo artikel dicopas ko :(
menuh menuhin kotakk email ya...hiihi
Balasthanks ilmu nya gan. salam kenal ya
Balassambil follow blog agan :)
kebetulan saya malah pakai contact form dari situs tertentu. Memang benar bahwa ada backlink di bawah widget tersebut. Tapi sudah tak hapus hehehe :D
BalasNgeselin juga ya mas kalau artikel di copas orang. Kalau saya biasanya langsung tak laporkan ke DMCA daripda susah-susah berkunjung ke blog tersebut dan memberikan saran. :)
Balasmangga muda atau mangga tua mas hehe :)
BalasSekali-kali jangan nice info mas. Tapi nice admin hehe :)
BalasKlu dilaporkan ntar kasihan yg punya blog mbak bisa mewek seharian hehehe,,google sekarang ini kejam banget hanya 1 report aja udah langsung diremove blognya,
Balasa rafiq kali hehe
Balasmemang males nempelin demo .. kayak aku hoho
Balaskeren mas andes, templatenya juga keren adminnya pun gak kalah keren, hehehe
Balasijin follow mas
BalasKalau mas Andes sih pasti milih yang muda mbak hehe...
Balaskita sebenarnya juga kasihan sama yang copas, cuma kadang si copas seenaknya aja, bikin kesel aja...
Balassilahkan mas, nanti saya sampaikan :)
Balassi amat aja nggak refot yah mas hehe...
Balasini yang saya cari" gann , , ,
Balasthanks info nya
mmpir di http://nawayhac.blogspot.com
keren jadi light :D
Balashehe ada baiknya juga kalo di laporkan, tapi saya coba kasih saran aja kalo ga mau ya udah saya biarin :) biar google yang jadi saksi bisu.. hehe do'akan saja biar sadar.
Balasbest good guys could definitely be better if can correct myself
Iya ya mas kasihan juga ya kalau blog nya dihapus. Mudah-mudahan posting nya saja yang dihapus. Jadi biar yang punya blog nggak nangis hehe :)
BalasKalau saya mah, dua-duanya gak apalah
BalasKalau kehabisan ang tua yang muda gak apalah tt3tt3
Nice Admin dan Visitor nya ttettettete
Sesuatu yang bermanfaat bisa membantu buat semua teman
BalasBlogging, maaf baru bisa on blog Mas Andes, Nice Adminya
salam sejahtera, salam blogging juga buat sobat semua
Datang lagi Mas Andes kalau sekarang datangnya sambil senyum-senyum akh, biar suasana nya tambah berseri-seri yah Mas Andes
BalasKaya nya Mas Andes nya Masih Repot deh Mas.
BalasWah sayang sudah di Hapus yah Mbak, berarti foto
BalasKTP dan sensus penduduk saya juga ikutan terhapus juga tuh Mbak
Tega nya Mbak Rin, pada diri kua tt3tt3tt3tt3
Boleh di coba nih.. makasih mas andes
Balasnanti pesan yang kita kirim masuk ke gmail atau kemana
Balasmantap gan, jangan lupa kunjungi blog saya ya http://technors.blogspot.com
Balassaya blogger baru..
Ijin Coba Gan
BalasBlog Walking Sob=> BoboiboyFromSpenza.blogspot.com
Mantap mas,
Balastapi sya mw tanya ne mas.
setelah saya aplikasi kan di blog saya,
dan setelh saya test penggunaan form contact nya.
keluar pesan begini "Pesan Sudah Terkirim"
tapi setelah saya cek di email, ga da masuk di email tersebut.
Mohon pencerahannya mas.
Sangat membantu Mas,,,Thank
BalasInfonya sangat membantu sekali sob, Izin nyimak saja ya
Balashttp://goo.gl/q4aK5g
- 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 di Halaman Statis Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode