Cara Membuat Halaman Kontak Di Blogger

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

Karena simpulan - simpulan ini saya agak sibuk, balasannya gres sekarang saya mampu menuliskan cara membuat halaman kontak di blogger.

Tampilan kontak forum ini nantinya menyerupai ini

Sebenarnya, saya membuat kontak forum menyerupai itu menggunakan widget kontak yang sudah disediakan oleh pihak blogger, saya hanya meletakkannya pada halaman serta memberi sentuhan css saja.

Jika sahabat tertarik ingin membuat halaman kontak menyerupai itu, silakan baca terus ☺

Cara Membuat Halaman Kontak

Untuk membuat halaman kontak di blogger, maka langkah pertama yang harus kita lakukan ialah memasang widget kontak di blog kita, untuk caranya mampu menyerupai ini

Buka halaman Template kemudian klik Edit HTML

Tambahkan arahan CSS Berikut sempurna sebelum arahan </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 arahan berikut sebelum arahan </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 arahan </body> terdapat banyak script pelengkap lainnya, silakan pasang arahan tersebut sebelum script-script pelengkap tersebut, atau di atas arahan </body> saja juga tidak masalah.

Setelah kedua arahan tersebut sudah dipasang silakan klik tombol Simpan template

Jika setelah sahabat 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 jikalau sahabat tetap ingin menggunakan arahan XML yang saya sertakan di atas, maka silakan ganti goresan pena ContactForm1 menjadi ContactForm2 lalu setelah itu klik lagi Simpan template.

Apakah sudah selesai ? ...

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

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

Silakan buat halaman dengan judul Kontak Kami atau dengan judul lainnya yang sahabat inginkan, selanjutnya pada forum isian konten silakan isi dengan arahan 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 goresan pena lainnya yang sahabat mau, dan jikalau sudah selesai silakan terbitkan halaman tersebut.

Selesai,,, sekarang sahabat 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 sahabat 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 arahan css atau edit arahan css serta html arahan yang sudah saya sertakan di atas.

Selamat mencoba, dan supaya bermanfaat.