Friday, August 2, 2013

All-in-One Social Subscription Widget For Blogger Blog

Author: Gagan Masoun
All-in-One Social Subscription Widget
Subscription widget is a really cool idea to get permanent readers for your blog. "All-in-One Social Subscription Widget" is a kind of widget which has all important subscription options. It has a white background, So it will match with all blog's or templates color. It includes most popular social networking sites, like Facebook, Twitter, Google+, RSS etc. It also includes the email subscribe form. You can see live demo below:
All-in-One Social Subscription Widget

Demo

How to Install This Widget

  • Go to Blogger Dashboard » Layout
  • Click On Add a Gadget
  • Choose HTML/JavaScript and Paste The Below Code In It.
<style type="text/css">
#bdsub-box
{
box-shadow:1px 1px 4px  #dcdcdc;
-moz-box-box-shadow:1px 1px 4px  #dcdcdc;
-web-kit-box-shadow:1px 1px 4px  #dcdcdc;
-goog-ms-box-shadow:1px 1px 4px  #dcdcdc;
margin-bottom:70px;
height:264px;
}
#bd-socico
{
height:33px;
border-bottom:1px solid #dcdcdc;
border-left:1px solid #dcdcdc;
border-right:1px solid #dcdcdc;
padding:2px;
background:#ffffff;
}
#bd-socicoimg
{
height:28px;
width:28px;
}
#bd-socico table
{
border:none;
}
#bd-rscount
{
margin-top:2px;
margin-right:-25px;
}
#bdsub-box .bdsub-fblike { border-bottom: 1px solid #dcdcdc; border-left: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; padding: 5px; background:#fff;}

    #bdsub-box .twitter-follow { background: #ffffff; border-left: 1px solid #dcdcdc;border-right: 1px solid #dcdcdc; padding:5px 11px;}
    #bdsub-box .bdsub-email {border: 1px solid #dcdcdc; background: #f8f8f8; padding:11px;}
        #bdsub-box .bdsub-email h4{color: #444;font-family: Arial;font-size: 12px; margin: 0 0 10px;}
        #bdsub-box .bdsub-email .txt,#bdsub-box .bdsub-email .txt:focus{background:#fff; float:left; color:#777777; border:1px solid #dcdcdc; border-radius: 3px; padding: 7px 10px 8px; width: 140px;}
        #bdsub-box .bdsub-email .bdsub-button,#bdsub-box .bdsub-email .bdsub-button:focus{background:#222222; border:1px solid #222222; color:#fff; border-radius: 3px; float: right; font-size: 12px; font-weight: bold; padding:7px 3px; }
            #bdsub-box .bdsub-email
input, textarea {
font-family: Georgia, "Times New Roman", Times; font-size: 1em;}
</style>
<div id="bdsub-box">
<div class="bdsub-email">
<h4>Get FREE updates on your <a href="http://feedburner.google.com/fb/a/mailverify?uri=BlogsDaddy" target="_blank" style="color:#3b5998;">Email</a> | <a href="http://feeds.feedburner.com/BlogsDaddy" target="_blank" style="color:orange;">RSS</a></h4>
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BlogsDaddy', '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="BlogsDaddy" />
<input type="hidden" value="en_US" name="loc" />
<input type="submit" value="Subscribe" class="bdsub-button" />
<div style="clear:both;"></div>
</form>
    </div>

