How to Add New Shiny Subscribe Box with Social Icons For Blogger?

We all know that 50% or more than 50% traffic we get toward our blog, come from facebook, twitter, Google+ and 20% of that 50% comes from Subscribed readers (if you have a big subscription list). To get more subscribers, Bloggers use Subscribe Box that help their blog's visitors to subscribe to the blog directly from the sidebar. So today, we brought you a shiny widget that will boost your blog’s traffic. Today we brought you a shiny Subscribe Box which is catchy, attractive and shiny! We have not only included subscribe box on this widget, but also added beautiful font awesome icons that works on any browser and on any screen! And also catchy colorful social icons because social promotion is also important.

I think, you have already noticed this subscribe box in our sidebar. We tested this widget and found it useful so releasing it here, on Blogger Guiders.

How to add this Subscribe Box to your blogger blog?

The steps are really easy to implement this subscribe box in your blogger blog. But little attention is required.
Steps are following:

• Go to Blogger Dashboard > Template > Edit HTML
• Search for ‘]]></b:skin>’ in your template.
• Above it, place the following CSS code:

/*------- Subscribe Box By Blogger Guiders
---------------------------------------- */
.subscribe-box {
box-shadow: 2px 2px 2px 2px #000;
padding: 30px;
background: #000;
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}
.sub-box {
text-align: center;
}
.subscribe-heading {
background: #FEBD17;padding: 9px;
letter-spacing: 2px;
font-size: 14px;
font-family: oswald;
border-radius: 8px;
box-shadow: 2px 2px 1px #000;
text-shadow: 2px 2px 1px #000;
padding-left: 10px;
padding-top: 8px;
color: #FFF;
border: 2px dashed #fff;
padding-right: 10px;
}
.sub-icon {
float: right;
font-size: 81px;
margin-left: 15px;
text-shadow: 0px 2px 1px #FFFFFF;
color: #FEBD17;
margin-top: 22px;
}
.subscribe-content {
margin-top: 27px;
font-size: 12px;
color: #FFF;
text-align: justify;
text-shadow: 0px 0px 1px #818181;
font-family: -webkit-body;
}
#email-form {
margin-left: 0;
font-family: oswald;
font-size: 12px;
color: #818181;
transition: .3s;
width: 100%;
margin-bottom: 10px;
height: 43px;
border: 2px solid #DFDFDF;
padding: 10px;
}
#email-button:hover {
background: #646464;
}
#email-form:hover {
border-color:#000;
}
#email-button {
background: #FEBD17;
border: 0;
width: 100%;
color: #FFF;
font-size: 12px;
font-family: oswald;
height: 43px;
border-radius: 6px;
transition: .3s all;
}
#email-button:hover {
color: #FFF;
}
#HTML10 {
margin-top: 43px!important;
}
#email-button2 {
background: #FEBD17;
border: 0;
width: 85px;
color: #FFF;
font-size: 12px;
font-family: oswald;
height: 43px;
border-radius: 6px;
transition: .3s all;
}
#email-button2:hover {
background:#969696;
}
#email-form2 {
margin-left: 0;
font-family: oswald;
font-size: 12px;
color: #818181;
transition: .3s;
width: 161px;
height: 43px;
border: 2px solid #DFDFDF;
padding: 10px;
}
#email-button:hover {
background: #646464;
}
#email-form2:hover {
border-color:#000;
}

