Today I would like to share a professional looks subscription box widget that appears on every post on your blog. This is a rectangular widget with a simple but professional looks design that can catch your reader's attention if they already done reading your post. This kind of widget is implemented also on this blog. Below is a screenshot of what the subscription box looks like.

Subscription box below post

Installation Guide

1.) Just like before we need to put some CSS code first so just go to Blogger Dashboard ->> Template ->> Edit HTML, find this code ]]></b:skin> and just above it put the codes given below.
#Box {background: #F5F5F5;text-align: center;width: 100%;display: block;margin: 10px 0 0px 0;height: 80px;border: 1px solid #000066;}
.Internet-Email {color: #444242;width: 35%;background: #fff url( no-repeat 8px 7px;padding: 6px 0px 5px 30px;border-radius: 3px;border: 1px solid #000;margin: 5px 2px;}
.mail-button:hover {background: #464DEC;border: 1px solid #000;}
.mail-button {background: #460F97;cursor: pointer;color: #FFF;font-weight: bold;border: 1px solid #000;border-radius: 2px; font-size: 15px;padding: 4px 15px 4px 19px;margin-left: 15px;}
#Headline {text-align: center;color: #0D862F;font-size: 17px;line-height:20px;padding: 9px 0 0 0; margin-bottom: 4px;font-weight: bold;font-family: sans-serif;}
2.) Find this code <div class='post-footer-line post-footer-line-1'/> on your template, just above this code paste the codes that given below.
<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='Box'><div id='Headline'>Subscribe by Email and Get Free Updates on my Blog</div><form action='' class='btntEmailform' method='post' onsubmit=';;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input name='uri' type='hidden' value='Internetsmash'/> <input name='loc' type='hidden' value='en_US'/> <input class='Internet-Email' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your Email Address&quot;;}' onfocus='if (this.value == &quot;Enter your Email Address&quot;) {this.value = &quot;&quot;}' required='' type='text' value='Enter your Email Address'/> <input class='mail-button' title='' type='submit' value='Sign Up'/></form><div class='clr'/></div></b:if>


Red Color: You may change the text whatever you want should appear on the header part of the subscription box.
Blue Color: Just change it with your own RSS feed Address.

No comments:

Post a Comment

NOTE - Every input is always appreciated. However, comments are always reviewed and it may take some time to appear. Always keep in mind URL without nofollow tag will consider a spam.