Cara Membuat Kotak Berlangganan (Subscription Box) Blog

Baca Juga

Cara memasang, menampilkan, atau membuat kotak berlangganan (subscription box) di sidebar dan bawah posting blog.

KOTAK Berlangganan (Subscription Box) adalah widget yang berisi "formulir email" bagi pengunjung untuk berlangganan posting atau konten blog kita via email.

Begitu ada update atau posting baru di blog kita, maka akan terkirim secara otomatis ke inbox email mereka.

RSS Subscribe atau Kotak Berlangganan ini bernilai SEO banget buat blog --bisa menaikkan jumlah pengunjung sekaligus mendapatkan backlink, karena link blog kita otomatis tersebar.

"Kotak Ajaib" ini juga bisa ditampilkan bersamaan dengan akun media sosial kita, terutama Facebook, Twitter, dan Google Plus.

Cara Membuat Kotak Berlangganan (Subscription Box) di Blog

TAHAP PERTAMA

Sebelum membuat kotak berlangganan, Anda HARUS lebih dulu membuat RSS Feeds di Feedburner.

Dari sana Anda akan mendapatkan alamat Feedburner, seperti http://feeds.feedburner.com/cbbloggerlab. Yang berwarna biru itu adalah ID Feedburner yang nanti akan digunakan saat membuat kotak berlangganan.

Di Feedburner pula kita akan bisa share otomatis update posting blog ke Twitter. Manfaatkan sebagai bagian dari SEO Media Sosial!

TAHAP KEDUA: BANYAK PILIHAN!

Banyak sekali pilihan kotak berlangganan untuk dipasang di blog kita, baik di sidebar maupun di bawah postingan.

Kotak Kode Script

#1. SIMPLE

Tips yang pertama ini adalah membuat kotak berlangganan simple (sederhana), seperti yang dipasang di Sidebar CB Blogger Lab.

Cara Memasangnya:

1. "Layout" > "Add a Gadget" > pilih "HTML/JavaScript"

2. Copy + Paste kode di bawah ini di "content:

<style>

.rb-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlkfxnMX4R-AXitfHleNTYT9W0obfv1oKo2Lpi_yxtZIdXhTHmxLCbhjnLbNY7_u7pM_Jf9UxFlabmlrR1xdSTK1EXa8yh34QB6aqSJKJNu12XwNWO31PZM6aqorWHyt-HG-8rkNcUQA7-/s1600/email.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}

.rb-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.rb-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:170px;
color:#666;}
</style>

<div class="rb-email">
Subscribe via Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=cbbloggerlab', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here...&quot;;}" onfocus="if (this.value == &quot;Enter email address here...&quot;) {this.value = &quot;&quot;;}" value="Enter email address here..." type="text" />
<input type="hidden" value="cbbloggerlab" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="rb-emailsubmit" value="Submit" type="submit" />
</form>
</div>

3. Ganti cbbloggerlab dengan ID Feedburner blog Anda!

4. Save!

#2. DI BAWAH POSTINGAN
Cara Memasang Subscription Box di Bawah Posting Blog. Tampilannya seperti ini:

Cara Memasangnya:
1. Template > Edit HTML
2. Copy + Paste kode berikut ini di bawah kode <data:post.body/>

<style>
#mbt-sub-box{background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#1a2638));;border:1px
solid #1A2638;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;background: -moz-linear-gradient(top, #333, #1a2638)}

#mbt-sub-box h1{margin-top:5px; color:#FFF;font-family:georgia;font-size:25px;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #000;line-height:35px}

#mbt-sub-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:280px; color:#666; font-family:georgia; margin-bottom:5px;}

#mbt-sub-box .submit{background: -webkit-gradient(linear, left top, left bottom, from(#369a18), to(#205f0d));background: -moz-linear-gradient(center top , #369A18, #205F0D) repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;text-shadow:0 1px 2px #000;width:120px; font-family:georgia; margin-left:5px;}

#mbt-sub-box .submit:hover{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}

#mbt-sub-box .submit:active{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
</style>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='mbt-sub-box'><h1>Subscribe To Get FREE Tutorials!</h1><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=cbbloggerlab&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email Address...&quot;;}' onfocus='if (this.value == &quot;Enter Your Email Address...&quot;) {this.value = &quot;&quot;}' size='30' type='text' value='Enter Your Email Address...'/> <input name='uri' type='hidden' value='cbbloggerlab'/> <input name='loc' type='hidden' value='en_US'/> <input class='submit' type='submit' value='Subscribe'/></center></form></div>
</b:if>

Jangan lupa Ganti cbbloggerlab dengan ID Feedburner Anda.

3. Save Template!

#3. MASIH DI BAWAH POSTINGAN
Tampilannya seperti ini:

Cara Membuatnya:
1. "Template" > "Edit HTML"
2. Copas kode berikut ini di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>