/* Widget social links */
.social-links-widget a{
display:inline-block;
line-height:50px;
width:50px;
height:50px;
float:left;
background:#444;
color:#fff !important;
font-size:18px;
text-decoration:none;
text-align:center;
margin:0 10px 10px 0;
/*border-radius*/
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:100px;
box-shadow: 0px 0px 7px 7px #FFF;
}
.social-links-widget a.social-links-facebook{
background:#3b5998;
border:0px solid;
transition:all .3s;
}
.social-links-widget a.social-links-gplus{
background:#dd4b39;
border:0px solid;
transition:all .3s;
}
.social-links-widget a.social-links-linkedin{
background:#0976b4;
border:0px solid;
transition:all .3s;
}
.social-links-widget a.social-links-pinterest{
background:#cc2127;
border:0px solid;
transition:all .3s;
}
.social-links-widget a.social-links-twitter{
background:#55acee;
border:0px solid;
transition:all .3s;
}
a.social-links-facebook:hover{
background: #2B4680;
transition: all .3s;
border-left: 5px solid #183874;
}
a.social-links-gplus:hover{
background: #BA3D2E;
border-left: 5px solid #963327;
transition: all .3s;
}
a.social-links-linkedin:hover{
background: #086194;
border-left: 5px solid #074F77;
transition: all .3s;
}
a.social-links-pinterest:hover{
background: #AD191E;
border-left: 5px solid #84161A;
transition: all .3s;
}
a.social-links-twitter:hover{
background: #4A94CD;
border-left: 5px solid #37729E;
transition: all .3s;
}
.credits {
  color: #9E9E9E;
  font-size: 7px;
  float: right;
}

Customizations:

1. To remove shiny effect from the background, remove black colored codes from above code.
2. To change the background color of the widget, change the hexa color code of green-bold code.
3. To change heading color, change the hexa color code of blue-bold code.
4. To change the color of font awesome icon, just change the hexa color code of pink-bold code.
5. For any other customization help, just comment below.

• Now, save your template.
• Go to Layout > Add a Gadget > HTML JavaScript
• Leave title field as it is and move to Content field.
• On Content field, paste below code:

<div class="subscribe-box"><div class="sub-box">
  <div class="subscribe-heading">
  <i class="fa fa-envelope-o"></i> Subscribe Us
  </div>
  <div class="sub-icon">
  <i class="fa fa-envelope"></i>
</div><div class="subscribe-content">
    Have You Liked Our Posts and Article About Blogging? Want to Get Them Fastly? Just Put Your Nice Email ID In the Box Below and Click Subscribe Button! Then You Will Get All Our Updates Directly On Your Inbox Without Any Hassle!</div>
<form action="http://feedburner.google.com/fb/a/mailverify" id="subscribe" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggerguiders', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" style="
    margin-top: 20px;
">
<input name="uri" type="hidden" value="bloggerguiders" />
<input name="loc" type="hidden" value="en_US" />
<input class="email-form" id="email-form" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" type="text" value="Enter your email..." />
<input id="email-button" title="" type="submit" value="Sign Up" />
</form>
<div class="sub-box" style="
    margin-top: 30px;
"><div class="subscribe-heading" id="heading2" style="
">
  Follow Us On Social Sites
  </div></div>
<div class="social-links-widget cf" style="
    margin-top: 34px;
    margin-left: 10px;
">
<a class="social-links-facebook" href="http://www.facebook.com/BloggerGuiders" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a class="social-links-gplus" href="http://www.google.com/+BloggerGuidersBlogspot1" target="_blank">
<i class="fa fa-google-plus"></i>
</a> 

<a class="social-links-pinterest" href="http://www.pinterest.com/ShivanshVerma" target="_blank">
<i class="fa fa-pinterest"></i>
</a>
<a class="social-links-twitter" href="http://www.twitter.com/BloggerGuiders" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</div></div></div>

<div class='credits'>
Created By Blogger Guiders
</div>

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Customizations:

1. To change the text in the widget, edit the text which is in sky blue (aqua) color.
2. Change blue colored links with your social links.
3. Change light green (lime) colored text with your feedburner username.

• Click on Save Button!
• Done!

Now take a look to your blog. A nice subscription box will be visible their!

Final Words from Author

I hope you liked this widget and I am damn sure that this widget will help you in increasing your subscribers number of your blog. If you get any problem while setting up this widget on your blog, just comment below and we will come to help you. Thanks!

Share this post