Arsip Bulanan: Desember 2022

Arsip untuk Desember 2022

Cara Mudah Membuat Halaman Contact Us di Blogspot

Tinggalkan komentar

Jadi ceritanya, saya coba mengirim tes pesan melalui halaman contact us di blog ini. Dan ternyata … tidak terkirim. Kode script halaman contact ini saya dapatkan satu paket dengan sebuah template blog yang pernah saya beli (dan sudah berhenti dikirimi update selepas versi 8.4.0. Saya sendiri tidak tahu kenapa). Karena tidak terkirim, maka saya hapus halaman itu. Sekedar informasi, saya sebelumnya pernah melakukan itu dan bisa berfungsi halaman kontaknya. Entah kenapa yang ini tidak berhasil.

Karena penasaran, saya coba cek lagi baris kodenya. Saya berhasil menemukan adanya url blog dan ID blog yang ternyata bukan ID blog ini.
“Mungkin ini masalahnya!” pikir saya.
Jadi, saya ganti saja kode-kode itu dengan yang sesuai untuk blog ini. Saya klik Perbarui laman, dan saya langsung lakukan tes lagi. Saya coba kirim pesan melalui halaman kontak baru. Dan …. tidak terkirim. Lagi.
Jadi saya hapus lagi halaman itu. Buat apa ada kalau ga guna. Ya ‘kan?
Inilah salah satu repotnya blogspot. Mau buat halaman kontak saja susah. Kalau di WordPress, tinggal pakai plugin, beres. Tapi, nilai lebihnya, kita jadi belajar tentang bagaimana cara kerja halaman kontak kalau memakai blogspot.
Sebenarnya, saya mau biarin saja blog ini ga ada halaman kontaknya. Tapi, kaya-nya wagu saja. Masa blog ga ada info kontaknya. Jadi, saya tetap meneruskan mencari cara bagaimana memiliki halaman kontak di blog ini. Walau tidak pernah ada yang menghubungi saya via email. Haha..
Setelah mencoba, akhirnya saya bisa memasangnya. Dan saya tes berhasil.
Berikut kode yang saya pakai di halaman kontak blog ini.
<div class='contact-form-widget'><div class='form'><form name='contact-form'><span class='input-label'>Nama</span><input aria-label='contact name' class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/><span class='input-label'>Email<span class='required'>*</span></span><input aria-label='contact email' class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/><span class='input-label'>Pesan<span class='required'>*</span></span><textarea aria-label='message' class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea><input aria-label='submit button' class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Kirim'/><div class='contact-form-message-wrap'><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><script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2092647672-widgets.js"></script><script type='text/javascript'>window['__wavt'] = 'AOuZoY7n4L9lKAZ8Sfm-zRM4TVqbCZECYw:1671091440211';_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3dBlogID','//www.URLBLOG.id/','BlogID');_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Mengirim...', 'contactFormMessageSentMsg': 'Pesan sudah dikirim.', 'contactFormMessageNotSentMsg': 'Pesan tidak dapat dikirim. Coba lagi nanti.', 'contactFormInvalidEmailMsg': 'Alamat email harus valid.', 'contactFormEmptyMessageMsg': 'Bidang pesan harus diisi.', 'title': 'Formulir Kontak', 'blogId': 'BlogID', 'contactFormNameMsg': 'Nama', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Pesan', 'contactFormSendMsg': 'Kirim', 'contactFormToken': 'AOuZoY7CscM8laSe_KBjfi6cbwoagl4YfA:1671091440213', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));</script>
Kalau Anda ingin menggunakan kode di atas untuk halaman contact us blog sampeyan, silahkan copy, dan ganti kode yang saya warnai.
  • BlogID = ID blog Anda sendiri. Ini numerik. Jadi isinya angka. Anda bisa menemukan ID blog anda sendiri dengan login ke blog anda di blogger. com, dan lihat ke address bar setelah berhasil login. Angka paling belakang adalah ID blog.
  • URLBlog = ganti dengan nama domain anda sendiri.
Kalau misal cara ini tidak berhasil, maksudnya, form contact tidak mengirim, maka ikuti langkah di bawah ini. Ini bisa jadi karena contact form token masing-masing blog itu berbeda. Jadi, Anda harus mengikuti langkah yang saya telah lakukan untuk mendapatkan kode di atas, untuk mendapatkan kode HTML dan JS Formulir Kontak blog Anda sendiri, beserta contact form token-nya.

