Cara Membuat Halaman Contact Form Bawaan Blogger 100% work
-
17 February 2018
Cara Memasang Halaman Contact Form Bawaan Blogspot Di Menu Nav Sukses Di Website saya
Dari awal terjun di dunia blog, langkah unik tidak lain suka sekali merombak blog dari berbagai macam hal, dari mulai tampilan dan berbagai macam widget yang telah saya gunakan.
Dan yang saat ini menjadi penasaran bagi langkah unik adalah, bagaimana caranya agar widget hubungi kami dari bawaan blogspot google atau kontak formulir bisa tampil dan muncul di menu navigasi atau bisa di masukkan kedalam postingan laman.
Dan yang saat ini menjadi penasaran bagi langkah unik adalah, bagaimana caranya agar widget hubungi kami dari bawaan blogspot google atau kontak formulir bisa tampil dan muncul di menu navigasi atau bisa di masukkan kedalam postingan laman.
Karena sebelumnya, langkah unik membuat formulir kontak dengan menggunakan penyedia layanan faxicon generator yang mana, lama kelamaan kog kurang begitu menarik.
Mencari berbagai sumber dari blog para mastah, tidak menemukan sama sekali cara yang 100% work. Mungkin dikarenakan beda tamplate beda rasa.
Apalagi melihat link URL yang di tampilkan. www.langkahunik.xyz/p/faxicon.html kurang lebih seperti itulah, yang akhirnya Langkah Unik secara tidak sadar belajar secara otodidak.
Akhirnya saya putuskan gimana agar bisa menampilkan kontak Formulir dengan mengubah widget gadget html menjadi halaman yang memiliki link Url aktif, agar posisi dan peletakan kontak kami bisa diletakkan sesuai selera dimana saja.
Apalagi melihat link URL yang di tampilkan. www.langkahunik.xyz/p/faxicon.html kurang lebih seperti itulah, yang akhirnya Langkah Unik secara tidak sadar belajar secara otodidak.
Akhirnya saya putuskan gimana agar bisa menampilkan kontak Formulir dengan mengubah widget gadget html menjadi halaman yang memiliki link Url aktif, agar posisi dan peletakan kontak kami bisa diletakkan sesuai selera dimana saja.
Seperti menempatkan kontak formulir di bagian menu navigasi, halaman statis dan bisa di tempatkan di bagian credit footer dan sembarang tempat.
Bisa Dilihat Disini Demo Contact Us
Karena disini tujuannya adalah mengubah widget gadget halaman kontak formulir bawaan blogspot menjadi sebuah halaman posting yang memiliki link URL aktif.
Bisa Dilihat Disini Demo Contact Us
Karena disini tujuannya adalah mengubah widget gadget halaman kontak formulir bawaan blogspot menjadi sebuah halaman posting yang memiliki link URL aktif.
Ouh iya, Sebelumnya mohon maaf, kepada mas sugeng.id apabila saya mengambil kode css yang saya gunakan untuk menampilkan kode html dalam postingan. Karena cari tutorial tidak mendapatkan sumber yang fix, akhirnya saya putuskan ambil salah satu kode css untuk menampilkan kode html di postingan. Dan nyantol Di blognya mas sugeng.
Baca Juga
Mengatasi Masalah Saat Verifikasi Menambah Metode Pembayaran Google Adsense
Panduan Ngeblog Untuk Pemula Hingga Menghasilkan Dolar Karungan
Sebagai seorang blogger baik itu pemula seperti saya maupun yang sudah mastah atau ahli dibidang internet marketing, pasti minimal harus tahu sususan kode html css java script dan lain sebagainya.
Maka, dari itu, minimal berani dan mengambil konsekwensi untuk belajar hal-hal baru di dunia blog.
Semoga tutorial ini tidak ada kesalahan, karena sudah saya uji sendiri di beberapa blog saya, apabila ada kesalahan mohon untuk di koreksi dengan mengisi kolom komentar..
Berikut adalah cara menambah halaman kontak dalam postingan dari bawaan blogger 100% work di blog langkah unik. dan udah saya coba di beberapa blog dumi saya.
Yang pertama adalah tambahkan gadget baru dengan menambahkan formulir kontak kedalam blog bisa di sidebar atau dimana saja terserah.
Klik Tata Letak+Tambah Gadget+Formulir Kontak+Isi sesuai dengan Nama Gadget Tersebut misal Contac Us
Selanjutnya masuk pada Tema+Edit HTML cari kode
Yang pertama adalah tambahkan gadget baru dengan menambahkan formulir kontak kedalam blog bisa di sidebar atau dimana saja terserah.
Klik Tata Letak+Tambah Gadget+Formulir Kontak+Isi sesuai dengan Nama Gadget Tersebut misal Contac Us
Selanjutnya masuk pada Tema+Edit HTML cari kode
<b:widget id='ContactForm1' locked='false' title='Contact' type='ContactForm'>dan temukan kode seperti di bawah ini.
<b:includable id='main'>
<!--------------------->
</b:includable>
Untuk mempermudah pencarian silahkan copy id 'ContactForm1' kemudian tekan CTRL=F untuk memunculkan kotak search found, selanjutnya paste dengan menekan CTRL+V ke kolom Kotak search Lalu klik enter. Agar percarian lebih cepat.
Copy paste kode di bawah ini.
Kode di bawah ini untuk menyembunyikan atau hanya untuk menampilkan widget pada postingan tertentu. Cukup copy dan paste tanpa harus merubah kode sedikitpun.
<b:if cond='data:blog.pageType == "URLpostingan"'>
<!--------------------->
</b:if>
copy dan pastekan <b:if cond='data:blog.pageType == "URLpostingan"'> dan Letakkan persis di bawah <b:includable id='main'>
Selanjutnya copy paste </b:if> dan Letakkan persis diatas kode penutup </b:includable>
Seperti yang sudah tertera pada kode diatas.
Lalu klik save.
Langkah Pertama Sudah Selesai dan berhasil di simpan kemudian langkah selanjutnya sebagai berikut
Masuk Pada bagian Halaman Post dan Buat Halaman Baru judul halaman post di sesuaikan saja dengan keinginan misal hubungi kami, contact person, contact us, atau yang lainnya.
Kemudian copy paste kode di bawah ini kedalam halaman post dengan mode HTML,
Setelah di paste kembali ke mode compose dan klik save.
<div class="widget ContactForm" data-version="2" id="ContactForm1"><h3 class="title">Contact</h3><div class="contact-form-widget"><div class="form"><form name="contact-form"><p></p>Name<br><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value=""><p></p>Email<span style="font-weight: bolder;">*</span><br><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value=""><p></p>Message<span style="font-weight: bolder;">*</span><br><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><p></p><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send"><p></p><div style="text-align: center; max-width: 222px; width: 100%"><p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p><p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p></div></form></div></div></div>
Kode html diatas saya ambil dari sourch kode html.
jadi, temen-temen blogger yang selama ini masih kesulitan membuat halaman form contact dan kebanyakan malah menggunakan layanan kontak pihak ketiga seperti dari faxicon generator. Bisa mengunakan cara ini.
Kemudian Klik save selesai..
Note;
Cara lain apabila menggunakan langkah-langkah diatas masih tidak bekerja, adalah dengan menyembunyikan salah satu layout widget gadget.
Dengan catatan sudah menambahkan widget gagdet formuler kontak kemudian tambahkan id css yang di dapat dari layout tersebut misal kode html <b:section class='contakku' id='contac_us' name='contakku' showaddelement='yes'>, maka kode Id css .contakku dan tambahkan .contakku{display:none;} sebelum kode penutup bagian ]]</skin> Setiap template dan kode id css layout berbeda-beda. silahkan cari kode tersebut yang telah di tambahkan gadget kontak form. Dan tambahkan titik(.)id csslayout tambahkan{display:none;} pada Id css tersebut.
CATATAN;
Kode HTML yang telah di save di bagian halaman Post sesuai dengan script di atas. tidak perlu di otak-atik lagi.
Apabila widget gadget formuler kontak tidak di tambahkan maka tidak akan bekerja.
Intinya dari sini hanya menyembunyikan saja, karena di blogspot sendiri setelah saya berexperimen sekaligus uji coba tidak bekerja sama sekali. Karena belum dapat memanggil ID dari formulir kontak bawaan blogger.
Update:
Apabila hal diatas masih tidak bekerja(tidak bisa mengirim pesan)
tambahkan scrip html di bawah ini tepat di bawah kode penutup </form> pada html contact form di postingan halaman. kemudian save.
Kode id yAng berwarna hijau di ganti dengan kode ID blog sobat, bisa di lihat di link url atas bowser.Update:
Apabila hal diatas masih tidak bekerja(tidak bisa mengirim pesan)
tambahkan scrip html di bawah ini tepat di bawah kode penutup </form> pada html contact form di postingan halaman. kemudian save.
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '6500225693915393962';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6871833555178132779','//www.bungfrangki.com/','6500225693915393962');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar3', 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': '6500225693915393962', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
Untuk cara terakhir ini. Kode html saya ambil dari milik bungfraki.com.
Karena setelah melakukan beberapa xperimen di berbagai tamplate ada yang bekerja dan ada juga yang tidak bekerja dengan metode di atas. maka dari itu. saya tambahkan kode html untuk memanggil widget contact form blogger menjadi halaman statis.
