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

Widget Contact Form Efek Animasi Pada Blog

Widget Contact Form Blogger Widget Contact Form Efek Animasi Pada Blog – untuk membuat halaman kontak pada blog dengan adanya fitur widget terbaru official blogger tentu kini sudah lebih mudah. Hanya dengan menambahkan pada add widget yang terdapat pada tata letak blog maka widget contact form sudah siap tampil dan bisa langsung digunakan sebagaimana fungsinya. Dengan adanya fitur widget contact form tersebut kita bisa merubah style tampilan dengan gaya kita sendiri agar bisa sesuai dengan warna maupun bentuk yang kita kehendaki. Walaupun kita akan membuat widget contact form tampil dengan efek animasi, namun kita tetap membutuhkan widget contact form bawaan dari blogger agar ditampilkan kedalam blog terlebih dahulu agar widget contact form dengan efek animasi ini bisa berfungsi sebagaimana mestinya dan agar bisa tetap digunakan untuk berkomunikasi. Kesimpulannya adalah setelah kita memasang widget contact form bawaan dari blogger, maka tahap selanjutnya yaitu memodifikasi widget contact form tersebut dengan tampilan yang kita kehendaki dan nantinya widget contact form yang lama atau layout awal dari tampilan widget yang masih standar atau sederhana kita sembunyikan menggunakan CSS. Agar lebih jelasnya, berikut adalah tutorial cara memasang Widget Contact Form Efek Animasi 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 berikutnya kita akan membuat tampilan baru widget contact form dengan efek animasi, caranya Copy kode berikut ini lalu klik Laman > Laman Baru > Laman Kosong kemudian paste kode tersebut pada area HTML halaman statis.
<style>
#wrap-contact {width:530px; margin:20px auto 0; height:auto;} #form_wrap-contact { overflow:hidden; height:446px; position:relative; top:0px; -webkit-transition: all 1s ease-in-out .3s; -moz-transition: all 1s ease-in-out .3s; -o-transition: all 1s ease-in-out .3s; transition: all 1s ease-in-out .3s;} #form_wrap-contact:before {content:""; position:absolute; bottom:128px;left:0px; background:url('http://3.bp.blogspot.com/-cmD_gxIBhmo/Ugp1CmUG5xI/AAAAAAAAF9Y/5CUD_WnjOvw/s1600/before.png'); width:530px;height: 316px;} #form_wrap-contact:after {content:"";position:absolute; bottom:0px;left:0; background:url('http://4.bp.blogspot.com/-Ufp_JwBgLhE/Ugp1OAYZRPI/AAAAAAAAF9g/nWV0YQrBP8o/s1600/after.png'); width:530px;height: 260px; } #form_wrap-contact.hide:after, #form_wrap-contact.hide:before {display:none; } #form_wrap-contact:hover {height:776px;top:-200px;} #contact-form {background:#e9fbe9; position:relative;top:200px;overflow:hidden; height:200px;width:450px;margin:0px auto;padding:20px; border: 1px solid #52e052; box-shadow: 0px 0px 5px #00ff00; -webkit-transition: all 1s ease-in-out .3s; -moz-transition: all 1s ease-in-out .3s; -o-transition: all 1s ease-in-out .3s; transition: all 1s ease-in-out .3s;} #contact-form:hover {height:530px;} #ContactForm1_contact-form-name{ width: 399px; 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: 399px; 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: 399px; 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: 450px; height: 30px; 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 darkgreen; } #ContactForm1_contact-form-submit:hover { background:#00ff00; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 400px; margin-top:30px; }
</style>

<div id="wrap-contact">
<div id='form_wrap-contact'>
<form id="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>
6. Langkah terakhir klik Publish.

LIVE DEMO:



Sekarang widget contact form sudah terpasang kedalam halaman statis blog, dan selesai sudah tutorial cara memasang Widget Contact Form Efek Animasi Pada Blog.

Berlangganan artikel via email

36 Response to "Widget Contact Form Efek Animasi Pada Blog"

Hehehehe cantik juga mas tampilannya, dark green mantaab

Balas
avatar
Anonymous

wah bagus banget mas Andes ada efek animasinya gitu jadi keliatan hidup... makasih mas... keren :)

Balas

Daftar Hadir di Postingan baru Mas Andes..
Keren artikel nya Mas..? contacts form yang unik dan menarik
idzin simak yah Mas terima kasih atas artikel nya salam sukses

Balas

kayaknya saya udah pernah lihat nih mas di situs PeHaa.com, kebetulan langganan ane tuh situs si cewe polandia kan hehehe
tapi OK juga kalo dibuatkan untuk contact form blogger

Balas

wah, keren nih.... tp nanti bikin lemot blog gk yah?

Balas
avatar
Anonymous

Keren mas... widgetnya, di modifikasi lebih cantik

Balas

Yang pengguna handphone gimana gan ? Kayaknya kagak bisa nih di opmin :)

Balas

wahhh gila keren banget mas.., jd pengen pasang ni.., makasih ya... *smile

Balas

ya udah mas dipasang aja sekarang hehe...

Balas

cantik apa ganteng mas hehe...

Balas
avatar
Anonymous

waw kereeen juga sob,tp kl mau d tempatkan di salah satu postingan blog gmn tuh?

Balas

ikuti point 1-4, setelah sampai point 5 tinggal copy aja kodenya masukin postingan

Balas
avatar
Anonymous

Wuiiih, mantap... Efeknya itu yang bikin kagak nahan...

Balas
avatar
Anonymous

simpen di kulkas mbak biar awet :)

Balas

Wah keren widget nya mas! Kalau saja hover contact-form nya diabaikan dulu sementara, bakal lebih asyik kayaknya, jadi lebih cepet nampil nya. :)

Balas

Siip Mas Andes, kalau masalah atak atik blog harus banyak berguru ke mas Andes..

Balas

taruh bawa kasur gimana ??

Balas

Jangan ditahan lho, nanti bisa kebelet..:)

Balas
avatar
Anonymous

mantab kang ... tapi ini dapat berpengaruh pda kecepatan load blog ga?

Balas

Mau pasang takut menambah berat loading blog :(

Balas

keren banget tuh... kaya ngirim surat ..? pake amplop juga efek nya,, keren deh mas

Balas

aku belum pasang widget kontak
ko jadi pengen pasang

Balas

waduhhh keren banget euy tutor yang satu ini...ijin coba ach ,,,
ada aja yah tutornya gakpernah habis rupanya heuheuheu

Balas

ayoo mbak Anis pasang bareng yookk hihi

Balas

mendingan gantung di atas pohon

Balas

duuh, belum paham betul nih...fungsi utamanya buat apa ya Mas? kalau ndak pakai kan ndak papa...

Balas

idenya keren mas, pake efek animasi. apa gak berat sob ?

Balas

kalu berat saya yang tanggung mas Andes yang jawab,,m

Balas

iya emng mas boku,, mas andes emng biangnya yang beginian deh ah .
aku aja bngung ini mau comment apa lagi ? hahaa

Balas

nah.. komenku waktu tentang contact maksutnya yang ini .

Balas

keren nih,, mungkin nanti saya coba untuk website saya

Balas
avatar
Anonymous

:keren banget bang jadinya :D

Balas
avatar
Anonymous

izin di praktekan ya bangg

Balas
avatar
Anonymous

abang memang no 1 kalo CSS deh :D

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