Cara Membuat Subscribe Box Responsive Diatas Footer

Subscribe box alias kotak berlangganan sangat direkomendasikan ada diblog anda agar pembaca dapat dengan mudah mengupdate artikel terbaru melalui email. Kebanyakan Subscribe box berada disidebar ataupun dibawah postingan, nah bagaimana jika benda yang sangat berguna ini kita letakan diatas footer dengan ukuran yang relative besar. Kira-kira apa yah manfaatnya?

1. Mempermudah Pembaca Mencari Subscribe Box diblog anda.

2. Menarik perhatian Pembaca untuk mensubmit emailnya.

3. Membuat Blog anda terlihat keren dan profesional.

4. Manfaat lainnya, cari tahu setelah anda memasangnya.

Pada kesempatan kali ini saya akan share cara membuat subscribe box responsive diatas footer, anda dapat memodifikasinya sendiri sesuai desain template yang digunakan. 

Cara Membuat Subscribe Box Responsive Diatas Footer

1. Masuk ke Blog anda, Dashbor > Template > Edit HTML

2. Cari kode ]]></b:skin> , untuk mempermudah pencarian gunakan CTRL+F

3. Copy kode dibawah ini dan pastekan diatasnya.

/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#222;overflow:hidden;border-top:4px solid #eee;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;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:#333;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#587CA2;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s;max-width:120px}
.subscribe-css-email-button:hover{background:#356EAB;}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}
#subscribe-css p.subscribe-note{margin:0 0 20px 0;width:100%;}
.subscribe-wrapper {width:100%;}}

Keterangan : Ganti kode warna merah sesuai warna yang anda inginkan. Silahkan menuju Halaman Colo-Picker untuk mendapatkan kode yang anda butuhkan.

4. Sekarang cari kode footer, anda dapat memanfaatkan Inspect Element untuk mencarinya . Pada halaman blog anda tepatnya pada bagian footer, Klik Kanan > Inspect Element (CTRL+Shift+i). Contoh kode footer <div id="footer-wrapper"

5. Setelah anda mendapatkan kode footer, pergi menuju Edit HTML lalu pastekan kode dibawah ini tepat diatas kode footer yang telah anda ketahui.

<p class='subscribe-note'><span>BERLANGGANAN</span>
<span class='itatu'></span> VIA EMAIL</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=xxxxx' class='subscribe-form' method='post' onsubmit='window.open (&#39;http://feedburner.google.com/fb/a/mailverify?uri=xxxxx&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='xxxxx'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Alamat Email Anda'/><input class='subscribe-css-email-button' title='' type='submit' value='submit'/></form>
</div>
</div>
</div>
<div class='clear'></div>

Keterangan : Ganti kode warna merah dengan ID Feedburner anda.

Demikian cara membuat Subscribe Box Responsive diatas Footer, jika ada kesulitan dalam membuatnya. Silahkan berkomentar, saya akan membantu anda. Semoga bermanfaat