Cara Membuat Widget Berlangganan Pada Blog Lebih Menarik - Di pagi ini saya akan berbagi sedikit tutorial blogging. Tutorial ini merupakan request dari temen -temen saya. Yang ingin dibuatkan Widget berlangganan seperti di website besar contohnya liputan6. Nah widget ini khusus untuk pemakai blogger.com yang memakai wordpress saya belum bisa membuatnya.
Widget Berlangganan adalah salah satu widget yang digunakan atau ditujukan ke pengunjung yang ingin selalu menerima update artikel terbaru dari blog anda. Caranya juga sangat mudah tinggal kalian masukan email kalian setelah itu submit. Namun ada beberapa widget berlangganan yang menarik dan berbeda - beda tampilannya.
Namun Widget yang akan saya berikan seperti yang ada di Heripedia. Cukup simpel dan hanya perlu memasukan email sobat jika ingin berlangganan. Ada beberapa manfaat jika sobat membuat widget berlangganan ini antara lain ;
- Pengunjung Organik
- Menunjang visitor
- Pengunjung senang karena ada update terus
Cara Membuat Widget Berlangganan Pada Blog Lebih Menarik
1. Silahkan kalian buka Draft Blogger
2. Lalu silahkan Buka Tata Letak ,Kemudian tambahkan HTML Java Script
3. Setelah itu Pastekan Kodenya ke dalam HTML javascript.
4. Langkah terakhir Klik simpan lalu cek blog untuk melihat hasilnya.
Berikut ini adalah kode Scriptnya Widget Berlangganan :
<style>
#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrf4yTGBeRlpH5yVyPoiH9m4jouq7-ttIVg5RUOYtG9ui5_FiCvzfNoHvLchcr-lS8r4kqxTcx4bWfYEDL2_wFXw5cUUfHCI2IAQkV6F-HfiDvHXhN94CB8LPiROBVX4lRhA-vh1dj2_E/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}
.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXvA8q0gPWKZlTdwE9gNazcBZQrfM31bTI-nt4cFH4v1T2I-LWviCB1FbQHBWkjR_8jIXPjGUweWOKQcRXXmE8cF-COWB9Blmw6ErDvuvp-VLVX0al5mP2vkUVmHHDHXjd3RZI6QSqpBs/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}
.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}
.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
#footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}
</style>
<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
<p>Dapatkan Update Terbaru dari Blog Heripedia</p>
<div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=heripedia/com" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=heripedia/com', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="heripedia/com" />
<input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Masukkan email anda disini..."/>
<input class="sidebar-subscribe-box-email-button" title="Cara Membuat Widget Berlangganan Pada Blog Lebih Menarik" type="submit" value="MULAI BERLANGGANAN" /></form>
</div></div></div>
Ini adalah hasil dari script Widget berlangganan
Nah Ganti Tanda yang sudah saya tandai dengan FeedBurner milik sobat sendiri. Nah jika kalian belum memiliki akun feedburner silahkan buat terlebih dahulu sebelum membuat Widget Berlangganan seperti yang saya berikan.
Widget ini saya pasang di sidebar agar lebih menarik dan pengunjung pun mudah untuk melihatnya. Untuk kalian yang ingin berlangganan artikel dari heripedia silahkan isi widget berlangganan tersebut. Karena kami akan selalu memberikan artikel terbaru dan menarik setiap harinya, Yuks kapan lagi buruan berlangganan 100% Gratis.
