Cara Membuat Kotak Berlangganan Blog Subscription Box Keren Responsive

Cara Membuat Kotak Berlangganan blog Subscription Box Keren Responsive. kotak berlangganan pada blog sangat berfungsi untuk pengunjung menambahkan daftar bacaan blog anda di blognya. kotak berlangganan sangat baik untuk meningkatkan pengunjung setia pembaca blog anda. mereka tidak ingin ketinggalan berita update khususnya yang datang pada blog anda. Percaya atau tidak semakin banyak yang berlangganan bacaan pada blog anda semakin baik pula dampaknya bagi blog anda.

Kotak subscribe banyak mendatangkan kebaikan terhadap blog anda, namun anda harus ingat kotak box subscribe yang anda pasang haruslah responsive, karna bagaimanapun jika berat maka akan menimbulkan dampak yang sangat buruk bagi blog anda.

Nah sekarang mari kita simak cara membuat Kotak Berlangganan blog Subscription Box Keren Responsive.Selain itu anda juga dapaat memasang kotak subscribe yang memang bawaan dari blogger.

Untuk membuat kotak subscriber keren dan responsive maka ikuti langkahnya berikut ini :

Cara Membuat Kotak Berlangganan blog Subscription Box Keren Responsive

1. Kotak subscribe pertama

Baca Juga:

Cara Membuat Kotak Berlangganan Blog Subscription Box

paste kode ini dikonten

<style>
.rb-email{
background:url(https://i0.wp.com/www.jagoankode.com/wp-content/uploads/2017/09/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=jagoankode', '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="jagoankode" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="rb-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Ganti tulisan jagoankode dengan ID feed burner anda.

2. Kotak subscribe kedua (dibawah postingan)

Masuk kemenu edit HTML

copy kode dibawah ini dan paste dibawah kode </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=menthorkita&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='menthorkita'/> 
<input name='loc' type='hidden' value='en_US'/> 
<input class='submit' type='submit' value='Subscribe'/>
</center>
</form>
</div> 
</b:if>