Salah satu widget yang menurut saya sangat penting adalah formulir contact me (hubungi saya) di halaman statis Blogger. Saya kurang nyaman kalau mesti menyebar nomor pribadi di tempat umum. Makanya memilih widget ini karena pesan masuk ke email. Calon client bisa langsung menghubungi tanpa perlu tahu nomor pribadi saya. Kecuali kalau mereka minta nomor baru saya kasih. Show
Dengan adanya widget ini, visitor yang kebetulan mempunyai niat untuk mengajak kerjasama jadi gampang menghubungi. Entah itu menyewa jasa sesuai keahlian, content placement, pemasangan iklan banner, menulis review, dan sebagainya. Saya sangat terbantu dengan widget contact form ini karena memperlancar urusan bisnis. Lihat kan? Tawaran berdatang dengan sendirinya. Calon client bisa kabur lho kalau mereka kesulitan menemukan kontak atau tempat yang bisa digunakan untuk menghubungi kamu. Cara Pasang Formulir "Hubungi Saya" di Page (Halaman Statis) BlogspotMasuk ke dashboard Blogger dan pergi ke pengaturan HTML dengan mengakses menu Theme » Edit HTML. Tambahkan kode berikut "SEBELUM / DI ATAS" </head>. <b:if cond='data:view.isPage'><style> /* Contact Form */ #comments,.post_meta,#blog-pager{display:none}form{color:#666} #kontak{margin:auto;max-width:640px} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid #1d2129;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid #1d2129;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;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:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}#ContactForm1_contact-form-submit{float:left;background:#008c5f;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}#ContactForm1_contact-form-submit:hover{background:#1d2129;color:#fff}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}.contact-form-error-message-with-border{background:#1d2129;border:none;box-shadow:none;color:#fff;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} </style></b:if> Simpan dulu ya biar kodenya bekerja. Klik tombol Save theme. Saatnya membuat widget contact form di halaman statis page Blogger. Pergi ke menu Pages lalu klik tombol New page. Berikan judul apapun bebas, suka-suka kamu. Pastikan memilih mode HTML (bukan Compose). Perhatikan URL yang terbuka. Disana formatnya kurang lebih seperti ini:https://www.blogger.com/blogger.g?blogID=6600000000000000066#editor/target=page;pageID=xxxx6600000000000000066 adalah ID blog kamu. Simpan dulu karena nanti akan dipakai.Copy semua kode berikut ke text editor.<form id="kontak" name="contact-form"> <input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" /> <input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email" type="text" value="" /> <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" value="Kirim Pesan"/> <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> <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'] = '6600000000000000066';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6600000000000000066','//www.igniel.com/','6600000000000000066'); _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': '6600000000000000066', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]></script> Ganti beberapa kode dibawah dengan milik kamu sendiri.
Setelah selesai diganti, klik tombol Publish. Oke cukup ya tutorial membuat widget formulir contact us di halaman page Blogger ini. Semoga calon client tidak bingung lagi ketika ingin menghubungi kamu. Blogger Javascript
Tidak seperti menambahkan gadget/widget contact form, laman kontak blogger tidak bisa dibuat secara langsung. Dan tidak seperti plugin pada WordPress, butuh trik khusus untuk bisa membuat laman kontak pada Blogger. Laman kontak adalah sarana agar pengunjung dapat dengan mudah berhubungan dan berinteraksi langsung dengan pemilik blog. Selain itu, laman kontak juga menyediakan privasi tersendiri bagi blogger karena kamu tidak perlu memberikan alamat email kamu secara langsung. Untuk membuat form kontak, kamu bisa menggunakan widget/gadget khusus yang dibuat oleh Blogger. Namun layaknya widget, form tersebut hanya bisa diletakan di sidebar atau footer saja. Padahal banyak blogger yang menginginkan laman sendiri untuk form kontak. Memiliki laman kontak yang bagus tentu akan sangat menyenangkan, apalagi kalau melihat tampilan form bawaan Blogger yang sangat standar. Di internet banyak bertebaran tutorial cara membuat laman kontak kamu sendiri, tapi menurut saya ini adalah cara paling mudah, apalagi untuk kamu yang awam terhadap koding. Cara Buat Laman Kontak Terpisah di Blog Blogger (Metode 1)CATATAN: Dari beberapa komentar yang masuk, nampaknya cara ini hanya akan bekerja pada blog yang sudah memakai custom domain. Jadi jika kamu belum menggunakan domain kustom, gunakan metode kedua di bawah ini saja yah! Keterangan lebih lengkap bisa kamu lihat di thread berikut ini: https://support.google.com/blogger/thread/17262264?hl=en Untuk membuat halaman kontak di Blogger, silahkan ikuti langkah-langkah berikut: 1. Pasang Widget KontakPertama, tambahkan widget contact form di sidebar Blogger. Caranya, masuk ke menu TATA LETAK lalu tambahkan widget baru di sidebar, pilih CONTACT FORM lalu simpan. 2. Sembunyikan Widget KontakKarena kita akan membuat laman kontak yang terpisah, tentu kita tidak ingin agar widget contact form di sidebar ini terlihat kan? Pada tampilan Blogger yang baru, kamu bisa mencentang opsi Show Contact Form untuk menyembunyikan gadget Contact Form. Namun JANGAN LAKUKAN HAL INI karena saat saya mencobanya, kode yang kita pakai tidak akan bekerja! Jangan centang opsi ‘Show Contact Form’ pada tutorial ini!Untuk menyembunyikan gadget Contact Form kita bisa menggunakan kode CSS. Caranya? Masuk ke menu TEMA » SESUAIKAN » LANJUTAN » TAMBAHKAN CSS, lalu salin kode berikut ini. #ContactForm1{display:none !important;}3. Buat Halaman KontakSekarang masuk ke menu LAMAN » LAMAN BARU. Isi nama laman sebagai Kontak atau Hubungi Kami sesuai selera kamu. Pilih juga tab HTML pada text editor karena kita akan memasukan kode untuk membuat laman kontak. Pada setelan laman, kamu bisa mencentang opsi Jangan bolehkan pada pilihan Komentar pembaca agar laman yang kamu buat tidak dikomentari orang lain. Cara buat laman kontak pada Blogger (blogspot).4. Masukan Kode untuk Menampilkan Form Kontak di Halaman BloggerSetelah selesai, kopi kode di bawah ini ke dalam laman baru yang kamu buat. <style>.page-contact-form input,.page-contact-form textarea {width: 100%;max-width: 100%;margin-bottom: 10px;}.page-contact-form input.contact-form-button.contact-form-button-submit {padding: 10px;background: #000; /* Button background color */color: #fff; /* Button text color */border: none;}.page-contact-form input.contact-form-button.contact-form-button-submit:hover {background: #777; /* Button background hover color */color: #fff; /* Button text hover color */}</style><div class="contact-form-widget page-contact-form"><div class="form"><form name="contact-form">Name:<br /><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />E-mail: <span id="required">*</span><br /><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />Message: <span id="required">*</span><br /><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" /><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></div> Setelah selesai, maka tampilan laman kontak kamu akan sama seperti contoh di bawah ini, Contoh halaman kontak Blogger yang sudah jadiSebagai informasi, kode di atas sudah dilengkapi dengan kode CSS untuk mempercantik tampilan halaman kontak. Jika kamu tidak menginginkannya, hapus semua kode dari <style> sampai </style>. Nantinya tampilan contact form tersebut akan mengikuti tampilan dari template Blogger yang kamu pakai. Cara Buat Halaman Kontak Blogger (Metode 2)Jika kamu bermasalah dengan metode pertama, atau ingin cara yang lebih mudah, kamu bisa membuat halaman kontak blogger dengan beberapa langkah berikut ini.
Untuk ID bloggernya sendiri bisa kamu lihat di dasbor blogger. Pada address bar browser biasanya akan tertera URL seperti https://www.blogger.com/blog/posts/1138884915321989014Deretan angka terakhir itulah yang menjadi ID blogger kamu. Jika berhasil, maka tampilan halaman kontak form kamu akan tampak seperti berikut ini. PenutupAgar lebih mudah dihubungi, form kontak adalah halaman yang harus ada di blog kamu. Untuk membuatnya pun kita hanya perlu menyalink script di atas saja. Satu hal yang perlu kamu perhatikan, secara default pesan yang dikirim lewat laman ini akan masuk ke dalam inbox tempat kamu membuat akun Blogger. Kamu bisa mengubah alamat email ini lewat settingan admin melalui dasbor Blogger. Sebagai alternatif, jangan lupa juga cek tutorial cara membuat halaman kontak dengan Google Form. |