Cara Membuat Contact Us Di Statis ~ Dunia Blogging

Dunia Blogging-Cara Membuat Contact Us Di Statis-Bagi anda yang kurang suka dengan tampilan widget contact us bawaan google dan anda ingin menampilkan contact us di halaman statis,disini saya akan berbagi tips memasang contact us di statis dengan sangat mudah.

contoh hasilnya nanti

Contact Us berguna untuk orang yang ingin menghubungi anda di blog,ya siapa tahu ada perusahaan yang ingin pasang iklan di blog anda,kemudian perusahaan ingin menghubungi anda dengan lewat contact us di blog anda,jadi jelasnya contact us itu sangatlah penting bila blog anda untuk sebuah penghasil uang,tapi kalau blog hanya untuk berexpresi saja,kurasa hal ini tidak terlalu penting,jadi abaikan saja...

Langkah Langkah Memasang Contact Us Di Blog Sebagai Berikut

1.Tambahkan gadget di blogger.

Caranya:Untuk menambahkannya, masuk ke Setelan ► Tata Letak ► Tambahkan Gadget ► Gadget Lainnya ► Formulir Kontak

2.Buatlah statis page

Caranya:masuk ke Laman ► Laman baru ► Laman kosong. Tambahkan kode dibawah ini pada mode HTML-dan masukkan code di bawah ini.

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

4.Pada menu pilihan atau options pilih pada ''enter'' tinggal di publishkan contoh gambar di bawah

5.Setelah menambah widget contact us tadi,sekarang kita sembunyikan widget contact us bawaan blogger tadi dengan menambahkan code CSS,dengan cara masuk ke edite template dan masukkan code di bawah ini tepat di atas code ]]></b:skine>

/* 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;
}

6.Dan silahkan di SAVE templatnya.

Sekian Artikel Dari Dunia Blogging Semoga Bisa Membantu Anda.

Terima kasih telah membaca artikel tentang Cara Membuat Contact Us Di Statis di blog Dunia Blogging jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini di web browser anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.

Cara Membuat Contact Us Di Statis

Artikel terbaru :