How To Add Social Subscription in Blogger Blog


Social Subscription box
In this article I’m going to share social subscription widget This social subscription will enable users to like/follow you on the social networks such as Facebook, Twitter, Google+ and subscribe your feeds using the built-in feed burner email subscription widget. Social networks are playing a vital role in blogging these days. The count of followers, fans and subscribers shows the popularity of your blog/website. They also allow you to connect with your online readers and share your content with them. You can see the preview of this social subscription widget in the screenshot given below. Later in this article I am going to tell you how you can add this widget to your blog. to add this widget follow these step 

  • Log in you account 
  • Click on the template
  • Click on the Edit HTML
  • Now Find the </head>
  • Press CTR+F to find </head> and past the below code above </head>
  • Save the template 

<script type=”text/javascript”>
(function() {
var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
po.src = ‘https://apis.google.com/js/plusone.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
})();
</script>

120

1.Now go back
2.click on the layout
3.click on the add widget
4.select HTML/JAVASCRIPT
5. copy the below code and past 

120

<style type=”text/css”>
/* RB Style sheet for subscription box */
#rb-subscribe-box .fb-like-box { border: 1px solid #EBEBEB; padding: 5px; background:#fff;}
#rb-subscribe-box .gplusone { background: #f7fcfc; border: 1px solid #EBEBEB; border-top: 1px solid #fff; color: #000; font-size: 10px; line-height: 1px; padding:5px;}
#rb-subscribe-box .twitter-follow { background: #eef9f9; border: 1px solid #dff6f6; border-top: 1px solid #fff; padding:5px 11px;}
#rb-subscribe-box .email-box {background:#e3edf4; padding:11px;}
#rb-subscribe-box .email-box h4{color: #555;font-family: Arial;font-size: 12px; margin: 0 0 10px;}
#rb-subscribe-box .email-box .txt,#rb-subscribe-box .email-box .txt:focus{background:#fff; float:left; color:#92c3c3; border:1px solid #E36B0A; border-radius: 3px; padding: 7px 10px 8px; width: 150px;}
#rb-subscribe-box .email-box .btn,#rb-subscribe-box .email-box .btn:focus{background:#E36B0A; border:1px solid #AD5513; color:#fff; border-radius: 3px; float: right; font-size: 12px; font-weight: bold; padding: 7px 8px; text-shadow: 1px 1px 0 #D08D00;}
#rb-subscribe-box .email-box .btn:hover{background:#FF9b00;}
input, textarea {
font-family: Georgia, “Times New Roman”, Times; font-size: 1em;}

#rb-text {

border: 4px solid #C8e993;
box-shadow: 0 0 5px
#EEE;
line-height: 10px;
margin: 10px 10px 15px 0;
padding: 10px;
width:300px;
}
#rb-text h3 {
color:white;
border-bottom: 1px dotted
white;
line-height:1.385em;
font-size: 18px;
padding: 0;
margin: 0 0 10px;
border-bottom: 1px dotted
#AAA;
font-wieght: bold;
text-transform: uppercase;
letter-spacing: 0;
}
</style>
<div class=”rb_widget”>
<div id=”rb-text”>
<div id=”rb-subscribe-box”>
<div class=”email-box”>
<h4>Subscribe FREE updates on your <a href=”http://feedburner.google.com/fb/a/mailverify?uri=nafisflahi” target=”_blank”>Email</a> | <a href=”http://feeds.feedburner.com/nafisflahi” target=”_blank”>RSS</a></h4>
<form onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=nafisflahi’, ‘popupwindow’,
‘scrollbars=yes,width=700px,height=700px’);return true” target=”popupwindow” method=”post” action=”http://feedburner.google.com/fb/a/mailverify”>
<input 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” class=”txt” />
<input type=”hidden” name=”uri” value=”nafisflahi” />
<input type=”hidden” value=”en_US” name=”loc” />
<input type=”submit” value=”Subscribe” class=”btn” />
<div style=”clear:both;”></div>
</form>
</div>

<div class=”fb-like-box”>
<iframe src=”//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Falltypsms&send=false&layout=button_count&width=450&show_faces=false&font&colorscheme=light&action=like&height=21″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:450px; height:21px;” allowtransparency=”true”></iframe><a href=”http://www.facebook.com/alltypsms” target=”_blank” rel=”nofollow” style=”color: #3B5998; font-family: arial; font-size: 13px; font-weight: bold; line-height: 20px;”> Like us on Facebook </a><div class=”clear”></div>
</div>
<div class=”gplusone”>
<div style=”float:left;width:90px;”>
<g:plusone href=”http://www.nafisflahi.blogspot.com”></g:plusone>
</div>
<a href=”https://plus.google.com/103785803956457565128″ target=”_blank” rel=”nofollow” style=”color: #d00; font-family: arial; font-size: 13px; font-weight: bold; line-height: 24px;”>Circle us on Google+</a><div class=”clear”></div>
</div>
<div class=”twitter-follow”>
<a href=”https://twitter.com/nafis922″ class=”twitter-follow-button”>Follow @how to do </a>
<script src=”//platform.twitter.com/widgets.js” type=”text/javascript”></script></div> <br/>
<div >

</div>
</div>
</div></div>

  • Now replace the nafisflahi  with your feed burner name 
  •  Replace the lltypsms with your Facebook page name 
  • Replace the  http://www.nafisflahi.blogspot.com with your website or blog address
  • Replace the 103785803956457565128 with your Google plus id
  • Replace the nafis922 with your Twitter name 

Now Save it you are done 

One thought on “How To Add Social Subscription in Blogger Blog

  1. Anonymous says:

    Great post. I was checking continuously this weblog and I'm impressed!
    Very helpful information specially the remaining phase :
    ) I care for such information a lot. I used to be seeking this certain information for a very long time.
    Thank you and best of luck.

    Also visit my web page – Elo Boosters Banned

Leave a Reply

Your email address will not be published. Required fields are marked *