How To Make Responsive Subscription Box Above Footer. Subscription box to increase your traffic and get more readers. Subscription Box as a facilitation for a blog or website to share your newest articles. For some condition, when the visitors read your post and they feel happy since reading it. They want to get your update article, it will make them enthusiastic to subscribe your blog. That is important part, why you should add subscription box for your blog. Through subscription below, you will be easy to increase the number of blog readers and also share your article easily to daily readers. So, please add subscription box on your website right now. Feature of this subscription box.
- It is clean view for personal computer and mobile.
- It is responsive for personal computer and mobile.
- It is simple and cool.
For the first step, looking for ]]></b:skin> or </style> and put the CSS below above it. The script below can be edited with your style. If you interested to change the background color, size, margin, etc.
/* 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.su
bscribe-note{margin:0 0 20px 0;width:100%;}
.subscribe-wrapper {width:100%;}}Next step is you have to find <footer id='footer-wrapper'> or <div id='footer-wrapper'>. Make sure you find the appropriate one. Copy the script below and Paste above it.
<p class='subscribe-note'><span>SUBSCRIPTION</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=Bloggerokay' class='subscribe-form' method='post' onsubmit='window.open ('http://feedburner.google.com/fb/a/mailverify?uri=Bloggerokay', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='Bloggerokay'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Your E-mail here'/><input class='subscribe-css-email-button' title='' type='submit' value='submit'/></form>
</div>
</div>
</div>
<div class='clear'></div>Actually, if you able to understand about HTML Template, you can add the script above in the other place. For example, you can add below post or you can set this one as a widget. I have tried, it is work. If you find some problem in applying the script above, I really pleased to help you.
Advertisement
EmoticonEmoticon