Cara memasang widget Contact Form di halaman statis Blogger

Sekarang tersedia widget baru yaitu Contact Form yang dibuat oleh tim dari Blogger sendiri, berfungsi menambahkan contact form di blog blogspot. Dan karena ini sebuah widget maka sudah sewajarnya kalau kita hanya bisa memasang widget ini di region-region tertentu pada template, misal di sidebar, footer dll. Lalu bagaimana memasang widget Contact Form ini di halaman statis Blogger? ada bermacam-macam versi cara pemasangannya, misal dengan meng-copy kode html yang dihasilkan oleh widget tersebut kemudian mem-paste di halaman statis, setelah itu menyembunyikan contact form yang terpasang di region dengan CSS,
misal :

.widget.ContactForm {

display: none;

}

Tapi dengan cara di atas tidaklah efektif dan bisa saja mengurangi tingkat kegantengan kita menurut Google karena banyak kode html semacam <input>, <span>, <div> tetap ada di region, dan mubazir juga me-render contact form tapi tidak digunakan dan malah disembunyikan.

Berikut langkah-langkah menambahkan widget Contact Form di halaman statis Blogger yang SEO friendly:
1. Pertama tambahkan widget Contact Form Blogger. Masuk ke Setelan -> Tata Letak -> Tambahkan Gadget -> Gadget Lainnya -> Formulir Kontak. Lihat gambar 1:

2. Buat laman baru atau gunakan laman yang sudah ada dan paste kode berikut (pastikan editornya menggunakan HTML dan bukan Compose) :

<style type="text/css">
.contact-form-name, .contact-form-email, .contact-form-email-message {
  max-width: 65%;
  width: 100%;
}
</style>
<div class="form">
  <form name="contact-form">
    Name
    <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
    <span style="font-size: 86%;"><em>Enter your name.</em></span>

    Email <span style="font-weight: bolder; color: red;">*</span>
    <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
   
 <span style="font-size: 86%;"><em>A valid e-mail address. 
The e-mail address will not made public.</em></span>

    Message <span style="font-weight: bolder; color: red;">*</span>
   
 <textarea class="contact-form-email-message" cols="25" 
id="ContactForm1_contact-form-email-message" name="email-message" 
rows="5"></textarea>
    <span style="font-size: 86%;"><em>Please write your message clearly.</em></span>

   
 <input class="contact-form-button contact-form-button-submit" 
id="ContactForm1_contact-form-submit" type="button" value="Send" />

    <div style="max-width: 222px; text-align: center; width: 100%;">
      <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div>
      <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div>
    </div>
  </form>
</div>

Kode diatas bisa dirubah-rubah sesuai selera, saya menambahkan petunjuk pengisian seperti :

<span style="font-size: 86%;"><em>Enter your name.</em></span>

Saya juga merubah ukuran inputnya dengan inline CSS, ukuran defaultnya 220px.

<style type="text/css">
.contact-form-name, .contact-form-email, .contact-form-email-message {
  max-width: 65%;
  width: 100%;
}
</style>

3. Sekarang kita akan menghapus kode yang tidak diperlukan di template Blogger. Masuk ke Template -> Edit HTML -> Lompat ke widget -> Pilih ContactForm1. Lihat gambar 2:

4. Expand tag widgetnya dan seleksi seperti gambar 3 berikut :

5. Hapus sehingga hanya tersisa seperti kode di bawah ini, dan kemudian simpan template.

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

Sekarang coba kunjungi blog Anda dan periksa kode yang dihasilkan, yang tersisa di region hanyalah kode berikut:

<div class="widget ContactForm" id="ContactForm1">
</div>

Kebetulan hari ini membuat contact form di blog saya jadi sekalian ditulis saja. Lihat demonya di sini
Note: pastikan ketika proses pengeditan gunakan opsi Press "Enter" for line breaks.
Terima kasih atas kunjungan nya di blog saya renoforlife , salam blogger :D

Title : Cara memasang widget Contact Form di halaman statis Blogger
Description : Sekarang tersedia widget baru yaitu Contact Form yang dibuat oleh tim dari Blogger sendiri, berfungsi menambahkan contact form di blog b...

Pedidos

clean-5

Post-it Widget

Sample text

Total Pageviews

Featured Posts

Kerajaan

ads

Backlink

Kerajaan

Subscribe

About

Blogger templates

Random Post

Pages

Social Icons

Popular Posts

Popular Posts

Cara memasang widget Contact Form di halaman statis Blogger

0 Response to "Cara memasang widget Contact Form di halaman statis Blogger "

Posting Komentar