Memasang Widget Contact Form Blogger pada Halaman Statis
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...
114 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
Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL Ada Garansi Resmi Distributor dan Garansi TAM 2 bebas resiko bebas penipuan.Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
BERMINAT HUB-SMS:085-77966-5033 ATAU KLIK WEBSET RESMI KAMI http://dina-shop7.blogspot.com/.
Ready Stock!
BlackBerry 9380 Orlando - Black.Rp.900.000,-
Ready Stock!
BlackBerry Curve 8520 Gemini.Rp.500.000,-
Ready Stock!
BlackBerry Bold 9780 Onyx 2.Rp.800.000,-
Ready Stock!
Blackberry Curve 9320.Rp.700.000,-
Ready Stock!
Samsung Galaxy Note 10.1.Rp.2,500.000.
Ready Stock!
Samsung Galaxy Tab 2 (7.0).Rp. 1.000.000
Ready Stock!
Samsung Galaxy S III Mini.Rp.1.800.000.
Ready Stock!
Samsung Galaxy Nexus I9250 - Titanium Si.Rp.1.500.000,-
Ready Stock!
Samsung Galaxy Note N7100.Rp.2.500.000.
Ready Stock!
Samsung Galaxy Note N7000 - Pink.Rp.1.700.000.
Ready Stock!
Samsung Galaxy Y S5360 GSM - Pure White.Rp.500.000,-
Ready Stock!
Nokia Lumia 800 - Matt Black.Rp.1.700.000,-
Ready Stock!
Nokia Lumia-710…
masih aja dilanggar.
nasib loe lah ....
kalo yang ginian gw paling demen koment nya
Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
BERMINAT HUB-SMS 085-757-299-675 ATAU KLIK WEBSET RESMI KAMI http://nabilashop77.blogspot.com
Ready Stock! Samsung Galaxy S4 Mini Rp.2,500.000
Ready Stock! Apple iPhone 5 Rp.2,700.000
Ready Stock! BlackBerry 9380 Orlando - Black.Rp.900.000,-
Ready Stock! BlackBerry Curve 8520 Gemini.Rp.500.000,-
Ready Stock! BlackBerry Bold 9780 Onyx 2.Rp.800.000,-
Ready Stock! Blackberry Curve 9320.Rp.700.000,-
Ready Stock! Samsung Galaxy Note 10.1.Rp.2,500.000.
Ready Stock! Samsung Galaxy Tab 2 (7.0).Rp. 1.000.000
Ready Stock! Samsung Galaxy S III Mini.Rp.1.800.000.
Ready Stock! Samsung Galaxy Nexus I9250 - Titanium Si.Rp.1.500.000,-
Ready Stock! Samsung Galaxy Note N7100.Rp.2.500.000.
…
[ 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