Cara Membuat Kotak Berlangganan Artikel – Untuk memanjakan pengunjung blog salah satunya adalah dengan membuat form berlangganan artikel. Dengan kata lain untuk memudahkan pembaca setia blog jika ingin mengikuti setiap postingan terbaru yang kita terbitkan. Pengunjung tidak perlu bolak-balik ke blog kita kalau hanya sekedar untuk memeriksa artikel terbaru. Mereka cukup mengecek alamat email yang telah didaftarkan sebelumnya.
Baca Juga : Cara Menonaktifkan Emoji Di WordPress Dengan Mudah
Untuk membuat kotak khusus form berlangganan artikel bagi pengguna WordPress self hosted tidak perlu menggunakan plugin. Cukup bermain dengan kode HTML saja dan agar tampilannya lebih menarik, kemudian dipoles sedikit dengan menambahkan kode CSS. Lebih jelasnya lagi, Anda bisa lihat contoh tampilan berikut ini :
Kenapa saya pasang kotak berlangganan artikel tersebut di bawah artikel? Karena menurut saya tempat tersebut adalah yang paling strategis. Begitu pengunjung blog selesai membaca artikel yang kita terbitkan, maka mereka akan melihat jelas form berlangganan artikel di bawahnya. Dengan begitu pembaca blog tidak akan kesulitan untuk menemukan kotak berlangganan artikel.
Kotak berlangganan artikel yang akan saya bahas adalah kotak berlangganan yang akan di redirect ke FeedBurner. Maka dari itu sebaiknya Anda melakukan pendaftaran terlebih dahulu di FeedBurner untuk mendapat akunnya.
Ok jika Anda sudah mempunyai akun FeedBurner mari kita lanjutkan lagi pembahasannya. Sebetulnya kita juga bisa langsung memasangkan kode yang kita dapatkan di FeedBurner. Namun saya rasa kotak berlangganan artikel default FeedBurner tampilannya kurang menarik.
Inilah Cara Membuat Kotak Berlangganan Artikel di Bawah Postingan Blog
Selain bisa kita pasang di bawah postingan blog, kotak berlangganan artikel FeedBurner bisa kita pasang juga di sidebar/widget. Disini saya tidak akan membahas bagaimana cara memasang form berlangganan di sidebar, namun yang akan saya bahas disini adalah yang dipasang di bawah postingan/artikel.
Silakan Anda aktifkan dashboard WordPress Anda dengan cara login seperti biasanya. Kemudian Anda sisipkan kode berikut di dalam file single.php
template yang Anda gunakan.
<div id="subscribe-box"> <h4>Berlangganan Artikel Via Email</h4> <p>Suka dengan artikel diatas? Jangan lewatkan postingan-postingan menarik lainnya dengan berlangganan artikel yang akan dikirim otomatis ke alamat Email Anda.</p> <div class="emailfield"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=infomenarikuptodate', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input type="email" name="email" placeholder="Ketik Alamat Email Anda !" required="required"> <input type="hidden" value="infomenarikuptodate" name="uri"> <input type="hidden" name="loc" value="en_US"> <input class="submitbutton" type="submit" value="Lanjutkan"> </form> </div> </div>
Adapun penempatannya tergantung selera Anda. Jika saya memasangnya tepat di bawah Author Box. Jika Anda juga ingin menempatkan kotak berlangganan artikel di bawah author box, silakan sisipkan kode diatas dibawah/diakhir kode Author Box atau script <!-- End Author Box -->
yang ada di dalam file single.php
.
Anda juga harus mengganti infomenarikuptodate
yang terdapat didalam kode diatas dengan akun FeedBurner Anda. Dan silakan Anda sesuaikan lagi kalimat-kalimatnya dengan yang Anda inginkan!
Agar tampilan kotak berlangganan artikel Anda lebih menarik dan enak dilihatnya, maka sebaiknya Anda memodifikasinya lagi dengan menyisipkan kode CSS. Sebagai contoh saya menggunakan kode CSS seperti ini :
/*-[ Artikel Berlangganan ]---------------------------*/ #subscribe-box { background-color: #666; margin: 0 0 30px; padding: 25px; overflow: hidden; } #subscribe-box h4 { color: #fff; font-size: 18px; margin-bottom: 20px; text-transform: uppercase; } #subscribe-box p { color: #fff; margin: 0 0 24px; padding: 0; } #subscribe-box .emailfield { margin: auto; } #subscribe-box .emailfield input { font-size: 16px; color: #bcc4ca; border: none; margin-bottom: 16px; } #subscribe-box .emailfield .submitbutton { background-color: #b11c42; cursor: pointer; color: #fff; margin: 0; width: 100%; font-family: 'FjallaOne-Regular'; font-size: 18px; text-transform: uppercase; box-shadow: 0 1px rgba(0,0,0,0.1); } #subscribe-box .emailfield .submitbutton:hover { background-color: #FFF; color: #000; }
Tempatkan kode CSS diatas di dalam file style.css
template yang Anda gunakan. Jika settingannya tidak sesuai dengan selera atau warna template Anda, silakan Anda sesuaikan lagi.
Ok mungkin hanya itu saja pembahasan tentang bagaimana cara membuat kotak berlangganan artikel menarik di bawah postingan WordPress. Oh iya, kode HTML diatas bisa juga Anda pasangkan di Blogspot. Semoga bermanfaat.
Thanks, udah ane praktekin Gan…
Udah ane tambah kode diatas juga pada bagaian style.css, tapi desainnya gak berubah…
Sama halnya jika tidak ditempatkan kode pada style.css
Mohon pencerahannya…
Sudah dicoba pasang kode diatas tanpa melakukan perubahan pada kode? Blog inipun sama menggunakan kode tersebut mas dan mas bisa lihat hasilnya!
Iya gan, ane terapkan seperti kode diatas, namun tmpilan pada subcribe box tidak bisa sperti blog agan…
Padahal sayapun menggunakan script tersebut mas. Seandainya saya bisa langsung mencoba masuk ke wp-admin agan pasti saya tahu letak permasalahannya.
selain di single.php bisa ga ditaro tempat lain. soalnya kalau di theme saya ga tampil. tampil juga malah di halaman utama home, di bawah tulisan readmore jadi ada banyak kotak berlanggannya. gimana gan ?
Makasih infonya, sangat bermanfaat.. ada nggak tutorial membuat author box bintang 5 buat wordpress?
thanks ilmunya sangat membantu saya, kalau blogger apa bisa juga? soalnya saya pake blogger, tuh dimasukkan ke template apa cukup di tata letak blog. mohon bantuannya gan
Boleh minta alamat email ga , buat tnya- tnya ?
soal nya ada beberapa hal yang ga di pahami ..
salah satu nya gmn ya cara nya untuk membuat tulisan berkolom di bawah autor box
terima kasih
mau pasang, namun apakah ada efek negatif dari fitur berlangganan artikel ini mas…