Cara Membuat Halaman Kontak Di Blogger - BBT: Panduan blogger untuk pemula - tutorial jilbab / hijab, download aplikasi, software, kecantikan, kesehatan, silabus, rpp, KTSP, CPNS, mp3, video

Cara Membuat Halaman Kontak Di Blogger

Beberapa hari yang lalu ada yang menanyakan ke saya tentang bagaimana cara membuat halaman kontak di blogger seperti yang ada pada blog ini, yaitu seperti di halaman Kontak.

Karena akhir - akhir ini saya agak sibuk, akhirnya baru sekarang saya bisa menuliskan cara membuat halaman kontak di blogger.

Tampilan kontak forum ini nantinya seperti ini
Cara Membuat Halaman Kontak Di Blogger
Sebenarnya, saya membuat kontak forum seperti itu menggunakan widget kontak yang sudah disediakan oleh pihak blogger, saya hanya meletakkannya pada halaman serta memberi sentuhan css saja.

Jika sobat tertarik ingin membuat halaman kontak seperti itu, silakan baca terus

Cara Membuat Halaman Kontak

Untuk membuat halaman kontak di blogger, maka langkah pertama yang harus kita lakukan adalah memasang widget kontak di blog kita, untuk caranya bisa seperti ini

Buka halaman Template kemudian klik Edit HTML
edit html template blogger
Tambahkan kode CSS Berikut tepat sebelum kode </head>

<style type="text/css">
#arft{display:none !important;}
.ar-contact-page .input-group {margin:0 1.4em 0 0;width:47%;float:left;position:relative;}
.ar-contact-page .input-group i {color:#8b8b8b;font-size:20px;position:absolute;line-height:66px;left:17px;}
.ar-contact-page .input-group input{padding:0 10px;text-indent:40px;margin:0;height:66px;width:99%;line-height:20px;font-size:20px;color:#8b8b8b;border:1px solid #d5d5d5;outline:none;-webkit-border-radius: 1px;-moz-border-radius: 1px;border-radius: 1px;}
.ar-contact-page .second {margin:-1.7em 0 0 0;}.ar-contact-page textarea{padding:10px;margin:1em 0 0 0;width:97%;font-size:20px;color:#8b8b8b;border:1px solid #d5d5d5;-webkit-border-radius: 1px;-moz-border-radius: 1px;border-radius: 1px;}
.arctsend{width:99.8%;height:66px;margin:0.5em 0 0 0;background:#f9f9f9;border:1px solid #d5d5d5;color:#6ebff3;font-size:18px;font-weight:700;cursor:pointer;}
.arctsend:hover {background:#6ebff3;color:#fff;border:0;}
</style>
Kemudian tambahkan kode berikut sebelum kode </body>

<b:section class='widget-bawah-ar' id='arft' showaddelement='yes'>
<b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm' visible='true'>
<b:includable id='main'>
</b:includable>
</b:widget>
</b:section>
Apabila sebelum kode </body> terdapat banyak script tambahan lainnya, silakan pasang kode tersebut sebelum script-script tambahan tersebut, atau di atas kode </body> saja juga tidak masalah.

Setelah kedua kode tersebut sudah dipasang silakan klik tombol Simpan template

Jika setelah sobat mengklik tombol simpan terdapat pemberitahuan yang intinya sudah terdapat ContactForm1 dan harus menggunakan id yang unik, maka itu artinya widget kontak sudah terpasang sebelumnya.

Dan jika sobat tetap ingin menggunakan kode XML yang saya sertakan di atas, maka silakan ganti tulisan ContactForm1 menjadi ContactForm2 lalu setelah itu klik lagi Simpan template.

Apakah sudah selesai ? ...

Belum sob, karena intinya kita ingin membuat halaman kontak di blog kita, maka langkah selanjutnya adalah membuat sebuah halaman yang nantinya akan kita jadikan untuk halaman kontak.

Saya yakin sobat sudah tahu bagaimana cara membuat halaman di blogger.

Silakan buat halaman dengan judul Kontak Kami atau dengan judul lainnya yang sobat inginkan, selanjutnya pada forum isian konten silakan isi dengan kode berikut ini

<div class="ar-contact-page">
<form name="contact-form">
<span class="input-group"><i class="fa fa-user"></i><input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" /></span>
<span class="input-group second"><i class="fa fa-envelope"></i><input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Whats on your mind?" rows="5"></textarea>
<input class="arctsend" id="ContactForm1_contact-form-submit" type="button" value="Kirim Pesan" />
<div style="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>
Silakan tambahkan tulisan lainnya yang sobat mau, dan jika sudah selesai silakan terbitkan halaman tersebut.

Selesai,,, sekarang sobat tinggal menambahkan link halaman kontak tersebut ke menu yang ada di blog sobat, untuk itu silakan baca : Cara Mendapatkan Link/URL Halaman sebelum membuka halaman Cara Membuat Menu Di Blog.

Kenapa icon tidak muncul di halaman kontak saya ?

Untuk icon yang ada pada kolom nama dan email tersebut saya menggunakan icon FontAwesome, dan untuk menampilkan icon tersebut sobat harus memasangnya juga, untuk ini silakan baca Tutorial Cara Memasang Icon Font Awesome di Blogger Loading Cepat + Mudah.

Nah, itulah langkah - langkah yang harus dilakukan untuk membuat halaman kontak di blogger.

Untuk mengubah tampilan formulir kontak tersebut silakan edit kode css atau edit kode css serta html kode yang sudah saya sertakan di atas.

Selamat mencoba, dan semoga bermanfaat.
loading...
Lihat / Tinggalkan Komentar
- All Rights Reserved. Powered by Blogger. Membuat Blog

Terimakasih telah membaca , semoga artikel tentang Cara Membuat Halaman Kontak Di Blogger yang ada di blog ini bermanfaat buat sobat