<div id="bd-socico">
<table border="0" cellspacing="0" cellpadding="0" width="298">
<tbody>
<tr>
<td valign="top" ><a href='http://feeds.feedburner.com/BlogsDaddy' target='_blank' rel=nofollow' ><img id="bd-socicoimg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie1GV74_bbwCZLc5sJI2Z69VWuCkzS7jvbVbVelZxatGF-5lIny1KHF050fKkt9n5BOOdX7SSTOJ55ho1CO8rJMSxaaekPaDf3A5HKJg-_C9lr7zf2l8QizwSDuhOQyi0yhq-StCFAt32q/s1600/feed.png" alt="Subcribe to our RSS feeds" /></a></td>
<td valign="top" ><a href='http://www.facebook.com/BlogsDaddy' target='_blank' rel='nofollow'><img id="bd-socicoimg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwjEpHoBJucOxkuvXm8ER2gj8CDVG4_-uSCAceefOoBLHzP6F0tMG8LF3_DDgT10Sy027bANoyaUvHhlqPt50nDdnjHv-iQ61zeKO6Lz9iavxKKRflWahMVtoYQ1XV1kyapLReWShMc7XH/s1600/fbb.png" alt="Join Us on Facebook" /></a></td>
<td valign="top" ><a href='https://plus.google.com/106217413057730068740' target='_blank' rel='nofollow'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKEeYuPb5M0IkvbFROOoicyp3-gZ5cMsS69cNRyPuwXIIFSAlAmnPSz2_xM8EjtKcB2RtFLHJp5v2lE5FboWx4FNANj6OQOp3JtJLeI7SbXhP8a_GhNgK1b32yShG1lkG91WAuqEpffxPf/s1600/gpp.png" alt="Add to Circles" id="bd-socicoimg" /></a></td>
<td valign="top" ><a href='https://twitter.com/BlogsDaddy' target='_blank' rel='nofollow'><img id="bd-socicoimg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt7G8h0-BiAktwLbbwnOpLQMoRPaIAstfbyFm1TXcRbn6yXJvqc6vbTtZw3wyRoOzYfL0O1Qd_0uwy93I8hmu_lGy1JIGb7AcPuc2yDQdcfUfJc-zjEjn40e2vdcXcOAQVzx7kU9E8W6hX/s1600/tww.png" alt="Follow us on Twitter" /></a></td>
<td valign="top" ><p id="bd-rscount"><a href="http://feeds.feedburner.com/BlogsDaddy" rel="nofollow"><img  src="http://feeds.feedburner.com/~fc/BlogsDaddy?bg=222222&fg=ffffff&anim=0" height="26" width="88" style="border:0" alt="" /></a></p></td>
</tr></tbody></table>
</div>

    <div class="bdsub-fblike">
   <iframe src="//www.facebook.com/plugins/like.php? href=https://www.facebook.com/BlogsDaddy?fref=ts &send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe><a href=" https://www.facebook.com/BlogsDaddy" target="_blank" rel="nofollow" style="color: #3B5998; font-family: arial; font-size: 18px; font-weight: bold; line-height: 20px;"> Like us on Facebook </a><div class="clear"></div>
    </div>
<div class="twitter-follow">
  <a href="https://twitter.com/BlogsDaddy" class="twitter-follow-button">Follow @BlogsDaddy</a>
</div>
<div class="bdgplus">
    <div class="g-plus" data-href="https://plus.google.com/106217413057730068740" data-width="290" data-height="131" data-theme="light"></div></div></div>

Link Change:-

Change our social links (red color highlighted) with with your own social profile links.

Well done! Just Save your widget by pressing Save button.

From Team Blogs Daddy Desk:

I hope you have enjoyed this tutorial. We are trying to develop more widgets for bloggers. If you need our help regarding this widget feel free to ask via comments box.

See Also - Sleek and Cool Social Subscription Widget

Note: This widget is created by Parallel Blog. Don't forgot to link back if you want to share this tutorial.Otherwise DMCA is waiting for some spammers.

7 comments:

  1. That's a really a great widget. I'll use on my blog and also recommend it to other people. Except this i would love to know that "how to add recent comments on blogger footer" just like you added on your website. Let me know

    Regards
    Prince Asfi
    www.prince-asfi.com



    ReplyDelete
    Replies
    1. Thanks Prince. I will share "recent comments" widget code very soon. Keep in touch with us.

      Delete
  2. Amazing widget. This widget design is rare. Thanks for sharing.

    ReplyDelete
    Replies
    1. Thanks for your valuable words. I am fan of your blog Mohammad bhai.

      Delete
  3. That's a nice widget. I'm wondering wehther this will work on wordpress as well?

    ReplyDelete
  4. thanks for sharing such a great widget.. I will add it to my blog.

    Vivek NV

    ReplyDelete