✓ Cara Membuat Halaman Kontak Pada Blogger

Cara Membuat Halaman Kontak Pada Blogger

Cara Membuat Halaman Kontak Pada Blogger

Cara Membuat Halaman Kontak Pada Blogger - Jika anda mengunjungi sebuah blog, pasti pernah menemui sebuah menu navigasi bernama kontak, hubungi kami, atau sejenisnya. Sesuai namanya, menu navigasi ini akan mengantarkan pengunjung menuju sebuah halaman informasi tentang bagaimana cara menghubungi pengelola blog tersebut.

Apabila anda berencana membuat sebuah blog, anda pun wajib membuat halaman kontak ini. Selain sebagai sarana komunikasi antara pengelola dengan pengunjung blog, halaman kontak juga menjadi salah satu syarat jika anda ingin memonetisasi blog anda dengan adsense atau sejenisnya.

Pada informasi sebelumnya, saya telah menuliskan tentang cara membuat blog dengan blogger. Pada informasi kali ini, saya akan berbagi cara membuat halaman kontak pada blogger.

Manfaat Halaman Kontak

Seperti tulisan saya di atas, halaman kontak blog akan memudahkan komunikasi antara pengunjung dan pengelola blog. Hal ini tentu dapat meningkatkan reputasi blog di mata pengunjung.

Pengunjung dapat meninggalkan pesan baik berupa kritik, saran, atau permintaan kerja sama melalui halaman kontak blog. Dengan adanya halaman kontak, pengelola juga dapat dengan mudah membaca pesan dari pengunjung dan meresponnya.

Berbeda dengan pesan pada kotak komentar yang dapat dilihat oleh semua orang, pesan melalui halaman kontak bersifat lebih rahasia. Hal ini tentu akan lebih menjaga privasi karena hanya pengunjung yang mengirimkan pesan dan pengelola blog yang mengetahui isi pesan.

Jenis Halaman Kontak

Secara umum, ada dua jenis halaman kontak blog yang dapat digunakan yaitu halaman kontak tanpa formulir kontak, dan halaman kontak dengan formulir kontak. Anda dapat memilih salah satunya, atau menggunakan keduanya.

Halaman kontak tanpa formulir kontak biasanya berisi informasi alamat email, no.hp/wa, dan akun media sosial. Kelemahan halaman kontak blog jenis ini adalah tersebarnya informasi kontak yang dapat menundang penipu, spammer dan oknum yang tidak bertanggung jawab.

Halaman kontak yang lain adalah yang dilengkapi dengan formulir kontak. Formulir ini biasanya berisi tiga kolom yaitu: nama, email dan pesan, serta terdapat pula tombol kirim. Untuk kolom nama biasanya bersifat opsional namun untuk email dan pesan biasanya bersifat wajib dilengkapi sebelum pesan dapat dikirimkan.

Saya pribadi lebih memilih menggunakan halaman kontak yang dilengkapi dengan formulir kontak. Hal ini karena pesan yang terkirim melalui formulir kontak dapat langsung masuk pada email administrator blogger tanpa harus menampilkan email secara langsung. Hingga dapat mengurangi penyalahgunaan email oleh para oknum yang tidak bertanggung jawab.

Cara Membuat Halaman Kontak Pada Blogger

Setelah mengetahui manfaat dan jenis halaman kontak blogger, maka sekarang saatnya membuat halaman kontak pada blogger dengan formulir kontak. Untuk membuat halaman kontak blogger silahkan buat halaman baru terlebih dahulu dengan cara:
  1. Pada dashboard blogger pilih menu Page/Halaman - pilih new page/halaman baru - ketik judul halaman misalnya halaman kontak, hubungi saya, kontak kami, dan sejenisnya.
  2. Pada bagian konten, pilih tampilan menulis dan isikan konten anda dengan kalimat seperti "Silahkan hubungi kami jika ada hal yang perlu didiskusikan, melalui formulir kontak berikut ini", atau kalimat sejenisnya.
  3. Silahkan beralih pada tampilan html dan isikan kode skrip sesuai yang anda inginkan (Pilih skrip sesuai template yang anda gunakan).
  4. Pilih publish/publikasikan jika sudah selesai.

