Advertising 468 x 60

- Cara Membuat Halaman Kontak di Blogspot yang Simple dan Elegan

Cara Membuat Halaman Kontak di Blogspot yang Simple dan Elegan
Halaman kontak yaitu salah satu kelengkapan blog yang harus dipasang dikala membangun blog. Apalagi kalau sahabat lagi bisnis online. Wajib ada hukumnya. Membuat halaman kontak di blog sebenarya cukup dengan menyampaikan info berupa email dan nomor handphone. Ada juga yang lebih lengkap dengan menyampaikan gosip PIN BBM, chanel youtube, Facebook bahkan twitter.

Apapun bentuk berita kontak yang teman berikan yang pasti harus bisa memudahkan pembaca dengan cepat mengghubungi pemilik blog.

Sebagian besar blogger selalu menyembunyikan identitas asli atau lebih tepatnya tidak mau diekspos. Hal ini sah-sah saja tidak ada larangan. Kalau ditampilkan semua mampu repot sob..

Baca juga : 10 Alasan mengapa blogger pemula harus belajar blogspot

Cara terbaik ialah dengan memasang form kontak di halaman utama blog. Si pembaca tidak perlu repot-repot membuka email atau membuka hp untuk mengirimkan pesan kepada pemilik blog. Tinggal isikan saja pesan di form yang tersedia.

Cara Membuat Halaman Kontak di Blogspot yang Simple dan Elegan

Berikut ini adalah cara membuat halaman kontak yang saya ambil dari blognya kangismet.
Ada 3 langkah pembuatan.

1. Langkah Pertama
Buat Widget Contact Form yang telah disediakan oleh google :
  1. Klik Tata Letak
  2. Tambahkan Gadget
  3. Klik Gadget Lainnya
  4. Pilih Formulir Kontak
Untuk sementara biarkan formulir kontak ada di sidebar / widget (jangan diotak atik).
Pada langkah pertama ini sebenarnya form kontak sudah jadi. Hanya saja tampilannya masih default bawaan blogger. Dan letaknya tidak bisa dipindah ke halaman statis.

Baca juga : Cara mengamankan akun google

2. Langkah Kedua
Menambahkan halaman yang akan dijadikan halaman statis di menu
Berikut caranya :
  1. Masuk ke laman
  2. Klik Laman gres
  3. Beri judul : kontak
  4. Lihat pojok kanan bawah : pada menu pilihan : pilih tekan “enter” untuk baris baru
  5. Tambahkan arahan-kode di bawah ini pada mode HTML. Jangan salah sob.. bukan Compose ya… (kalau dimasukan pada mode compose gak akan tampil)
----------------------------------------
<form name="contact-form">
Nama
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
Alamat Email <span style="color: red; font-weight: bolder;">*</span>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
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>
<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-footerdisplay:none
</style>
----------------------------------------
3. Langkah Ketiga
Ini langkah terakhir sob.. fungsinya untuk menambahkan CSS dan menyembuyikan widget (menyembuyikan tampilan kontak form bawaan blogger). Berikut caranya :
  1. Masuk ke setingan Template
  2. Tekan Ctrl + F (untuk memudahkan pencarian)
  3. Cari kode ini sob ]]></b:skin>
  4. Jika sudah ketemu tambahkan instruksi di bawah ini. Letakkan di atas aba-aba  ]]></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;
Selamat mencoba dan supaya berhasil yaa..

0 Response to "- Cara Membuat Halaman Kontak di Blogspot yang Simple dan Elegan"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel