 |
| Subscription box for blogger 2016 |
The subscription box is an easy way to increase your traffic. By this tool, you can collect your blog reader to send automatic updates to their subscribed email addresses. Most of the peoples are searches for this type of gadgets for their websites and blogs. This stylish and beautiful work of HTML5 and css3
subscription box for a blogger is now available on Posttutorials.
A user can write her/his name and email both in this box. you can also enable or disable name feature by your will. I'll describe later how you can disable name feature in blogger subscription box.
Also below the box, social links icons are available with the beautiful design. You can add your social links below the gadget.
Here is the code of subscription box for blogger 2016 edited design:
<style>
#bgt-subscribe-box .header{
background: none ;
color: #a333333;
font-size: 28px;
line-height: 36px;
padding: 15px 25px;
font-weight: 700;
font-family: open sans;
text-align: center;
}
#bgt-subscribe-box {
width:auto;
height:auto;
background:#ffffff;
}
#bgt-subscribe-box p {
font-family:'Open Sans';
font-size:13px;
color:#888;
line-height:20px;
padding:10px 20px 0 20px;
margin:0;
}
#bgt-subscribe-box .bgt-emailfield {
padding:0px 20px 10px;
}
#bgt-subscribe-box .bgt-emailfield input {
background:#fff;
color:#bbb;
padding:10px;
margin-top:10px;
font-size:13px;
font-family:'Open Sans';
width:91%;
border:0;
border:1px solid #ccc;
transition:all 0.4s ease-in-out;
}
#bgt-subscribe-box .bgt-emailfield input:focus {
outline:none;
border:1px solid #d9d9d9;
color:#888;
}
#bgt-subscribe-box .bgt-emailfield .bgt-submitbutton {
background:#3396b9;
color:#fff!important;
text-transform:uppercase;
font-weight:bold;
border:none;
outline:none;
width:100%;
cursor:pointer;
transition:all 0.4s ease-in-out;
}
#bgt-subscribe-box .bgt-emailfield .bgt-submitbutton:active {
outline:none;
border:none;
background:#444;
color:#fff;
}
#bgt-subscribe-box .bgt-emailfield .bgt-submitbutton:hover{
background:#333333;
color:#fff;
}
</style>
<div id='bgt-subscribe-box'>
<div class='bgt-emailfield'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=posttutorials', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input type='text' name='name' onblur='if (this.value == "") {this.value = "Enter Your Name";}' onfocus='if (this.value == "Enter Your Name") {this.value = "";}' value='Enter Your Name'/>
<input type='text' name='email' onblur='if (this.value == "") {this.value = "Enter Your Email Address";}' onfocus='if (this.value == "Enter Your Email Address") {this.value = "";}' value='Enter Your Email Address'/>
<input name='uri' type='hidden' value='posttutorials'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='bgt-submitbutton' type='submit' value='Subscribe Now!'/>
</form>
</div>
</div>
<style>
.social-side{
text-align: center;
color: #3396b9;
}
li {
.universal-inline-block;
vertical-align: middle;
a {
display: block;
font-size: 30px;
margin: 0 5px;
text-decoration: none;
}
a:hover, a:focus, {
i {
transition: none;
color:black;
}
</style>
<div id="social-side" align='center' style='clear: both;'>
<a href='http://www.facebook.com/PostTutorials'>
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
<a href='http://posttutorials.com/atom.xml'><i class="fa fa-rss" aria-hidden="true"></i>
</a>
<a href='https://plus.google.com/+PostTutorials'><i class="fa fa-google-plus" aria-hidden="true"></i>
</a>
<a href='http://twitter.com/PostTutorials'><i class="fa fa-twitter" aria-hidden="true"></i>
</a>
</div>
Make sure to change your Feed burner username with your username . Remove Posttutorials and replace with your own.
find the following code:
<input name='uri' type='hidden' value='posttutorials'/>
Change Value="XXXX" With Feedburner username,
#3396b9
this color code is used for default color. You can change everywhere in the code with your color to make gadget reliable for your website or blog.
Also, change social links with your social ties:
<div id="social-side" align='center' style='clear: both;'>
<a href='http://www.facebook.com/PostTutorials'>
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
<a href='http://posttutorials.com/atom.xml'><i class="fa fa-rss" aria-hidden="true"></i>
</a>
<a href='https://plus.google.com/+PostTutorials'><i class="fa fa-google-plus" aria-hidden="true"></i>
</a>
<a href='http://twitter.com/PostTutorials'><i class="fa fa-twitter" aria-hidden="true"></i>
</a>
</div>
Find the following code and put your usernames in the codes.
Thanks a lot, I hope you like this, and if you like this or have any problem, please comment below.
Like and subscribe to my website.
