Cara Mudah Membuat Subscribe Form Langsung Dikirim ke Email Anda

loading...

Selamat datang di The Royal Moringa. Postingan kali ini, saya akan menjelaskan langkah cepat dan mudah dalam membuat kotak subscribe form. Subscribe form berfungsi untuk membantu pembaca mendapatkan/mengetahui postingan terbaru dari blog anda. Jadi, pembaca yang menjadi subscriber dalam blog anda akan dikirimkan informasi terbaru melalui email yang mereka miliki. Pastikan sebelum mengikuti tahapan pembuatan widget, anda telah memiliki alamat feedburner pada blog. Jika belum, silakan ikuti langkahnya disini. Berikut langkah-langkahnya.

1. Log in ke akun blog anda > Pada dashboard pilih Layout > Add  a gadget* > HTML/JavaScript > Copy dan paste kode HTML berikut > Jangan lupa mengganti alamat feed anda > Save

*Untuk mendapatkan hasil yang sama dengan contoh gambar diatas, usahakan untuk mengambil posisi yang cukup lebar seperti pada footer, lower ataupun posisi di bawah kumpulan postingan terbaru anda. Apabila anda mengambil sisi sidebar, anda dapat mengatur ulang ukuran setiap box sesuai dengan ukuran widget sidebar yang anda miliki.

                                          <div id="newsletter-subscribe"> <div class="subscribe-box"> <form action='https://feedburner.google.com/fb/a/mailverify' method="post" target="popupwindow" expr:onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=ALAMATFEEDANDA','popupwindow', 'scrollbars=yes,width=550,height=520'); return true" > <input class="email-address" type="text" style="width: 340px; height: 40px; font-size: 14px;" id="email-address" name="email" placeholder="Masukkan Alamat Email Kamu"/> <input class="subscribe" type="submit" value="Subscribe" /> </form> </div> </div>

2. Kemudian pilih menu Theme > Edit HTML > Cari kode ]]></b:skin> lalu copy dan paste kode CSS berikut tepat di atasnya

                                          #newsletter-subscribe .subscribe-box{ padding: 15px 15px; font-family: "Playfair Display",sans-serif; } #newsletter-subscribe .subscribe-box input.email-address{ background:#fff; border:1px solid #666666; color: #c5b7b7; padding: 5px 10px 6px 12px; font-family: "Playfair Display",sans-serif; } @media only screen and (max-width:1280px){ #newsletter-subscribe .subscribe-box input.email-address{ position:relative; max-width:76em; float:left; overflow:hidden;} } @media only screen and (max-width:480px){ #newsletter-subscribe .subscribe-box input.email-address{ position:relative; max-width:18em; float:left; overflow:hidden;} } #newsletter-subscribe .subscribe-box input.email-address:focus{ color:#000; border:1px solid #999966; } #newsletter-subscribe .subscribe-box input.subscribe{ background:#999966; font-family: "Playfair Display",sans-serif; color:#fff; padding:7px 14px; border:none; font-size:14px; width:250px; height:53px; cursor:pointer; } #newsletter-subscribe .subscribe-box input.subscribe:hover{ background:#cc9966; } <br>

3. Save Template dan lihat hasilnya

Cukup mudah bukan? Sebelum mencoba menggunakan subscribe form, pastikan anda telah membuat alamat feedburner untuk blog anda terlebih dahulu. Alamat feedburner ini berguna untuk melihat traffic dari pengunjung blog dan membantu pembaca untuk dapat berlangganan pada artikel blog yang anda miliki. Apabila anda mengalami kesulitan dalam pembuatan subscribe form baik oleh tampilan yang berantakan maupun masalah kode HTML, anda dapat bertanya pada saya. Terima kasih telah membaca!

loading...