Feedburner Responsive Subscribe Box Static Page

Menambah sebuah kotak langganan posting pada sebuah halaman blog merupakan sebuah kebutuhan yang akan memudahkan para pengguna untuk berlangganan setiap posting baru yang dibagikan pada blog.

Subscribe Box yang saya bagikan ini terlihat begitu sederhana dengan tampilan dominan hijau membungkus Box dan pada bagian sudah di hiasi dengan sedikit penambahan radius border.

Letakkan kode dibawah ini pada kerangka blog tepat diatas @media screen and pertama.

/* Skin Design Subscribe Box */

#skin-design {width:350px;padding:26px;background:#009f3c;border:1px solid #fff;border-radius:6px;}

#skin-design h4.title {font-family:Handlee;font-size:22px;color:#FFFFFF;line-height:1;text-align:center;text-transform:uppercase;margin-bottom:0;}

#skin-design h3.title {font-family:'PT Sans',sans-serif;font-size:20px;color:#FFFFFF;line-height:1;text-align:center;text-transform:uppercase;margin-bottom:0;}

#skin-design h4.title span {display:inline-block;font-weight:bold;font-size:38px;margin-top:15px;}

#skin-design p {color:#FFFFFF;margin:0;text-align:center;}

#skin-design p.text {font-family:Poppins;font-size:13px;margin:5px 0;opacity:0.8;}

#skin-design input {border:none;width:100%;text-align:center;box-sizing:border-box;padding:10px 0;margin:0;box-shadow:none;border-radius:0;height:45px;border-radius:2px;}

#skin-design .email-field {margin-top:10px}

#skin-design input.email-field, #skin-design input.name-field {color:#FFFFFF;background:#d56144;}

#skin-design input::-webkit-input-placeholder {color:inherit;opacity:0.8;}

#skin-design input:-moz-input-placeholder {color:inherit;opacity:0.8;}

#skin-design input::-moz-input-placeholder {color:inherit;opacity:0.8;}

#skin-design input::-ms-input-placeholder {color:inherit;opacity:0.8;}

#skin-design input:focus::-webkit-input-placeholder {color:transparent !important}

#skin-design input:focus::-moz-input-placeholder {color:transparent !important}

#skin-design input:focus:-moz-input-placeholder {color:transparent !important}

#skin-design input:focus::input-placeholder {color:transparent !important}

#skin-design input.submit {background:#FFFFFF;color:#f47555;margin-top:20px;font-size:18px;text-transform:uppercase;font-weight:500;box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.05);cursor:pointer;}

#skin-design p.footer-text {margin-top:10px;font-family:Poppins;font-size:9px;}

.your-email {border:none;font-family:Poppins;background:#fff;color:#009f3c;}

.submitbutton {background:#fff;color:#009f3c;text-transform:uppercase;font-weight:700;font-size:18px;font-family: 'PT Sans', sans-serif;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}

.submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}

.submitbutton:hover{background:#fef668;color:#009f3c;}

SAVE template.
Kemudian letakkan kode dibawah ini pada halaman static yang ingin isi dengan kotak langganan / subscribe box.

<center>

<br /><div class="skin-design" id="skin-design">

<h3 class="title">GET MORE STUFF LIKE THIS</h3><h4 class="title">IN YOUR INBOX</h4>

<div class="text">

</div>

<div class="emailfield">

<form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=XXX', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">

<input class="your-email" name="email" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Enter Your Email Address" /><br />

<br />

<input name="uri" type="hidden" value="XXX" /><input name="loc" type="hidden" value="en_US" />

<input class="submitbutton" type="submit" value="Sign Up Now" />

</form>

<div class="clear">

</div>

<div class="footer-text">

</div>

</div>

</div>

</center>

Gantilah XXX dengan kode rss feed yang kamu punya, kemudian save atau publish.

Result

Itulah tadi cara sederhana untuk membuat kotak langganan / subscribe box yang responsive pada halaman static page. Demikian tutorial yang bisa kami sampaikan, jika kurang dipahami silahkan tinggalkan pesan.