Mohon Tunggu Proses Memuat Konten Halaman

Terbaru

14
Tgl. 22 Mei 2013

Cara Memasang Widget Contact Form Di Bawah Kolom Posting Halaman Kontak Sebuah Blog

Sobat Blogger, seperti yang kita tahu bahwasanya apabila kita berkunjung ke sebuah blog, maka salah satu menu yang hampir pasti dapat kita ...

Contoh Formulir Kontak Untuk Pengiriman Email
Sobat Blogger, seperti yang kita tahu bahwasanya apabila kita berkunjung ke sebuah blog, maka salah satu menu yang hampir pasti dapat kita temukan di sana adalah menu yang mengarah ke halaman kontak. Dimana biasanya di halaman ini dicantumkan beberapa informasi terkait dengan kontak, yang diantaranya misalnya adalah informasi mengenai alamat email, nomor telepon, dan atau informasi lain yang berhubungan dengan pengelola blog.

Salah satu maksud dan tujuan dari pembuatan halaman kontak yang mencantumkan beberapa informasi seperti tersebut di atas, tidak lain dan tidak bukan adalah untuk mempermudah seseorang ketika ingin menghubungi admin atau pengelola blog. Dan bahkan dengan maksud untuk lebih mempermudah seseorang dalam mengirimkan pesan, tidak jarang pula admin sebuah blog memanfaatkan layanan dari pihak ketiga untuk memasang formulir pengiriman email di halaman kontak. Akan tetapi pada kenyataannya bisa jadi cara tersebut belumlah begitu efektif karena jumlah pesan yang dapat dikirim dalam suatu waktu sifatnya hanya terbatas pada beberapa kali pengiriman pesan saja.

Nah, terkait dengan hal di atas sepertinya untuk saat ini kita tidak perlu lagi repot-repot memanfaatkan layanan dari pihak ketiga ketika ingin memberikan kemudahan pada pengunjung untuk mengirimkan pesan via email. Hal ini disebabkan karena untuk sekarang ini Blogger sendiri telah menyediakan widget baru yang dapat dipasang dan kemudian dimanfaatkan untuk mengirimkan pesan secara cepat ke alamat email admin atau pengelola blog. Dimana dalam pemasangannya pun terbilang cukup mudah karena yang perlu dilakukan hanyalah dengan menambahkan gadget tersebut melalui halaman ‘Layout/Tata Letak’ dan kemudian menambahkan widget ‘Contact Form'/Formulir Kontak’ seperti yang tampak pada gambar di bawah ini, sehingga akhirnya formulir kontak pun secara otomatis akan ditampilkan pada halaman blog yang kita kelola.
Tampilan Tambahkan Gadget Pada Blogger
Sumber gambar: blogger.com

Akan tetapi setelah kita menambahkan widget tersebut, yang menjadi masalah sekarang adalah bahwasanya formulir kontak akan selalu ditampilkan pada setiap halaman sesuai dengan letak pemasangannya (sebagai contoh misalnya terletak pada area sidebar blog). Sehingga tentu saja hal yang seperti ini masih saja kurang efektif karena pada kenyataannya telah terdapat halaman khusus yang memberikan informasi tentang kontak yang dapat dihubungi.

Lantas bagaimana solusinya, apakah kita harus menghapus halaman kontak yang sebelumnya sudah ada? Jawabannya tentu saja tidak, karena ada sebuah solusi yang dapat digunakan untuk mengatasinya yaitu dengan cara memasang widget tersebut di bawah kolom posting halaman kontak. Dimana dengan cara pemasangan seperti ini, maka nantinya widget tersebut hanya akan ditampilkan di bawah bidang posting halaman kontak saja dan tidak akan pernah ditampilkan di halaman yang lain. Namun demikian perlu diketahui bahwa teknik pemasangan widget seperti ini tentu saja tidaklah semudah seperti pemasangan widget yang dilakukan melalui ‘Layout/Tata Letak’, karena teknik pemasangannya dilakukan secara langsung dengan menambahkan rangkaian kode yang digunakan ke dalam template.

