Cara Mudah Membuat Kontak Form di Blogspot dengan Cepat

Cara Mudah Membuat Kontak Form di Blogspot dengan Cepat
Gimana cara mudah membuat Halaman Kontak, Contact Form atau Form Kontak di Blog Blogspot yang unik, keren, stylish dan enak dipandang?

Baik atau tidaknya sebuah blog ditentukan seberapa lengkap informasi dan layanan yang kita berikan kepada pembaca, salah satunya adalah layanan kontak dimana para pengunjung bisa mengirimkan email untuk bertanya-tanya.

Baca Juga: Pengaruh Mengedit Artikel Blog bagi SEO.

Dengan adanya laman kontak ini, kita bisa dihubungi oleh pihak tertentu yang ingin beriklan di blog, situs atau website kita. Lumayan kan "ongkos" Endorse-nya bisa digunakan untuk beli baju baru dihari raya? ;)

Cara Mudah Membuat Kontak Form di Blogspot dengan Cepat


1. Blogger > Static Page > New Static Page
2. Masukkan judul terlebih dahulu, contoh: Kontak Kami
3. Pilih mode tulis ke "HTML" (bukan compose)
4. Copy dan paste kode dibawah ini ke laman HTML tadi

<form name="contact-form">
Nama<br /><input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value=""/><br/><br/>Email Address <span class="wajib">*</span><br/><input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value=""/><br/><br/>Pesan <span class="wajib">*</span><br/>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br/>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim"/><br/>
<div class="formb"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div>
</div></form><script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '8022617659375683714';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x8022617659375683714','//tipsseokiller.blogspot.co.id/','8022617659375683714');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '8022617659375683714', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
<style type="text/css">
#ContactForm1{display:none}a.showcontent{display:none}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{
width:300px;height:auto;margin:5px auto;padding:10px;background:#fff;color:#666;border:1px solid #ddd;transition:all 0.5s ease-in-out;box-shadow:none;}
#ContactForm1_contact-form-email-message{width:450px;height:175px;margin:5px 0;padding:10px;background:#fff;color:#666;font-family:'Droid Sans',sans-serif;border:1px solid #ddd;transition:all 0.5s ease-in-out;box-shadow:none;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none; border-color: rgba(81,203,238,1);box-shadow: 0 0 5px rgba(81,203,238,0.7)!important;color:#444;background:#fff;}
#ContactForm1_contact-form-submit {font-family:Open Sans Condensed, sans-serif;float:left;border-radius:3px;
background:#07ACEC;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;
padding:5px 10px!important;font-weight:700;font-size:15px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;transition:all 0.4s ease-out;}
#ContactForm1_contact-form-submit:hover {background:#444;}#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:450px;margin-top:35px;}.formb{max-width:22px;text-align:center;width:100%}.wajib{color:red;font-weight:bold}
</style>

5. Simpan dan publikasikan, selamat!

Baca Juga: Cara Melaporkan Artikel Copas ke Google DMCA.

Perhatian Penggunaan Kode Diatas

Jangan sembarangan copy dan paste kode diatas! Ada beberapa kode yang perlu dan harus Anda ubah, yakni angka 8022617659375683714 dan alamat blog blogspot atau custom domain (TLD) yang kita miliki.

Baca Juga: Artikel di Edit Apakah Harus di Re-Fetch as Google Ulang?

Untuk kode 8022617659375683714 ini, Anda bisa mendapatkan atas nama kepemilikan milik Anda pribadi dengan cara melihat dibagian Address Bar browser Anda, tentunya setelah login blogger. Pasti ada kodenya, kok.*

» Terima kasih sudah mau membaca konten Cara Mudah Membuat Kontak Form di Blogspot dengan Cepat. Jika dirasa sangat berguna, mungkin bisa di share oleh para pembaca :)

0 Response to "Cara Mudah Membuat Kontak Form di Blogspot dengan Cepat"

Post a Comment

Silahkan tinggalkan komentar sesuai dengan topik artikel.
Nama komentator dan isi komentar yang mengandung SARA, Iklan/Promo dan menyertakan Link tidak akan dipublikasikan.