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

Memasang Widget Contact Form di Halaman Statis Blog

Widget Contact Form Halaman Statis Blog 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">
<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>
6. Langkah terakhir klik Publish.

Selesai sudah dan demikian tutorial untuk menerapkan widget contact form ke dalam halaman statis blog.

Berlangganan artikel via email

74 Response to "Memasang Widget Contact Form di Halaman Statis Blog"

Pertamax agak Mahal, Premium pun
Keturan jadi Naek,. muga-muga nu ngawitan
Biar dapet Parcel, dari Mas Andes tentang
Memasang widget contacts form.
Terima kasih Mas, ijin belajar lagi saya.

Balas

Nice Info gan
lanjutkan gan
mantap

Balas

waduuuhhh....saya baru saja pasang form contact us mas, tuh masih anget di blog saya.

Balas

mantap gan,
walaupun saya sudah mencobanya.

Balas

Yuhuuu..lagi2 tipsnya pandangan pertama tuh mas

Balas

wah keren ini mas andes...
salam mas,,,

Balas

Kerennn gannn Tutorialnyaa Tapi Kira" Klo Dipasang Di Blogg saya Cocok Kagak yah?? hehe

Balas

Mantap selalu kau punya tips mas .. hebatlah

Balas

tumben ni mas gk pake demo.., tp kayakx keren deh.., makasih *smile

Balas

maaf mas saya mau tanya neh,, itu kan nanti misal ada yang mengisi kontk form nya masuk nya kmn gitu?

Balas

ini seperti tutorial yang waktu dulu ya mas Andes, namun sedikit dipoles dan didandani hehe :D

Balas

Cara master emang hebat !!

Balas

langsung ke email mas

Balas

jangan panggil master mas saya masih pemula juga

Balas

Concta form memang sangat penting untuk dipasang di blog ya mas. Jadi kalau ada orang yang mau bertanya, bisa langsung melalui contact tersebut. :)

Balas

yang dulu di sikat orang mas, sekaligus sama artikelnya nih..
http://anakmudadesa.blogspot.com/2013/09/widget-contact-form-efek-animasi-pada.html

Balas

iya mas gambarnya udah bisa mewakili demo

Balas

Saya 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

Balas

Salah satunya disini http://sam-soel.web.id/?p=111, sama persis isinya hadeeeh kok kebetulan sama webnya pake sam juga hehehehe

Balas

biarin mas, tapi di bawahnya udah saya bales lagi..suruh edit dikit coba ntar liat balesannya gimana masih nunggu moderasi.
hehe kalo itu semrawut juga mas yang http://sam-soel.web.id/?p=111 sama gambar2nya

Balas

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

Balas

sapa tau bisa bermanfaat kang

Balas

iya kang.. mungkin ada yang belom :)

Balas

mangga kang karrysta :)

Balas

memang sangat simpel tips di atas mas,
saya juga telah menggunakan manipulasi CSS untuk menyembunyikan widget Concta form mas, dan sebagai ganti saya pasang Concta form di page statis,

Balas

cocok banget mas Ainnul. coba aja kalau nggak percaya :)

Balas

wkakakakaka masih bisa reply juga ya mas dmin nya, salut salut

Balas

hehe.. sipp mas yang penting poles aja biar kinclong

Balas

Sayangnya Lagi Bw pake hp....pingin nyoba minta no rekening nya mas Andes...lewat widget contact from nya...hehe :)

Balas

Kalo pake situs generate..apa ada pengaruh kurang bagus ya mas :)

Balas
avatar
Anonymous

Blogwalking ...


mas andes ....

Balas

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

Balas
avatar
Anonymous

ini seperti kemarin-kemarin ya

Balas
avatar
Anonymous

:D mantab, jadi keren

Balas

Reuni abdul jamil ya mas

Balas

Keren mas kebetulan saya belum punya, saya mau nyoba mas Andes mungkin besok kali, ini masih refot :)

Balas

ada apa nih mas.. sepertinya saya mau dapat rejeki :) hehe

Balas

refot banget apa refot amat mas.. hohoho

Balas

share yang bagus ya,.... blognya juga keren :)

Balas

punyaku pakai pihak ke tiga. dulu tidak tahu jika ternyata blgospot juga menyediakan widget ini.

Balas

blogger hebat selalu menghasilkan artikel hebat, dan lebih hebatnya lagi dicopas oleh orang wkwwkwk :D
saya juga merasakan kalo artikel dicopas ko :(

Balas

menuh menuhin kotakk email ya...hiihi

Balas

thanks ilmu nya gan. salam kenal ya
sambil follow blog agan :)

Balas

kebetulan saya malah pakai contact form dari situs tertentu. Memang benar bahwa ada backlink di bawah widget tersebut. Tapi sudah tak hapus hehehe :D

Balas

Ngeselin 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. :)

Balas

mangga muda atau mangga tua mas hehe :)

Balas

Sekali-kali jangan nice info mas. Tapi nice admin hehe :)

Balas

Klu dilaporkan ntar kasihan yg punya blog mbak bisa mewek seharian hehehe,,google sekarang ini kejam banget hanya 1 report aja udah langsung diremove blognya,

Balas

memang males nempelin demo .. kayak aku hoho

Balas

keren mas andes, templatenya juga keren adminnya pun gak kalah keren, hehehe

Balas

ijin follow mas

Balas

Kalau mas Andes sih pasti milih yang muda mbak hehe...

Balas

kita sebenarnya juga kasihan sama yang copas, cuma kadang si copas seenaknya aja, bikin kesel aja...

Balas

silahkan mas, nanti saya sampaikan :)

Balas

si amat aja nggak refot yah mas hehe...

Balas

ini yang saya cari" gann , , ,


thanks info nya

mmpir di http://nawayhac.blogspot.com

Balas

keren jadi light :D

Balas

hehe 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.
best good guys could definitely be better if can correct myself

Balas

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

Balas

Kalau saya mah, dua-duanya gak apalah
Kalau kehabisan ang tua yang muda gak apalah tt3tt3
Nice Admin dan Visitor nya ttettettete

Balas

Sesuatu yang bermanfaat bisa membantu buat semua teman
Blogging, maaf baru bisa on blog Mas Andes, Nice Adminya
salam sejahtera, salam blogging juga buat sobat semua

Balas

Datang lagi Mas Andes kalau sekarang datangnya sambil senyum-senyum akh, biar suasana nya tambah berseri-seri yah Mas Andes

Balas

Kaya nya Mas Andes nya Masih Repot deh Mas.

Balas

Wah sayang sudah di Hapus yah Mbak, berarti foto
KTP dan sensus penduduk saya juga ikutan terhapus juga tuh Mbak
Tega nya Mbak Rin, pada diri kua tt3tt3tt3tt3

Balas

Boleh di coba nih.. makasih mas andes

Balas

nanti pesan yang kita kirim masuk ke gmail atau kemana

Balas

mantap gan, jangan lupa kunjungi blog saya ya http://technors.blogspot.com
saya blogger baru..

Balas

Ijin Coba Gan
Blog Walking Sob=> BoboiboyFromSpenza.blogspot.com

Balas

Mantap mas,
tapi 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.

Balas

Sangat membantu Mas,,,Thank

Balas

Infonya sangat membantu sekali sob, Izin nyimak saja ya
http://goo.gl/q4aK5g

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 di Halaman Statis Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode