Beautiful All in One Subscription Box with Multi Features

Today, I think that we have published more that twenty posts on Blogger Guiders but still, We have not publish any blogger widget that is originally created by us. So, today I have created a beautiful widget for blogger blogs that can be placed below your posts. This is all in one subscription box, So this box have Facebook like box, five social buttons and a subscription box with pop-up function. This subscribe box have some beautiful hover effects.

We have added our credits in this widget because we have created this widget by hard work so please don't remove our credits from this widget. We are giving it for free so you can add it on your blogger blog without any permissions. you can also share this widget on your blog with giving proper credits to us. So, Here's the tutorial to add this widget.

Demo: Scroll the Page and you will see this Subscription Box bellow this post.

How to Implement this Widget on Your Blog?

So here is the tutorial to add this widget on your blog to force your readers to like and subscribe you on different social sites. This widget is also eye-catching and attractive because we have chosen best colors for your blog's reader's comfort.

• Firstly, You have to add FontAwesome icons' CSS on your blogger blog. To do this, kindly add below script on your blog's head section.

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

If you want to learn more about Font Awesome, Kindly look at our Guide

• Now, the main work. Go to Blogger Dashboard > Template > Edit HTML
• Click anywhere on Blogger Editor and press Ctrl + F to open the search bar.
• Type <data:post.body/> in that search bar and press enter. 
• Now, you may find this code at least three times on your template. But you have to paste following code bellow second one.

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class="blogger-guiders-social">
<div id="heading"><i class="fa fa-facebook-official" style="font-size: 18px;"></i>  Like Blogger Guiders on Facebook</div>
<div id="fb-social-blogger-guiders">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php? href=https://www.facebook.com/FacebookUsername&amp;width=402&amp;height=255&amp;colorscheme=light&amp;show_faces=true&amp;show_border=false&amp;stream=false&amp;header=false" style="border: none; overflow: hidden; margin-top: -19px; width: 712px; height: 152px;margin-bottom: 5px;"></iframe>
<div class="social-heading"><i style="font-size:18px" class="fa fa-connectdevelop"></i> Explore Us on Social Web &amp; Subscribe Us! </div>
  <div class="social-links-widget cf" style="
    /* width: 310px; */
    padding-left: 10px;
">
<a class="social-links-facebook" href="http://www.facebook.com/FacebookUsername" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a class="social-links-gplus" href="http://www.google.com/Google+Username" target="_blank">
<i class="fa fa-google-plus"></i>
</a>
<a class="social-links-linkedin" href="LinkedInnUsername" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
<a class="social-links-pinterest" href="http://www.pinterest.com/PinterestUsername" target="_blank">
<i class="fa fa-pinterest"></i>
</a>
<a class="social-links-twitter" href="http://www.twitter.com/TwitterUsername" target="_blank">
<i class="fa fa-twitter"></i>
</a>
<div class="blogger-guiders-sub">
         <form action="http://feedburner.google.com/fb/a/mailverify" id="subscribe" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FeedBurnerUsername', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
 
          <input name="uri" type="hidden" value="FeedBurnerUsername"/>
              <input name="loc" type="hidden" value="en_US"/>
              <input 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..." class="email-form"/>
              <input id="email-button" title="" type="submit" value="Sign up"/>
         </form>
          </div>
</div>
</div>
<div class="credits"><a href='http://bloggerguiders.blogspot.com/2015/04/first-all-in-one-subscription-box-by.html'>Created By Blogger Guiders</a></div>
</div>
<style>
.blogger-guiders-social {
  background: #FFF;
  margin-left: 23px;
  margin-right: 23px;
}
#heading {
  padding: 15px;
  border: 1px solid;
  color: #F2F2F2;
  font-family: oswald;
  text-shadow: 1px 1px 2px #000000;
  background: -webkit-gradient(linear,left 10,right 80,color-stop(0.20,rgba(59, 89, 152, 1)),color-stop(1,#55ACEE));
}
#fb-social-blogger-guiders {
  padding-top: 23px;
  padding-left: 10px;
}
.social-heading {
  padding-left: 10px;
  padding: 10px;
  margin-left: -10px;
  font-family: oswald;
  text-shadow: 1px 1px 1px #000;
  color: #F2F2F2;
  margin-bottom: 13px;
  background: rgb(81, 158, 224);
}
.email-form {
  width: 245px;
  margin-left: 20px;
  margin-top: 3px;
  padding: 10px;
  transition: .3s all;
  background: #F7F7F7;
}
.email-form:hover {
background:#FFF;
}
#email-button {
  background: #519EE0;
  border: 0;
  width: 100px;
  height: 43px;
  border-radius: 6px;
  margin-left: 14px;
  transition: .3s all;
}
#email-button:hover {
background:#818181;
}
.credits {
  font-size: 9px;
  color: #818181;
  padding-right: 4px;
  text-align: right;
}
.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;
}
</style>
</b:if>

Customization

You have to make several customization to make this widget work fine for you.

1. Replace FacebookUsername with your Facebook Page username.
2. Replace Google+Username with your Google+ Profile or Page username.
3. Replace TwitterUsername with your Twitter Profile Username
4. Replace LinkedInnUsername with your LinkedInn username.
5. Replace Pinterest Username with your Pinterest Username.
6. Replace FeedBurnerUsername with your feedburner Username
7. If you want to customize the width of this widget, just play with CSS or leave your comment with the widget you want.

• Now, Save your template and take a round of your blog.

Final Words from Author

This is our first created widget and I am damn sure that you will like this widget and going to implement it on your blog. If you liked this widget and our hard work, so please share this widget on your social media profiles. We will also create and publish more blogger widget. You just have to wait for them. Stay in touch. Thank You!

Share this post