Oke, selanjutnya apabila Sobat ingin melakukan pemasangan widget ‘Formulir Kontak’ dengan menggunakan teknik ini, maka urutan kerja yang perlu dilakukan adalah sebagai berikut.

Pertama, buka editor template.

Kedua, sisipkan CSS berikut ini dalam area skin. Dalam hal ini tepatnya adalah persis di atas ]]></b:skin>.
.contact-form-widget {
  height: auto;
  margin: 0px;
  max-width: 100%;
  padding: 0px;
  width: 100%;
}
.form{
  padding:4px 6px 4px 4px;
}
.contact-form-name, .contact-form-email{
  max-width: 50% !important;
  width: 50% !important;
}
.contact-form-email-message {
  width:100% !important;
  max-width: 100% !important;
  min-height: 175px;
}
.mobile .contact-form-email-message {
  width: 98.5% !important;
  max-width: 98.5% !important;
}
.contact-form-button-submit {
  margin: 10px 0px 6px 0px;
  float: right;
}


Ketiga, lompat ke widget ‘Blog1’ dan kemudian sisipkan rangkaian kode berikut ini tepat di bawah tag penutup untuk main section.
<b:section class='formulir-kontak' id='formulir-kontak' maxwidgets='1' showaddelement='no'>
  <b:widget id='ContactForm1' locked='true' mobile='yes' title='Formulir Kontak' type='ContactForm'>
    <b:includable id='main'>
      <b:if cond='data:blog.url == &quot;http://eltelu.blogspot.com/2012/10/tata-cara-menghubungi-admin-eltelu.html&quot;'>
        <b:include name='formulir'/>
      <b:else/>
        <b:if cond='data:blog.url == &quot;http://eltelu.blogspot.com/2012/10/tata-cara-menghubungi-admin-eltelu.html?m=0&quot;'>
          <b:include name='formulir'/>
        <b:else/>
          <b:if cond='data:blog.url == &quot;http://eltelu.blogspot.com/2012/10/tata-cara-menghubungi-admin-eltelu.html?m=1&quot;'>
            <b:include name='formulir'/>
          </b:if>
        </b:if>  
      </b:if>
    </b:includable>
    <b:includable id='formulir'>
      <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:includable>
  </b:widget>
</b:section>

Keterangan:
Apabila dalam template ternyata tidak memiliki widget ‘Blog1’ dan atau jika Anda mengalami kesulitan dalam menempatkan rangkaian kode tersebut, maka carilah bagian berikut ini dan kemudian sisipkan rangkaian kode di atas di tempat yang saya tandai dengan keterangan <!-- LETAKKAN RANGKAIAN KODE TAMBAHAN PADA BAGIAN INI –>.
<b:section class='main' id='main' showaddelement='no'>
  <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>...</b:widget>
</b:section>
<!-- LETAKKAN RANGKAIAN KODE TAMBAHAN PADA BAGIAN INI –>


Sebelum menyisipkan rangkaian kode di atas, jangan lupa untuk mengganti http://eltelu.blogspot.com/2012/10/tata-cara-menghubungi-admin-eltelu.html terlebih dulu dengan URL halaman kontak pada blog yang Anda kelola. Ingat, bahwasanya tanda ?m=0 dan ?m=1 yang terdapat pada URL kedua dan ketiga harus tetap disertakan. Sehingga bila bila URL di atas adalah URL yang pertama, maka URL yang kedua adalah http://eltelu.blogspot.com/2012/10/tata-cara-menghubungi-admin-eltelu.html?m=0 dan URL yang ketiga adalah http://eltelu.blogspot.com/2012/10/tata-cara-menghubungi-admin-eltelu.html?m=1.

Keempat, simpan template.

