Cara Membuat Kotak Berlangganan (Subscription Box) Responsive Di Sidebar Blog

Cara Membuat Kotak Berlangganan (Subscription Box) Responsive Di Sidebar Blog - Kotak Berlangganan (Subscription Box) merupakan sebuah widget yang berisi formulir email bagi pengunjung blog untuk berlangganan artikel blog kita via email.

Widget Kotak Berlangganan ini mempunyai peran yang cukup penting bagi sebuah blog. Karena pengunjung yang suka dengan konten atau artikel dari blog kita bisa berlangganan via Email. Dengan begitu, setiap kali ada artikel terbaru dari blog kita, maka secara otomatis artikel baru tersebut akan terkirim ke inbox email mereka. Tentu saja hal ini bisa meningkatkan jumlah trafik blog anda.

Kotak Berlangganan ini juga memiliki nilai SEO karena selain bisa menaikkan jumlah pengunjung, kita juga bisa mendapatkan backlink dan link blog kita juga akan tersebar.

Cara Membuat Kotak Berlangganan (Subscription Box)

Sebelum membuat Kotak Berlangganan ini, pastikan kamu sudah memiliki ID FeedBurner. Jika belum, kamu bisa baca artikel Cara Mendaftarkan Blog ke Google FeedBurner.

1. Login ke akun Blogger kamu.
2. Setelah itu, Klik "Tata Letak".
3. Lalu klik "Tambahkan Gadget" > "HTML/JavaSript".
4. "Copy" kode dibawah ini dan "Paste" di kotak "Content".

<style type='text/css'>#sidebar-subscribe-box{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEhwR2DXb-WidxXeB-9Tim6KtF5XhDS_17M6QguD1H6CVpTsickRRMlv_vdRY-UbspQ5XUqm2GpwOLdRLtrvgTYmFaTrB45QFVBD_wSXrfxd9AamdLw4O5e1iiz90dRnhpXcq_y_JEu78U/s1600/colored-strip.png) repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilx4YRipxPHq-o151n-hixJGfhyphenhyphenu3tlWSmYuPTtsF6RkExQZTNw-gvcZn72-fwkeM_RnTJXHeFoMzAKohjHWEkEuVqbg5JWuUgRqMNI_xhbu4okCgv5QgMJah-XJo746X2edeRWiiyN4_J/s1600/bg-pattern.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/AVvXsEhBNB22uJF2AGeAxSBAPbzgZgM6EozlNVN41584mlylDarfuBS6_dgHfiM-TzQZZXxuE8T-dogWFR2JfKuqPGX2fH0J_l13VY1fTpAu8ASmVu3p54KI0c7IPMnTSxsRUr5SWDmbMTM0MqX7/s1600/sprites.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{background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaPIHAGxR_XLzibb7O_qeXrwAYUuauIH7LGGzgHZ_ZTqPo_M4rX-dIZ94M-PrJioIQDkVIhnhwEuSjHNmgXLQDSC-JCassuTWwGMSBlJmTYwBRMLllEXWJ0SPAZYsnYwR7ZvALOz58eJtU/s0/bg-pattern.png) repeat top left;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 ARTIKEL TERBARU LEWAT EMAIL KAMU</p><div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=BlogInfoTekno" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BlogInfoTekno', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="BlogInfoTekno" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address ...."/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form></div></div></div>

Catatan :
Tulisan yang berwarna Merah, silahkan kamu ganti dengan ID FeedBurner kamu.
Tulisan yang berwarna Oranye, silahkan kamu ganti dengan kata - kata sendiri.

5. Save!

Selamat Kotak Berlangganan Responsive telah tampil di sidebar blog kamu.

Demikianlah informasi yang dapat saya bagikan mengenai Cara Membuat Kotak Berlangganan (Subscription Box) Responsive Di Sidebar Blog. Semoga bermanfaat.

Kode Script dikutip dari blogromeltea