Halaman Kontak Template Viomagz dan Linkmagz

<div class="contact-form-widget"> <form name="contact-form"> <span class="ctitles">Nama :</span> <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" type="text" value="" /> <span class="ctitles">Alamat Email <span class="swajib">*</span> :</span> <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" type="text" value="" /> <span class="ctitles">Isi Pesan <span class="swajib">*</span> :</span> <textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="10"></textarea> <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Kirim" /> <br /> <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> </form> </div> <script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>

Halaman Kontak Template Median Ui dan Fletro Pro

<style type="text/css">
/* Widget Contact Form */
.ContactForm{font-size:14px;margin-top:30px;max-width:480px}
.ContactForm form > *:not(:last-child){margin-bottom:15px}
.ContactForm label{display:inline-block;margin-bottom:8px}
.ContactForm div p{display:flex;align-items:center;margin-bottom:0}
</style>
<div class="ContactForm" id="ContactForm1">
<form name="contact-form">
<div class="input-area">
<label for="ContactForm1_contact-form-name">Nama Lengkap</label><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" type="text" value="" /></div>
<div class="input-area">
<label for="ContactForm1_contact-form-email">Email *</label><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" type="text" value="" /></div>
<div class="input-area">
<label for="ContactForm1_contact-form-email-message">Pesan *</label><textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message"></textarea></div>
<div class="input-area">
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Kirim Pesan" /></div>
<div class="notif-area">
<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>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js"></script>
<script>//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'XXXXXXXXXX';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3dXXXXXXXXXX','//alamatbloganda.com/','XXXXXXXXXX');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Mengirim...', 'contactFormMessageSentMsg': 'Pesan anda telah terkirim.', 'contactFormMessageNotSentMsg': 'Pesan anda tidak dapat terkirim, silahkan coba lagi.', 'contactFormInvalidEmailMsg': 'Masukkan alamat email yang benar.', 'contactFormEmptyMessageMsg': 'Kolom pesan tidak boleh kosong.', 'title': 'Contact Form', 'blogId': 'XXXXXXXXXX', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]></script>

Halaman Kontak Template Igniplex 

 <div class="top"><br /></div><div class="top"><br /></div><div class="top"><br /></div><form id="kontak" name="contact-form"><div class="top"><input
  id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text"/><input
  id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email" type="text"/> </div> <textarea cols="25"
  id="ContactForm1_contact-form-email-message" name="email-message"
  placeholder="Isi pesan"
  rows="5"></textarea> <input
  id="ContactForm1_contact-form-submit" type="button" class="ripple"
  value="Kirim Pesan"/> <div class="bottom"> <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>//<![CDATA[ if
  (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload
  != null) { window['blogger_templates_experiment_id'] =
  "templatesV1";window['blogger_blog_id'] = 'XXXXXXXXXX';BLOG_attachCsiOnload('');
  }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3dXXXXXXXXXX','//alamatbloganda.blogspot.com/','XXXXXXXXXX'); _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': 'XXXXXXXXXX', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email',
  'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl':
  'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]></script>
Untuk halaman kontak template median ui, fletro pro, dan igniplex ganti semua kode XXXXXXXXXX yang berjumlah 4 buah dengan kode ID blog anda (lihat pada bagian URL blog blogger.com/blog/post/edit/XXXXXXXXXX). Ganti juga tulisan alamatbloganda.com dengan URL blog anda tanpa www (contoh: bahanbacaan.com).

Halaman Kontak Bahanbacaan.com

Silahkan hubungi kami jika ada hal yang perlu didiskusikan melalui formulir berikut ini.
Kami akan memberikan jawaban sesegera mungkin yang kami mampu.<div><br/></div>

