Cara Membuat Kotak Berlangganan FeedBurner

Bagaimana cara membuat Kotak Berlangganan FeedBurner atau Subscription Email Form yang memiliki tampilan Imut dan lucu? Buat sobat blogger yang mencari kotak berlangganan FeedBurner yang memiliki tampilan yang sedikit imut dan lucu, hari ini saya sudah menyiapkannya. Pada beberap blog, kotak berlangganan FeedBurner ini sering di sebut dengan nama Cool FeedBurner Email Subscription Form. Tampilannya yang simple, Imut dan lucu membuat banyak pemiliki blog memasang widget berlangganan FeedBurner ini.

---

Cara Membuat Kotak Berlangganan FeedBurner

---

• Sign in di blogger.com
• Selanjutnya klik Design dan Page Elements
• Klik Add a Gadget dan pilih HTML JavaScript
• Copy dan Paste kode di bawah ini :

Tampilan 1:

<div style="border: 1px solid #ccc; padding: 5mm;">
<p style="display:none;">Subscription Email Form by <a href="http://www.tutorialblogspot.com/">Tutorial Blogspot</a></p>
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOSI9g5orDW5KJjpeSJwM8PhEGjBFD3ZIUiAk4Z2LH8jxRma7km2YNReyRVcgUIv6XWs35WJV1dPo5DRPNP-G6O0f2n2SzslbycaLCKbwOPxClG67SX4V4uUPkEpUbryxzNjC2I5F1Ey4/"/></center>
<center><span style="font-weight: bold;font-size:small;">Subscribe by E-mail & Get Latest Blog Updates Free</span></center>
<form action="http://feeds.feedburner.com/FEED-ANDA" style="padding: 3px; text-align: center;" target="popupwindow" method="post" onsubmit="window.open('http://feeds.feedburner.com/FEED-ANDA', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><center style="font-weight: normal">Enter your email address:</center><p><center><input type="text" style="width:140px" name="email"/></center></p><center><input type="hidden" value="TntByStc" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /></center></form></div>

Tampilan 2:

<style>
.mbt-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgn2zc5lihM0EOq_WJr_JlCjr_MEA6go_jaTcvWOgpvO841Zm0mUeZ1YmS9HoxaN5v6wn3MyNEck_M4HrbGWHnARZtFbUBTtdebK2XFYKDYMOdsr9zN__1SdRF3E3_VUR3kV5cvXSGu1up/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;
}
.mbt-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;
}
.mbt-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="mbt-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=TntByStc', '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="TntByStc" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbt-emailsubmit" value="Submit" type="submit" />
</form>
</div>

</div>

Tampilan 3:

<style>
.form {
border:0px solid #ccc; /* warna garis pinggir form */
background: #ffffff /* warna background form */
padding:3px; /* spasi form */
width:ancho; /* panjang form */
height:180px /* tinggi form */
}

.rss {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK9vJ_9kJWKVUgizBYcKh8bBrFqwO7BeFhyphenhyphen-7sAwdjmBXIz0UTCVhRCUodtugJvCYmPqvzPtvaMx-SDjownZn9X3Vx_gzKL6SFLIUM7EvSFy6jzg0ILnMGvMWZE6G1alkQMS1bhtHOxalk/s128/rss_feed_logo.png") no-repeat top right;
}

.button {
background: #006699; /* warna tombol subscribe */
color: #FFFFFF; /* warna font subscribe */
font-size: 11px; /* ukuran font subscribe */
font-family: Arial, Tahoma, Verdana; /* font subscribe */
margin-left: 5px; /* margin kiri tombol subscribe */
border: 1px solid #234B69; /* warna garis pinggir tombol subscribe */
padding:3px 5px 3px 5px; /* jarak antara font dengan garis pinggir tombol subscribe */
font-weight: bold;
}
</style>

<div class="form">
<div class="rss">
<div style="font-weight:bold; color:#333333; font-size:15px; padding:10px 5px 5px 10px;"><a href="http://feeds.feedburner.com/blogspot/lON"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUTvxYNEr_N7Hp-D7-72PWZhCJj880OxChPbEr3pS-l7Y3Y4mvjpI8DaIjGN3lX9Ci4JaoA-QoBYMC-645lnS5FzsazGaR3kjJt3w1W8NoZVaAoAPLteFUozQyl3HIbC_uF6CsFcFOFiDP/s800/005.png" /></a> <a href="http://feeds.feedburner.com/blogspot/lON">Catatan "Untuk Sahabat"</a></div>

<div style="font-weight:bold; padding:10px 10px;">Berlangganan Lewat Email !</div>

<div style="padding-left:10px">Dapatkan kiriman artikel terbaru langsung ke email anda!</div>

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/lON', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div style="padding-left:10px; padding-bottom:10px; padding-top:10px"><input type="text" style="width:160px; height:18px" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Ketik email anda disini...&quot;;}" onfocus="if (this.value == &quot;Ketik email anda disini...&quot;) {this.value = &quot;&quot;}" type="text" value="Ketik email anda disini..." /> <input type="hidden" value=blogspot/lon" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="button" type="submit" value="SUBCRIBE" /></div></form>

<div style="padding-left:10px"><a href="http://feeds.feedburner.com/blogspot/lON"><img src="http://feeds.feedburner.com/~fc/blogspot/lON?bg=ff7c00&amp;fg=444444&amp;anim=0" width="88" height="26" style="border:0" alt="" /></a></div>
</div></div>

• Ganti Tulisan yang berwarna Merah dengan alamat Feedburner Kalian.

• Simpan Widget FeedBurner sobat

Terimakasih Atas Kunjungan Sobat Semoga Bermanfaat. 

Cara Membuat Kotak Berlangganan FeedBurner 2015-02-12T18:03:00-08:00 Rating: 4.5 Diposkan Oleh: Unknown