Tutorial Menciptakan Kotak Berlangganan Blog Subscription Box Keren Responsive

Cara Membuat Kotak Berlangganan blog Subscription Box Keren Responsive. kotak berlangganan di blog sangat berfungsi sebagai pengunjung menambahkan daftar bacaan blog kalian di blognya. kotak berlangganan sangat benar sebagai meningkatkan pengunjung setia pembaca blog anda. disana belomingin ketinggalan isu update khususnya nan tiba di blog anda. Percaya ataupun belomsemakin banyak nan berlangganan bacaan di blog kalian semakin benar pula dampaknya sebagai blog anda.

Kotak subscribe banyak mendatangkan kebaikan terhadap blog anda, tetapi kalian musti ingat kotak box subscribe nan kalian pasang mustilah responsive, karna bagaimanapun apabila berat makanya mau menimbulkan pengaruh nan sangat jelek sebagai blog anda.

Nah kini mari kami simak tutor membikin Kotak Berlangganan blog Subscription Box Keren Responsive.Selain itu kalian juga dapaat memasang kotak subscribe nan memang bawaan dari blogger.

Untuk membikin kotak subscriber keren juga responsive makanya ikuti langkahnya berikutitu :

Cara Membuat Kotak Berlangganan blog Subscription Box Keren Responsive

1. Kotak subscribe pertama

paste kodeitu dikonten

<style> .rb-email{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjExqLr_8UT3tNKf72_2QFkwuF_sW9vUx3u-MRMhlMy-nSNcZgf4P1xh7wc_GEezd1C-YbqAkVPSePGY7BkUtdY2ASi4mnu3mvxqm_YI6ksLC89lmmEBo4Qy5nBUN-64BeOROTL844iuKgH/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=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 goresan pena jagoankode dengan ID feed burner anda.

2. Kotak subscribe kedua (dibawah postingan)

Masuk kemenu edit HTML

copy isyarat dibawahitu juga paste dibawah isyarat </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=menthorkami&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='menthorkami'/>  <input name='loc' type='hidden' value='en_US'/>  <input class='submit' type='submit' value='Subscribe'/> </center> </form> </div>  </b:if>

Hasilnya nanti mau kesudahannya sepertiitu :

Oke teman silahkan kalian berkreasi dengan isyarat kalian semoga mendapat hasil kotak subscribe nan keren juga responsive.