Memasang Widget Contact Form Blogger pada Halaman Statis
0 views
Widget Contact Form Blogger - Pada artikel sebelumnya saya telah menjelaskan bagaimana Cara Memasang Widget Contact Form Blogger, akan tetapi penempatan Contact Form pada widget ini kayaknya kurang disukai, dan lebih memilih menempatkan contact form pada halaman statis atau halaman posting.
Sekarang saya akan menjelaskan bagaimana memasang Widget Contact Form Blogger ini pada halaman statis atau pada postingan. Penampakan contact form ini seperti screenshoot di bawah ini :
Langkah 1 : Tambahkan Widget Contact Form Blogger
Untuk menambahkannya, masuk ke Setelan ► Tata Letak ► Tambahkan Gadget ► Gadget Lainnya ► Formulir Kontak
Untuk sementara biarkan Contact Form ada di widget / sidebar.
Langkah 2 : Tambahkan Halaman
Untuk menambahkannya, masuk ke Laman ► Laman baru ► Laman kosong. Tambahkan kode dibawah ini pada mode HTML bukanCompose
Pada Menu Pilihan, pilih Tekan "Enter" untuk baris baru.
Klik Publikasikan.
Langkah 3 : Meyembunyikan Widget dan Menambahkan CSS
Langkah ini adalah untuk menyembunyikan contact form yang ada di sidebar dan memodifikasi tampilan contact form. Tambahkan kode ini di atas
Semoga bermanfaat...

Sekarang saya akan menjelaskan bagaimana memasang Widget Contact Form Blogger ini pada halaman statis atau pada postingan. Penampakan contact form ini seperti screenshoot di bawah ini :

Langkah 1 : Tambahkan Widget Contact Form Blogger
Untuk menambahkannya, masuk ke Setelan ► Tata Letak ► Tambahkan Gadget ► Gadget Lainnya ► Formulir Kontak

Untuk sementara biarkan Contact Form ada di widget / sidebar.
Langkah 2 : Tambahkan Halaman
Untuk menambahkannya, masuk ke Laman ► Laman baru ► Laman kosong. Tambahkan kode dibawah ini pada mode HTML bukan
<form name="contact-form">
<p></p>
Nama
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<p></p>
Alamat Email <span style="color: red; font-weight: bolder;">*</span>
<p></p>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<p></p>
Isi Pesan <span style="color: red; font-weight: bolder;">*</span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p></p>
<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>
<style type="text/css">
/* Menyembunyikan elemen dalam postingan */
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>
Pada Menu Pilihan, pilih Tekan "Enter" untuk baris baru.

Klik Publikasikan.
Langkah 3 : Meyembunyikan Widget dan Menambahkan CSS
Langkah ini adalah untuk menyembunyikan contact form yang ada di sidebar dan memodifikasi tampilan contact form. Tambahkan kode ini di atas
]]></b:skin>
/* CSS Contact Form */
#ContactForm1{
display:none;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width: 300px;
height:auto;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{
background: #fffff7;
}
#ContactForm1_contact-form-email-message{
width: 450px;
height: 175px;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
font-family:Arial, sans-serif;
}
#ContactForm1_contact-form-submit {
width: 101px;
height: 35px;
float: left;
color: #FFF;
padding: 0;
margin: 10px 0 3px 0 0;
cursor: pointer;
background: #5E768D;
border: 1px solid #556f8c;
border-radius:3px;
}
#ContactForm1_contact-form-submit:hover {
background:#435c74;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 450px;
margin-top:35px;
}
Semoga bermanfaat...
112 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
jgn lupa kunbalnya yah http://esmartgadget-shopping.blogspot.com
Hal yang tidak pernah terbayankan kini menjadi kenyataan dengan keluargaku,,,untuk MBAH.RINGGO kami ucapkan banyak terimakasih ka…
Tapi kontak form nya tidak berfungsi. Jika klik tombol kirim tidak ada perubahan.
Mohon pencerahannya kang .
Salam,
Denny | http://indonesiajobhunter.blogspot.com/
http://www.cahpare.com/p/contact-me.html
btw makasih infonya gan
visit juga ya :)
http://belajaringgrisonlinee.blogspot.com/
http://www.masrud.web.id/
jgn lupa ke sini yah http://harafimulki.blogspot.com
http://beli.tipehandphone.com/p/halaman-pemesanan.html
[ saya ngak pernah pelajarin contact form ]
- apakah masuknya di Gmail???
Di tempat sy gak ada...
Pencerahannya gan...
udh saya hapus juga tetap tidak work
saya klik ( kirim ) mlah diem aja ga k kirim..!!
trims
saya cek di gmail gan ada tuh :(
kalau kode sudah ketemu, gunakan tag kondisional, misalkan kode CSS untuk label, author, dan komentar menggunakan .post-meta, maka penggunaan tag kondisionalnya seperti ini :
<b:if cond='data:blog.pageType == "static_page"'>
<style>
.post-meta{display:none}
</style>
</b:if>
Salam kenal kang dari http://ompaps.blogspot.com
Makasih tutornya kang ...berhasil.
Tapi kalau dicoba pakai email sendiri atau kita lagi login kok ga ngepek...apa emang begitu kang?
terus itu nanti di terima nya ke email kita ??? mirip model EmailMe gitu kang ????
mohon pencerrhannya yah kang ???
salam kenal yah kang
David Raja
www.DavidRaja.com
saya suka :D
BTW, Thread Commentnya keren kang :o
Aqb Blog
nhun kang ismet ah
Minta tutorial menghilangkan link otomatis dari kotak komentar donk |o|
[img]http://3.bp.blogspot.com/-i_aSI_fKS10/UZVKscbjFKI/AAAAAAAACtw/r_9ZgJ4XjDk/s1600/beben-koben.png[/img]
sekarang udah make thread comment hack ni.. :-d