Ingin membuat formulir berlangganan Email (Subscribe Form) di blog WordPress atau di Blogger blogspot.
Berikut adalah cara membuatnya dengan menggunakan widget Subscribe Form Google FeedBurner tanpa menggunakan plugin.
Google FeedBurner mungkin ‘feedburner’ tertua. Dan ya, masih relevan untuk menggunakannya sampai saat ini.
Formulir berlangganan atau Subscribe form sangatlah berguna untuk membuat pengunjung Anda menjadi pembaca setia blog Anda. Dengan meminta mereka untuk berlangganan Newsletter.
Eits! tunggu dulu!
Jangan terburu-buru dan hanya copy paste kode ke blog Anda. Karena jadinya nanti Anda hanya akan menyalin kode subscribe form blog saya.
Jadi tolong baca dengan seksama sambil belajar bagaimana memodifikasi kode langkah demi langkah. Sekalian belajar kode juga lah! 🙂
Cara Memodifikasi Google FeedBurner Subscribe Form
Ok, berikut cara memodifikasi Google FeedBurner Subscribe Form dan membuatnya terlihat cantik.
Jika Anda sudah mengaktifkan feed blog Anda di Google Feedburner maka bagus.
Belum diaktifkan? berikut adalah caranya;
Buka laman FeedBurner.Google.com dan klaim feed Anda di sana. Psst .. dengan ‘membakar’ feed blog anda, ini juga sangat bagus untuk SEO blog Anda. Untuk Feed blog anda aktif akan di butuhkan waktu. Meskipun begitu, anda bisa pasang widgetnya duluan.
Ketika feed Anda sudah terdaftar di FeedBurner. Buka akun FeedBurner Anda dan kemudian buka tab > Publicize > Email subscription > Subscription management.
Kemudian salin kode formulir berlangganan blog anda dari sana. Lihat contoh screenshot di bawah.
Selanjutnya kembali ke blog Anda dan paste kode di widget blog.
Untuk mudahnya lebih baik edit dulu di text editor.
Tampilan default subscribe form terlihat datar dan kurang menarik. Itu sebabnya Anda harus mengubah tampilanya agar terlihat simple tapi cantik.
Ubah warna latar belakang (Background color)
Pertama, kita akan mengubah warna latar belakang subscribe form. Untuk melakukannya, cari baris ini di bagian atas style form FeedBurner.
<form style="border:1px solid #ccc;padding:3px;text-align:center;"
Anda dapat menambahkan warna latar belakang yang cocok dengan tema blog Anda. Hapus garis tepi (border) dan buat ‘teks’ sejajar ke kiri daripada posisi di tengah.
Di bawah ini adalah contoh baris kode setelah saya mengubah style CSS-nya;
<form style="text-align:left;color: #fff;background-color:#fff;padding:20px 10px;"
Ubah warna latar belakang dengan warna pilihan Anda sendiri.
#fff untuk putih, transparent untuk mebuat background jadi transparan.
Anda dapat idenya, kan?
Ok selanjutnya ubah gaya teks default dan buat lebar formulir dari 140px menjadi 100% dan responsif. Jadi kita akan mengubah baris berikut;
<p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p>
Jadi seperti ini;
<p>Dapatkan artikel terbaru kami lewat email:</p><p><input type="text" style="width:100%;color:#aaa;" name="email" onfocus="this.value=''" value="Masukan E-mail Disini"/></p>
Di sini saya juga menambahkan kode onfocus=”this.value=”” agar waktu di klik tulisan Masukan E-mail Disini hilang. Defaultnya harus di hapus manual.
Ubah lebar Tombol dan formulir
Selanjutnya kita mengubah input formulir dan tombol untuk membuat lebarnya menjadi 100% dan responsif.
Di bawah ini adalah baris kode default default subscribe form;
<input type=”submit” value=”Subscribe” />
Di sini Anda dapat mengubah ‘value’ tombol dari ‘Subscribe’ ke yang lain. Seperti ‘Berlangganan’ ‘Let’s go’atau apa pun yang Anda suka.
Dan ya! menambahkan style untuk mengubah warna latar belakang tombol dan lebar menjadi 100%.
Kode-nya akan jadi seperti ini;
<input type="submit" value="Berlangganan style="width:100%;"/>
Dan terakhir, ubah teks footer formulir. Anda bisa biarkan di default atau hapus jika Anda merasa tidak memerlukanya.
Di bawah ini adalah baris kode default;
<p>Delivered by <a href="https://feedburner.google.com" target="_blank">FeedBurner</a></p>
Dan ini adalah contoh kode yang telah dimodifikasi;
<p style="padding-top:14px;">Kami menghargai <a style="color: #777;" href="https://blogkudewe.com/privacy-policy/" target="_blank">Privasi</a> Anda. Dan anda bisa berhenti berlangganan kapanpun</p>
Jika background footer anda hitam atau warna gelap lainya. Ubah color dari #999 ke #fff atau warna yang sesuai dengan tema blog anda.
Jangan lupa juga untuk mengganti URL laman Privasi dengan laman privasi blog anda yaitu di bagian: href=”https://blogkudewe.com/privacy-policy/”.
Itu dia! cara memodifikasi subscribe form Google feedburner. Anda dapat membiarkan sisanya secara default.
Jadi! keseluruhan kode akan terlihat seperti berikut;
<div><form style="text-align:left;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=blogku-dewe', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Dapatkan artikel terbaru kami lewat email:</p><p><input type="text" style="width:100%;color:#aaa;font-size:14px;text-align:center;" name="email" onfocus="this.value=''" value="Masukan E-mail Disini"/></p><input type="hidden" value="blogku-dewe" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Let's go!" style="width:100%;" /><p style="padding-top:14px;">Kami menghargai <a style="color: #777;" href="https://blogkudewe.com/privacy-policy/" target="_blank">Privasi</a> Anda. Dan anda bisa berhenti berlangganan kapanpun.</p></form></div>Dalam contoh di atas saya juga menambahkan div di formulir berlangganan yang di modifikasi. Dan hasilnya seperti contoh di bawah.
Kesimpulan
Oke, itulah cara Anda dapat membuat formulir berlangganan blog menggunakan Google FeedBurner.
Anda dapat meletakkannya di sidebar blog Anda di footer. Atau membuatnya menjadi pop up form dengan menggunakan plugin Boxzilla kalau anda pakai platform WordPress.
Catatan tambahan
Pastikan Anda mengaktifkan Summary Burner di akun Google Feed Burner Anda.
Untuk mengaktifkan pembakar Ringkasan, buka Feed Burner > Optimize > Summary Burne. Dan aktifkan.
Di bawah ini adalah screenshot cara melakukannya;
Dengan begitu artikel yang diterima pelanggan hanya ringkasan saja dan bukan seluruh konten.
Tidak ada komentar:
Posting Komentar