form.feedburner{

margin:20px 0 0;

display:block;

clear:both;

}

.RBstyle{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFS1_Yrg9h_YHYt5Awtd7PEI-UmJBoJI_l9kE-_c2TZ-9uREs7XVVyC3w3CQk_ebsLWP1Nw9Yi9I_4SRYPxk2rDssMURO6ILEqPew4wlhyphenhyphennz6QOCaF8SssbcUvbe0aRsLLwy64oGrXMmSD/s400/email_icon.png) no-repeat scroll 4px center transparent;

padding:7px 15px 7px 35px;

color:#666;

font-weight:bold;

text-decoration:none;

border:1px solid #D3D3D3;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

border-radius: 4px;

-moz-box-shadow: 1px 1px 2px #CCC inset;

-webkit-box-shadow: 1px 1px 2px #CCC inset;

box-shadow: 1px 1px 2px #CCC inset;

}

.RBsubmit{

color:#666;

font-weight:bold;

text-decoration:none;

padding:6px 15px;

border:1px solid #D3D3D3;

cursor: pointer;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

-goog-ms-border-radius: 4px;

border-radius: 4px;

background: #fbfbfb;

background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));

background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );

background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

}

#emailwidget-outer {

-moz-border-radius: 10px 10px 10px 10px;

-webkit-border-radius: 10px 10px 10px 10px;

-goog-ms-border-radius: 10px 10px 10px 10px;

border-radius: 10px;

background: none repeat scroll 0 0 transparent;

border: 1px solid #D3D3D3;

padding: 8px;

-moz-transition: all 0.3s ease-out;

-o-transition: all 0.3s ease-out;

-webkit-transition: all 0.3s ease-out;

-ms-transition: all 0.3s ease-out;

transition: all 0.3s ease-out;

width:480px;

}

#emailwidget-outer:hover{

background: none repeat scroll 0 0 #FFF;

-moz-box-shadow: 1px 1px 2px #CCC inset;

-webkit-box-shadow: 1px 1px 2px #CCC inset;

box-shadow: 1px 1px 2px #CCC inset;

}

#emailwidget-outer td{

padding:3px 0;

}

</style>

<center>

<div id='emailwidget-outer'>

<div id='emailwidget'>

<table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>

<tbody>

<tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>

<td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 22px; margin:0px 0px 5px 0px; '>Get free daily email updates!</p>

<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=cbbloggerlab&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>

<input name='uri' type='hidden' value='cbbloggerlab'/>

<input name='loc' type='hidden' value='en_US'/>

<input class='RBstyle' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/>

<input alt='' class='RBsubmit' title='' type='submit' value='Submit'/>

</form>

</td>

<td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'><p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px; '>Follow us!</p>

<a href='http://feedburner.google.com/fb/a/mailverify?uri=cbbloggerlab' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPtNrdRLjLzXLKFDgxuTPvHtcpQm09XJ5z3o7_QrtaznLp2VtKxsWS7dXyD4EwKsOjxwjp3nHRaSstIM0Aj7FRwDxou4z8UAKaLEeV74TI4BxAb6EEj3Fp83YjTBCN7dh7aXH-NCxIEJM/s1600/rss-30×43.png'/></a>

<a href='http://twitter.com/username' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVpviYex-jIZ4xTnK0vQt5lAA8FH2bpt-nHK78oCDo7t3HSUY-SKjrBHLg52jca_vMGeLLMXGToOHCr6Ka8R_7op7Ghvees6c2QmHzCCiK-1dgPVb-LW-HdDP0wEfTid5Cc16eyzmrTcA/s1600/twitter-30×43.png'/></a>

<a href='http://www.facebook.com/username' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1kHnuvv9N03-HaU6rv8vOKwSD7Bttinz2XRxOuFxWGh39AGY4LxQ2GJMPEr2YY_ec9S8cM_K9P6EWnbLj9Fnz66CukaZKj0KqsUhYHvcBfBvRiwAt1mQ6C5XPje7HSqK6itTI8P8jptw/s1600/facebook-30×43.png'/></a>

<a href='GOOGLE PLUS URL' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4kuvrhDeonN_N_WIDjkmPxgkA3R3RFSRWA225TIKMvaoswERcC_DffGdIxz0z1mTqg7vVdjdPqWdGOL4Z1ILMi12IX1kV0qlr4XUyArHb1HDh_wuEfFPWPOpyo7i98RGM97nApI0eae0/s1600/googleplus-30×43.png'/></a>

</td>

</tr>

</tbody></table>

</div></div>

</center>

</b:if>

3. SAVE TEMPLATE!

Demikian Cara Membuat Kotak Berlangganan (Subscription Box) di Blog dengan beberapa alternatif tampilan. Jika tidak ada yang cocok, silakan klik sumber-sumber di bawah ini. Good Luck!

Sumber1
Sumber2
Sumber3
Sumber4