Cara Membuat Laman Contact Us Blog dengan Tampilan CSS Keren

Cara membuat laman contact us, hampir semua blog dan website memiliki halaman contact us atau dalam bahasa indonesia adalah kontak kami, sebuah alternatif agar pengunjung dapat menghubungi admin untuk menyampaikan pesan, entah itu mau mengirim saran, kritikan dan masih banyak lainya, jadi bagi sobat yang memiliki blog atau web jangan lupa untuk memasang contact us karna memang sangat penting biar bisa berkomunikasi dengan pengunjung via email

Manfaat lain dari contact us adalah situs akan terlihat menjadi lebih professional, nah jika sudah seperti itu maka google juga akan menyukai blog yang berkualitas, jangan lupa menambahkan lagi laman sitemap ( Daftar Isi ), untuk caranya sobat bisa baca artikel yaitu Cara Membuat dan Memasang Sitemap di Blog , dengan memasang sitemap pengunjung juga dapat melihat semua artikel blog dari label yang berbeda, tentunya akan memudahkan pembaca untuk mencari artikel

Ada banyak langkah optimasi blog selain memasang contact us dan juga sitemap, langkah lainya yaitu seperti memilih template SEO, ada beberapa template keren yang bisa sobat lihat pada artikel Bingung Cari Template Blogger Yang Bagus, Silahkan Pilih Disini lalu membuat artikel yang baik dan SEO, baca Tips dan inspirasi mengisi postingan artikel blog , jangan lupa menambahkan Title dan Alt pada setiap postingan yang bergambar karena ada manfaat juga untuk SEO, baca Manfaat Memasang Title Text dan Alt Text Gambar Postingan , lalu yang penting daftarkan blog di Google webmaster, untuk caranya bisa baca Cara Verifikasi Blog Di google Webmaster

Ngeblog memang mainan yang tidak mudah, mungkin sekilas terlihat gampang namun untuk membuat blog yang punya kualitas yang baik tentunya semua itu butuh kesabaran dan kerja keras, banyak hal yang harus di lakukan seperti optimasi yang sudah saya jelaskan di atas, mempunyai blog yang SEO pastinya sudah menjadi impian para sobat blogger, tapi semua itu butuh proses waktu yang lumayan lama namun semua jerih payah tidak akan terasa jika sudah mendapatkan hasil yang maksimal

Kembali lagi pada topik pembahasan yaitu cara membuat laman contact us, silahkan langsung saja sobat bisa lihat langkah - langkah di bawah ini :

1. Pertama buka blogger - Tata Letak

2. Tambahkan gadget ( Formulir Kontak ) dan letakan di mana saja.

3. Selanjutnya buka Template - Edit HTML.

4. Cari kode di bawah ini.

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>

5. Nanti jika di buka akan nampak deretan kode seperti di bawah ini.

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
<b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>

6. Hapus kode pada bagian yang saya beri warna biru, jadi nanti tinggal sisa kode seperti di bawah ini lalu simpan.

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
<b:includable id='main'>
 ( Bagian kode yang sudah di hapus )
</b:includable>
</b:widget>

7. Next copy kode CSS di bawah ini untuk tampilan Contact Us lalu pastekan tepat di atas kode ]]></b:skin> dan simpan.

/* Contact Form Container */
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}

/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}

/* Submit button style */
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}

/* Submit button on mouseover */
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}

8.  Selanjutnya sobat bikin laman baru pada pilihan Compose dan HTML silahkan pilih HTML dan pastekan kode di bawah ini dan klik publish.

<div class='widget ContactForm' id='ContactForm1'>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p>Nama</p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>Alamat Email</p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>Tulis Pesan Anda</p>
        <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
        <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='KIRIM'/>
        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
        <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
      </form>
    </div>
  </div>
</div>

9. Selesai dan lihat hasilnya.

Nah sampai disini untuk cara membuat laman contact us, untuk melihat contohnya sobat bisa lihat pada contact us yang ada di blog rocket4rt ini, semoga bermanfaat.Cara Membuat Widget Contact Form Super Keren, Cara Membuat Contact Form Sederhana di Blogger, Cara Membuat Halaman Contact Form (Contact Me) di Blog, Cara Membuat Widget Contact Us pada Halaman Statis, cara membuat privacy policy di blog, cara membuat contact us di blog, cara membuat disclaimer

Tweet

Cara Membuat Laman Contact Us Blog dengan Tampilan CSS Keren

4/ 5

Oleh hello

Ditulis hello Pada 22.10 Komentar