<style type="text/css">
/* Widget Contact Form */
.contact-form-widget {
}
.contact-form-success-message, .contact-form-error-message {
    background: #f9edbe;
    border: 0 solid #f0c36d;
    font-size: 14px;
    text-align: center;
    max-width: 500px;
    border-radius: 3px;
}
.contact-form-success-message-with-border, .contact-form-error-message-with-border {
    background: #f9edbe;
    border: 1px solid #f0c36d;
    font-size: 14px;
    text-align: center;
    max-width: 600px;
    border-radius: 3px;
	box-sizing: border-box;
	padding: 5px 10px;
}
.contact-form-cross {
    height: 11px;
    margin: 0 5px;
    vertical-align: -8.5%;
    width: 11px;
}
.contact-form-email, .contact-form-name {
	color: inherit;
	height: 40px;
    margin-top: 5px;
    max-width: 300px;
    width: 100%;
    padding: 0 15px;
    border-radius: 3px;
    border: 1px solid #cacaca;
    box-sizing: border-box;
}
.contact-form-email-message {
	color: inherit;
    margin-top: 5px;
    vertical-align: top;
    max-width: 600px;
    width: 100%;
    border-radius: 3px;
    border: 1px solid #cacaca;
    padding: 15px;
}
.contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover {
	outline: none;
	border: 1px solid #1B699D;
}
.contact-form-email:focus, .contact-form-name:focus, .contact-form-email-message:focus {
    outline: none;
	border: 1px solid #1B699D;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
	background: #f8f8f8;
}
.contact-form-button {
	display: block;
	font-size: 14px;
    line-height: 24px;
    padding: 5px 20px;
	margin: 30px 0;
    text-align: center;
    border: none;
    background: #1B699D;
    color: #fff;
    border-radius: 3px;
	font-weight: bold;
}
.contact-form-button:hover, .contact-form-button.hover {
	cursor: pointer;
	outline: none;
	opacity: .85;
}
.contact-form-button.focus, .contact-form-button.right.focus, .contact-form-button.mid.focus, .contact-form-button.left.focus {
    outline: none;
}
.contact-form-button-submit:focus, .contact-form-button-submit.focus {
	outline: none;
	opacity: .85;
}
.swajib {
	font-weight: bold;
	color: #e85e5e;
}
.ctitles {
    font-weight: bold;
    display: block;
    margin: 30px 0 0;
}
</style>
<div class="contact-form-widget"> <form name="contact-form"> <span class="ctitles">Nama :</span> <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" type="text" value="" /> <span class="ctitles">Email <span class="swajib">*</span> :</span> <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" type="text" value="" /> <span class="ctitles">Pesan <span class="swajib">*</span> :</span> <textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="10"></textarea> <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Kirim" /> <br /> <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> </form> </div> 
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js"></script>
<script>//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '4258616926754066661';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4258616926754066661','//bahanbacaan.com/','4258616926754066661');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Mengirim...', 'contactFormMessageSentMsg': 'Pesan anda telah terkirim.', 'contactFormMessageNotSentMsg': 'Pesan anda tidak dapat terkirim, silahkan coba lagi.', 'contactFormInvalidEmailMsg': 'Masukkan alamat email yang benar.', 'contactFormEmptyMessageMsg': 'Kolom pesan tidak boleh kosong.', 'title': 'Contact Form', 'blogId': '4258616926754066661', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]></script>

Silahkan ganti semua kode 4258616926754066661 yang berjumlah 4 buah dengan kode ID blog anda (lihat pada bagian URL blog blogger.com/blog/post/edit/XXXXXXXXXX). Ganti juga tulisan bahanbacaan.com dengan URL blog anda tanpa www.

Demikian informasi tentang Cara Membuat Halaman Kontak Pada Blogger. Semoga bermanfaat.




LihatTutupKomentar
Cancel

Komentar anda akan ditinjau terlebih dahulu sebelum dapat diterbitkan.