Cara Membuat Subscribe Box Responsive Di Blog

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 yang masuk pada blog Anda.

Pada tutorial kali ini, dewa plokis akan memberikan cara membuat subscribe box responsive yang nantinya akan berbeda tampilannya pada dekstop dan mobile atau gadget dan tanpa menggunakan java script sehingga nantinya tidak begitu memberatkan kinerja dari template blog saat di buka.

Penambahan tombol subscribe ini sepertinya merupakan sebuah kewajiban bagi pengguna blog. Banyak diantara pengguna blog yang tidak begitu memperhatikan widget yang satu ini. Padahal "kolom berlangganan" ini merupakan fitur yang sangat penting. widget ini memberikan kemudahan kepada para pembaca blog Anda untuk bisa mendapatkan informasi tentang info maupun artikel terbaru dari blog Anda melalui email yang sudah di tautkan pada kotak subscribe ini.

Bagaimana cara membuatnya?. Sebelumnya Anda harus memiliki Akun Feedburner terlebih dahulu, Jika belum, silahkan di check pada artikel sebelumnya tentang cara membuat akun feedburner terbaru.

Cara Membuat Subscribe Box Responsive

1. Pasang kode CSS berikut dibawah kode <style type='text/css'> 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. Letakkan kode HTML berikut tepat diatas </article> atau setelahnya juga bisa menyimpan tepat di bawahnya. Namun untuk subscribe box yang saya gunakan di blog saya ini, saya menyimpannya tepat diatas </article>

<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=dewaplokis' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=dewaplokis&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='dewaplokis'/>
<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 dewaplokis dengan nama akun feedburner Anda.

3. Save tempalte Anda dan lihat hasilnya.

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

Share