بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْمِ
اَهْلاًوَسَهْلاً
السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِوَبَرَكَاتُهُ Hello sobat pengunjung semuanya; Bagaimana kabar sobat saat ini? Mudah-mudahan selalu dalam keadaan sehat sejahtera. Aamiin.
Oya pertemuan kita kali ini Bang Joni ingin membahas cara mudah Membuat Form Contact Us Blogger.
Ngomong-ngomong soal Form Contact Us Blog tidak ubahnya seperti kita membahas contact person di dunia nyata sana.
Sebagaimana yang sobat ketahui banyak orang rela merogoh koceknya cukup dalam demi untuk memiliki contact person. Itu mereka lakukan karena biar mereka gampang berkomunikasi dengan sanak/saudara dan kaum/kerabatnya.
Berkomunikasi ini tidak hanya dengan sanak/saudara saja. Pada semua orang kita butuh komunikasi. Kalau dia seorang penjual barang atau jasa tentu para pelanggan dan calon pelanggannya butuh berkomunikasi dengan dia.
Ya mungkin sebelum pelanggan atau calon pelanggan itu datang ketempat penjual membeli barang dia ingin bertanya sesuatu yang menurutnya perlu ditanyakan. Biar was-was dihatinya hilang.
Kalau sudah tidak ada lagi keraguan dan sudah yakin mau membeli barang yang ada di situ tentu dia lansung datang membeli barang tersebut.
Nah kalau sudah seperti itu tentu si penjual tersebut akan menyediakan alat komunikasinya agar pelanggan dan calon pelanggan tersebut tidak kecewa.
Karena bagi seorang usahawan menjaga pelanggan itu agar tidak kecewa suatu hal yang wajib.
Tentu seperti itu juga dengan blog yang kita kelola, Kalau blog kita tidak untuk usaha menghasilkan uang, namun Form Contact ini mesti ada juga. walaupun tidak wajib hukumnya.
Tapi kalau sobat mau menjadikan blognya sebagai salah satu sumber kemasukkan Form Contact ini wajib ada. Apa lagi kalau blog sobat mau didaftarkan menjadi pakner GA (Google ApSense)
Ok, sekarang mari simak tutorial di bawah ini dengan seksama.
blogger.com > Opsi lainnya > tata Letak > Tambahkan Gadget > Gadget lainnya > Formulir Kontak
Kalau sobat sudah mengklik Formulir Kontak tampil seperti ini:
Segera sobat klik simpan. Begitu anda klik simpan maka Selesailah memasang widget contact ke blog.
Ok, langkah pertama anda lakukan untuk membuat halaman statis tersebut adalah:
Klik blogger > Opsi lainnya > laman > Laman baru button.
Langkah kedua yang harus sobat kerjakan adalah sebagai berikut:
Selesailah pembuatan halaman statis contact blogger.
Ok, silahkan pilih seperti apa yang sobat inginkan menampilkan link halaman itu keblog anda.
Berikut ini pilihan yang dapat sobat pilih:
Untuk mengedit template secara offline gunakan Notepad++.
Catatan. Kode seperti ini
pada template blog sobat
Baca juga Cara-Mudah-Mengatasi-Duplikat-Konten-Blogger
Demikianlah cara mudah membuat Form contact blogger. Mudah-mudahan bermanfaat.
Kalau ada yang mau sobat diskusikan silahkan tuliskan pada kolom komentar di bawah.
اَهْلاًوَسَهْلاً
السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِوَبَرَكَاتُهُ Hello sobat pengunjung semuanya; Bagaimana kabar sobat saat ini? Mudah-mudahan selalu dalam keadaan sehat sejahtera. Aamiin.
Oya pertemuan kita kali ini Bang Joni ingin membahas cara mudah Membuat Form Contact Us Blogger.
Ngomong-ngomong soal Form Contact Us Blog tidak ubahnya seperti kita membahas contact person di dunia nyata sana.
Sebagaimana yang sobat ketahui banyak orang rela merogoh koceknya cukup dalam demi untuk memiliki contact person. Itu mereka lakukan karena biar mereka gampang berkomunikasi dengan sanak/saudara dan kaum/kerabatnya.
Berkomunikasi ini tidak hanya dengan sanak/saudara saja. Pada semua orang kita butuh komunikasi. Kalau dia seorang penjual barang atau jasa tentu para pelanggan dan calon pelanggannya butuh berkomunikasi dengan dia.
Ya mungkin sebelum pelanggan atau calon pelanggan itu datang ketempat penjual membeli barang dia ingin bertanya sesuatu yang menurutnya perlu ditanyakan. Biar was-was dihatinya hilang.
Kalau sudah tidak ada lagi keraguan dan sudah yakin mau membeli barang yang ada di situ tentu dia lansung datang membeli barang tersebut.
Nah kalau sudah seperti itu tentu si penjual tersebut akan menyediakan alat komunikasinya agar pelanggan dan calon pelanggan tersebut tidak kecewa.
Karena bagi seorang usahawan menjaga pelanggan itu agar tidak kecewa suatu hal yang wajib.
Tentu seperti itu juga dengan blog yang kita kelola, Kalau blog kita tidak untuk usaha menghasilkan uang, namun Form Contact ini mesti ada juga. walaupun tidak wajib hukumnya.
Tapi kalau sobat mau menjadikan blognya sebagai salah satu sumber kemasukkan Form Contact ini wajib ada. Apa lagi kalau blog sobat mau didaftarkan menjadi pakner GA (Google ApSense)
Ok, sekarang mari simak tutorial di bawah ini dengan seksama.
Cara Mudah memasang Widget Form Contact
Untuk memasang widget Form Contact di blogger tidak susah. Silahkan sobat blogger ikuti langkah-langkah ini klik:blogger.com > Opsi lainnya > tata Letak > Tambahkan Gadget > Gadget lainnya > Formulir Kontak
Kalau sobat sudah mengklik Formulir Kontak tampil seperti ini:
Segera sobat klik simpan. Begitu anda klik simpan maka Selesailah memasang widget contact ke blog.
Cara Mudah membuat Halaman statis contact
Setelah berhasil sobat tadi memasang widget contact keblognya, sekarang anda harus membuat sebuah halaman statis untuk anda jadikan halaman Form Contact blog.Ok, langkah pertama anda lakukan untuk membuat halaman statis tersebut adalah:
Klik blogger > Opsi lainnya > laman > Laman baru button.
Langkah kedua yang harus sobat kerjakan adalah sebagai berikut:
- Pastikan Mode html bukan Compose.
Untuk sobat blogger tunanetra, Cara menetahui itu mode html adalah perhatikan text di atas kolom tempat menulis artikel.
Di atas kolom text itu ada tulisan mode html. Kalau tulisan itu ada insyaallah sudah benar anda berada pada mode html. - pada kolom text artikel silahkan sobat tuliskan kata pengantar sebelum sobat kopas kode html di bawah ini.
Kata pengantarnya terserah anda apa saja boleh anda tuliskan asalkan jelas maksudnya.
Setelah anda rasa cukup kata pengantarnya, kopylah kode di bawah ini. pastekan tepat di bawah text pengantar tadi.<form name="contact-form"><span> Tuliskan nama Anda</span><br />
<input id="ContactForm1_contact-form-name" nama="name" size="30" type="text" value="" /><br />
<br />
<span> Masukkan Alamat Email <span style="color: #f56954; font-size: x-small; font-weight: bold;">Anda</span></span> <br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><br />
<br />
<span> Pesan <span style="color: #f56954; font-size: x-small; font-weight: bold;">Anda</span></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 style="max-width: 222px; text-align: center; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form><style scoped="" type="text/css">
#comments,.post_meta,#blog-pager {display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all
0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;transition:all
0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0
0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit{float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!Anda;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all
.8s ease}
#ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
.post-body input {width:initial;}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style> - Klik link Deskripsi Penelusuran
pada kolom text yang ada silahkan sobat tuliskan Deskripsi Penelusuran halaman contact blognya.
Setelah sobat selesai menuliskan Deskripsi Penelusuran tersebut klik selesai button. - Klik link pilihan
Pada pilihan Komentar pembaca sobat centang Jangan bolehkan, sembunyikan yang ada, terus lansung klik simpan button. - Terakhir sobat isi kolom judul yang ada dibagian atas halaman ini.
untuk judul isilah dengan tulisan contact atau kontak kami. Terus klik Publikasikan button.
Selesailah pembuatan halaman statis contact blogger.
Cara menampilkan halaman statis contact blog
Setelah sobat berhasil menjalankan langkah demi langkah di atas, sekarang tentu sobat ingin menampilkan link halaman tersebut pada beranda blog.Ok, silahkan pilih seperti apa yang sobat inginkan menampilkan link halaman itu keblog anda.
Berikut ini pilihan yang dapat sobat pilih:
- Menampilkan laman dengan widget
Untuk menampilkan halaman statis contact blog dengan widget sobat harus memasang widget laman. Cara memasang widget laman silahkan klik:
blogger.com > Tata Letak > Tambahkan Gadget > laman
Nah di sini silahkan sobat centangi contact terus klik simpan button. Selesai. Selamat Halaman contact blog anda sudah bisa dikunjungi. - Menampilkan link halaman contact di menu navigasi
untuk menampilkan link pada menu navigasi atau Navigation sobat harus sisipkan url link contact itu ketemplate blognya.
Silahkan sobat edit template blognya dengan cara klik:
blogger.com > Opsi lainnya >template > Cadangkan / Pulihkan > Unduh template lengkap
mari kita download dulu templatenya sebelum kita edit. Gunanya, Kalau nanti terjadi hal yang tidak diinginkan kita bisa unggah lagi template yang sudah didownload tadi.
Kalau template sudah terdownload silahkan klik tutup dialog.
Sekarang klik Edit HTML. Kemudian sobat cari kode html seperti ini:<li><a href='#' itemprop='url'><span itemprop='name'>Contact</span></a></li>
tanda pagar yang diapit oleh tanda apostrof seperti ini: '#' ganti dengan url contact yang sudah sobat buat tadi, untuk kode seperti ini: >Contact< silahkan sesuaikan dengan nama yang anda inginkan.
Kalau dirasa sudah cocok silahkan save template. Peringatan; agar mudah mencari kode pada template gunakanlah ctrl + F
Untuk mengedit template secara offline gunakan Notepad++.
Catatan. Kode seperti ini
<li><a href='#' itemprop='url'><span itemprop='name'>Contact</span></a></li>bisa anda temui apa bila template yang anda gunakan sudah template dari pihak ketiga. Saya anggap sobat sudah menggunakan template pihak ketiga pada blognya.
Cara Menyembunyikan Widget Formulir Kontak
Untuk menyembunyikan widget formulir kontak gampang saja. Silahkan sobat tambahkan kode di bawah ini tepat di atas kode ini atau sebelumnya ]]></b:skin>pada template blog sobat
.widget.ContactForm {simpan templatenya.
display: none;
}
Baca juga Cara-Mudah-Mengatasi-Duplikat-Konten-Blogger
Demikianlah cara mudah membuat Form contact blogger. Mudah-mudahan bermanfaat.
Kalau ada yang mau sobat diskusikan silahkan tuliskan pada kolom komentar di bawah.