Selanjutnya untuk melakukan pengecekan bukalah halaman kontak yang terdapat pada blog Anda, karena widget formulir kontak hanya akan ditampilkan di halaman yang sesuai dengan URL yang telah dimasukkan. Dan apabila hasil tampilannya masih kurang sesuai dengan desain halaman blog Anda, maka silakan tambahkan CSS baru (sesuai dengan kreatifitas Anda) untuk memperindah tampilan formulir kontak tersebut.

Sedangkan bila Anda ingin melihat contoh dari penerapan teknik tersebut, maka silakan klik di sini untuk membuka halaman kontak yang terdapat di blog ini.

Semoga berguna serta bermanfaat, dan apabila Anda mengalami kendala atau kesulitan ketika menerapkan teknik tersebut, maka Anda dapat mengajukan pertanyaan terkait dengan kesulitan atau kendala yang Anda alami dengan cara mengeposkan komentar dalam artikel ini.
Salam.


Ad

Suka? Bagikan artikel ini kepada teman - jaringan Anda.
Label: , , .
Silakan klik di sini untuk mengeposkan komentar Anda. Jika Anda ingin membaca artikel lain yang terdapat pada blog ini, maka dapat Anda lakukan dengan cara membuka laman daftar isi. Catatan: Komentar balasan hanya diprioritaskan untuk pertanyaan dan atau pernyataan yang diposkan dengan memakai formulir komentar Blogger.
Admin
Terdapat 14 komentar untuk artikel ELTELU yang berjudul Cara Memasang Widget Contact Form Di Bawah Kolom Posting Halaman Kontak Sebuah Blog .
22/05/13 15.22 O

terima kasih mas, makin menambah cantik di kontak blog hehehehe

23/05/13 03.10 O

mantap kangjangan lupa mampir handiljawa.blogspot.com

23/05/13 11.09 O

@adris irawanOke... Sama-sama Sob.

23/05/13 11.10 O

@Iful Famour Man™Terimakasih Sobat. :)

Anonim
25/05/13 10.29 O

wah, ternyata ada widget baru ya
ternyata tinggal pasang
makasih infonya

25/05/13 12.18 O

@informasiterbarublogSama-sama Sobat.

Betul sekali. Sekarang memang Blogger telah menyediakan widget contact form yang dapat kita pasang secara mudah. :)

25/05/13 20.18 O

Wahh.. baru tahu kalau blogger menyediakan fitur formulir kontak widget, maklum jarang oneline, Tapi apa bisa emailnya untuk menerima pesan diganti selain email yg di pakai untuk login blog..?

25/05/13 22.29 O

@Lamet. RKalau menurut sepengetahuan saya, pesan akan terkirim ke email yang dipakai untuk login, Sob.

Sedangkan kalau misalkan diganti email-nya, sampai saat ini saya sendiri juga belum pernah mencobanya.

Anonim
19/06/13 23.18 O

ijin coba dulu mas walaupun agak puyeng dikit ngelihat kodenya

20/06/13 17.08 O

@situs-downloadgratisSilakan bila Sobat ingin mencoba teknik yang saya uraikan di atas. :)

02/07/13 18.13 O

di blog ane ada, pada tab 'Lompat ke widget' ada Blog1
nah, terus ane gak tahu mana tab penutup main action itu yang mana??

03/07/13 02.39 O

@Denz AhmadTepatnya adalah seperti yang saya uraikan dalam keterangan untuk langkah yang ketiga, Sob.

14/07/13 19.01 O

terus dari kontak form diatas terintegrasi kemana??

15/07/13 00.19 O

@Tri hartoContat Form Blogger terintegrasi dengan akun GMail, Sob. Sehingga setiap pesan yang dikirimkan melalui widget contact form akan terkirim secara otomatis ke akun email (GMail) yang biasanya dipakai untuk login ke Blogger.

o

  • .Ragam Tumbuhan
  • .Unik & Langka
  • .Aneka Buah
  • .Produk Sederhana
  • .Karya Seni
  • .Tempat Wisata
  • .Ragam Kegiatan
  • .Aneka Bunga
  • .Hewan & Serangga
GALERI
KIRIM MASUKAN
E L T E L U
Semar Bingung's Weblog