Memiliki blog tentulah mengharapkan pengunjung untuk membaca atau melihat isi blog Anda. Postingan blog mungkin bisa menarik perhatian pengunjung namun tentu saja pelengkap dari dari semua itu itu juga termasuk tema atau template blog Anda. Jika ingin memiliki template yang bagus dan keren tentulah harus memperhatikan beberapa elemen penting didalamnya, salah satunya adalah Anda wajib untuk memiliki subscribe box atau kotak berlangganan. Kotak berlanggana ini memudahkan Anda untuk menerima setiap subscribe email. Pada tutorial kali ini, saya akan memberikan cara membuat subscribe box resposive yang nantinya akan berbeda tampilannya pada dekstop dan mobile.

Cara Membuat Subscribe Box Responsive

1. Pasang kode CSS berikut dibawah kode <style> atau sebelum kode </style>

/* Subscribe Box */
#subscribe-css {
overflow:hidden;
clear:both;
position:relative;
margin:20px 0;
border-bottom:3px solid rgba(0,0,0,0.03);
border-top:3px solid rgba(0,0,0,0.03)
}
.subscribe-wrapper {
color:#fff;
font-size:16px;
line-height:18px;
text-align:center;
margin:0 0 20px 0;
text-transform:none;
font-weight:400;
width:100%
}
.subscribe-form {
clear:both;
display:block;
overflow:hidden
}
form.subscribe-form {
clear:both;
display:block;
margin:0;
width:auto;
overflow:hidden
}
.subscribe-css-email-field {
background:#fafafa;
color:#999;
margin:10px;
padding:10px 20px;
border:1px solid rgba(0,0,0,0.06);
}
.subscribe-css-email-button {
background:#999;
color:#fff;
cursor:pointer;
padding:10px 25px;
margin-left:5px;
font-size:15px;
border:none;
font-weight:700;
border-radius:2px;
transition:all .6s
}
.subscribe-css-email-button:hover {
background:#e74c3c;
}
#subscribe-css p.subscribe-note {
margin:20px;
text-align:center;
font-size:130%;
color:#999;
font-weight:400;line-height:1em
}
#subscribe-css p.subscribe-note span {
font-weight:700;
}

@media only screen and (max-width:768px) {
#search-form td.search-box {
padding:0 0 0 10px;
}
#search-form td.search-button {
width:1%;
}
#search-form input#search-box[type="text"] {
margin:0;background:#fff;
}
#search-form input#search-box[type="text"]:focus {
background:#fdfdfd;
outline:none;}
#subscribe-css p.subscribe-note {
margin:0 0 20px 0
}
 .subscribe-wrapper {
width:100%;
}
#subscribe-css p.subscribe-note {
float:none;
}
 .subscribe-wrapper {
text-align:center;
float:none;
width:auto;
}
 .subscribe-css-email-field {
margin:14px 10px;width:94% !important;
}
 .subscribe-css-email-button {
margin:0 10px;width:94% !important;
}

2. Letakan kode HTML berikut ini diatas </article> atau setelahnya juga bisa menyimpan tepat dibawahnya. 

<div id='subscribe-css'>
<p class='subscribe-note'>
SUBSCRIBE TO OUR 
<span>
NEWSLETTER
</span>
</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=medikre' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=medikre&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='medikre'/>
<input name='loc' type='hidden' value='en_US'/>
<input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter Email '/>
<input class='subscribe-css-email-button' title='' type='submit' value='Submit'/>
</form>
</div>
</div>
</div>

Ganti medikre dengan nama akun feedburner Anda.

Demikian tutorial kali ini tentang cara membuat subscribe box responsive pada blog. Jika ada yang masih kurang jelas, silahkan ajukan pertanyaan di kolom komentar, dan jika postingan ini bermanfaat silahkan di share. Terima kasih