Langkah-langkah Membuat halaman contact blog blogspot

  • Pasang widget Formulir Kontak melalui Tata Letak/Layout blog. Silahkan pasang bebas saja. Sidebar boleh footer boleh.
  • Refresh halaman blog kita. Akan terlihat Formulir Kontak di Sidebar/Footer
  • Klik kanan pada bidang halaman dan klik “Lihat sumber halaman”.
  • Tekan Ctrl+F lalu masukkan kata “Fomulir Kontak”. (tanpa tanda petik). lalu tekan enter.
  • Anda akan dibawa ke blok kode HTML dari formulir kontak itu. Anda bisa melihat kode yang saya bagikan di atas untuk mengetahui yang mana blok kode HTML-nya.
  • Copy blok kode yang Anda temukan itu dan paste di notepad atau notepad ++.
  • Kemudian, scroll ke paling bawah.
  • Anda akan menemukan 2 javascript (JS) –> (lihat kembali kode saya di atas untuk mengetahui blok kode JS-nya.)
  • untuk JS yang pertama kode-nya sama.
  • JS yang kedua yang kita butuhkan hanya untuk Formulir Kontak saja. Karena di sana kita akan melihat juga JS untuk widget-widget lain yang kita pasang. (silahkan lihat ulang kode saya di atas.)
  • Jika sudah ketemu, silahkan copy dan paste di bawah blok kode HTML yang kita copas pertama tadi ke notepad.
  • Selanjutnya, copy semua kode.
  • Buat halaman kontak anda di blog. Buka mode HTML. Paste kode di halaman itu.
  • Jangan lupa atur Opsi komentar untuk halaman itu.
  • Publikasikan.
  • Selesai
  • Anda bisa hapus widget Formulir Kontak yang tadi di awal dipasang di sidebar/footer blog melalui Tata Letak/Layout.
Itu urutannya. Semoga berhasil. Jika dilain waktu template blog diganti, maka harus dibuat ulang lagi kontak formnya.
Arsip untuk Desember 2022

Cara Membuat Iklan Melayang (Floating) dengan Tombol Close

Terakhir diupdate pada 18 Desember 2024 Tinggalkan komentar

Cara Membuat Iklan Melayang (Floating) dengan Tombol Close – Artikel kali ini, saya ingin bagikan cara membuat iklan melayang (floating) dengan tombol close. Iklan ini tampil di area bawah blog dan responsive. Memang, per 13 Desember 2022, Google Adsense akan mulai menampilkan iklan floating di kanan dan kiri (sidebar), terutama bila website atau blog dibuka dengan desktop/laptop. Bahkan sebenarnya, iklan floating bottom ini sudah ada lebih
dahulu, hanya saja, cuma tampil di mobile device.

Kalau begitu, untuk apa membuat sendiri kalau Adsense sudah menyediakan itu?

Iklan floating ini akan muncul kalau kita mengaktifkan auto ads. Jadi, Google akan mencarikan spot-spot strategis secara otomatis. Jadi, seandainya kita tidak mengaktifkan auto ads, maka tidak ada iklan ini. Itu kenapa kita harus buat sendiri.

Memang ada ya yang tidak mengaktifkan auto ads ini?

Ada. Bahkan banyak. Bisa karena pertimbangan layout, bisa karena memang pemilik blog ingin menampilkan iklan sesuai keinginannya sendiri.

Alasan lainnya, mungkin saja kita ingin menampilkan banner lain selain adsense. Kita bisa manfaatkan cara ini.

Ok langsung saja,

Cara Membuat Iklan Melayang (Floating) dengan Tombol close

Simpan kode di bawah ini di atas/sebelum kode </body>

<div class='MS-ads jhfdiuh0' id='MS-ads'>
<div class='MS-ads-close' onclick='document.getElementById(&quot;MS-ads&quot;).style.display=&quot;none&quot;'><svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/></svg></div>

<div class='MS-ads-content'>
<center>
<style>
<!-- kode css di sini(misal adsense) -->
</style>
<!-- kode iklan di sini -->
</center>
</div>
</div>

Tambahkan kode CSS berikut untuk mengatur tampilannya.

.MS-ads { position: fixed; bottom: 0px; left: 0; width: 100%; min-height: 100px; max-height: 125px; padding: 5px 5px; box-shadow: 0 -6px 18px 0 rgba(9,32,76,.1); -webkit-transition: all .1s ease-in; transition: all .1s ease-in; display: flex; align-items: center; justify-content: center; background-color: #fefefe; z-index: 20; } .MS-ads-close { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 12px 0 0; position: absolute; right: 0; top: -30px; background-color: #fefefe; box-shadow: 0 -6px 18px 0 rgba(9,32,76,.08); } .MS-ads .MS-ads-close svg { width: 22px; height: 22px; fill: #000; } .MS-ads .MS-ads-content { overflow: hidden; display: block; position: relative; height: 90px; width: 100%; margin-right: 10px; margin-left: 10px; }

Simpan.

Itu saja. Kode di atas adalah untuk iklan adsense.