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 Sitemap (Daftar Isi) di Blog Update Terbaru , 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 Cara Menulis Artikel Yang Baik dan Benar di Blogspot , jangan lupa menambahkan Title dan Alt pada setiap postingan yang bergambar karena ada manfaat juga untuk SEO, baca Cara Memasang Title dan Alt Gambar Postingan di Blog , lalu yang penting daftarkan blog di Google webmaster, untuk caranya bisa baca Cara Daftar dan Verifikasi Blog di Google Webmaster Tools

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 :
  • Pertama buka blogger - Tata Letak
  • Tambahkan gadget ( Formulir Kontak ) dan letakan di mana saja.

Cara Membuat Laman Contact Us Blog dengan Tampilan CSS Keren
  • Selanjutnya buka Template - Edit HTML.
  • Cari kode di bawah ini.
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
  • 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>
  • 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>
  • 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;
}
  • Selanjutnya sobat bikin laman baru pada pilihan Compose dan HTML silahkan pilih HTML dan pastekan kode di bawah ini dan klik publish.
Cara Membuat Laman Contact Us Blog dengan Tampilan CSS Keren

<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>
  • Selesai dan lihat hasilnya.
Cara Membuat Laman Contact Us Blog dengan Tampilan CSS Keren
  • Nah sampai disini untuk cara membuat laman contact us, semoga bermanfaat.
Bagi sobat yang mau bertanya atau diskusi seputar topik ini silahkan bisa gabung di Forum
Previous
« Prev Post

Related Posts

2 komentar

Terima kasih Ilmunya sangat berguna, Laman Contact Us sudah diterapkan pada blog saya...

Reply

sip sama2 gan.. thnkz sudah mampir...

Reply

Posting Komentar