Mashable Social Media Subscription and Following Widget for Blogger

http://www.allblogthings.com/2014/02/MashableSubscriptionWidget.html
Hi to all my readers, friends and fans, if you are our regular reader here you probably know that previously I shared Subscribe via Email Widget for Blogger and WordPress. Now my Today's Topic is Mashable Social Media Subscription & Following Widget.There is no question about how important is a social subscription/follow widget in a blog or website. Using social subscription widgets is a very tricky way to let your visitors easily bookmark your pages and get connected with your blog forever. Once you get some followers/subscribers, you will definitely get some regular visitors from them whenever you will post any article on your blog this type of visitors are also be considered as loyal visitors. So let's get start from below article. For A Live Demo Visit Eg-Lab

Why We Use This Widget

Why Bloggers Request for subscription to their blogs. This Is Very Best For You All Because As You See All Bloggers Are Wanted To Attract Their Visitors To Loyal Readers Because If Visitors Become Your Loyal Reader then You Will Definitely Get Comments, It Will Increase Your Alexa Rank I'm also Using This Method You Will See On My Sidebar. So Friends In My Opinion You Must Use This Widget It Will Definitely Impress Your Visitors To Your Blog.

Features Of This Widget

  1. Compact design which consumes only a little bit space in your blog`s sidebar.
  2. Attractive and clean CSS design.
  3. All major social network subscription options like Facebook, twitter ,email subscription, Google plus badge etc.
  4. Lightweight JavaScript and HTML code which do not effect blog`s loading speed.
  5. Highly compatible design with almost all major browsers.
  6. No Credits Links :).

Why You Need To Add This Widget

Social Media Subscription & Following Widget contains all the important social network subscription option like Facebook like button, Twitter follow button With Count,  New Google Plus badge etc. Your blog visitors can directly follow you on your social networks like Facebook, twitter, Google Plus etc by using this widget without even leaving your blog. So Lets Start And Add This Widget In Your Blog.

How Do You Add This Widget On Your Blogs

So Friends This Widget Has Only One Step Which I Giving You In Very Simple Way.

1, Go To Blogger > Design
2, Click on "Add a Gadget"
3, Choose HTML/Javascript widget
4, Paste the following code inside it - First copy below code using Ctrl + F

 <style>    .code{width: 300px; float: left;}.code .count{color:#000; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial;  height: 40px; line-height: 40px; vertical-align: middle; width: 310px; padding: 0 0px 0 4px; margin:0;}    .code .count span.bigcount{color:#f2f2f2; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: middle; margin:0px; padding:10px 0px 0px 0;}.BTstyle{background:url(http://1.bp.blogspot.com/-WuFShqfjqf4/UUVLH2y30LI/AAAAAAAADrQ/KREAx9i116g/s1600/email_icon.png) no-repeat scroll 4px center transparent;padding:7px 15px 7px 35px;border:1px solid #D3D3D3;-moz-border-radius: 4px;-webkit-border-radius: 4px;color:#666;font-weight:bold;text-decoration:none;border-radius: 4px;-moz-box-shadow: 1px 1px 2px #CCC inset;-webkit-box-shadow: 1px 1px 2px #CCC inset;box-shadow: 1px 1px 2px #CCC inset;}.BTsubmit{color:#666;font-weight:bold;text-decoration:none;padding:6px 15px;border:1px solid #D3D3D3;cursor: pointer;-moz-border-radius: 4px;-webkit-border-radius: 4px;-goog-ms-border-radius: 4px;border-radius: 4px;background: #fbfbfb;background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);}    </style>    <!--[if IE 9]>    <style>    .code .count span.bigcount{color:#f2f2f2; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }    </style>    <![endif]-->    <div class="code"><div class="count"><span class="bigcount"><a href="http://feeds.feedburner.com/AllBlogThings" rel="nofollow"><img src="http://feeds.feedburner.com/~fc/AllBlogThings?bg=f2f2f2&amp;fg=000000&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a></span><b>Join Our 1000+ People Club..</b> </div><div class="FB-class">

    <div class="g-person" data-width="298" data-href="https://plus.google.com/110818828746613579693" data-layout="landscape" data-rel="author"></div>

    <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><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FUmerPrinceWorld&amp;send=false&amp;layout=standard&amp;width=300&amp;show_faces=true&amp;font=lucida+grande&amp;colorscheme=light&amp;action=like&amp;height=80&amp;appId=336587283139525" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:80px;" allowtransparency="true"></iframe></div><div style="width:300px;    border-bottom:1px solid #ddd; margin:3px 3px 0px 0px; padding-bottom:7px;"><iframe data-twttr-rendered="true" title="Twitter Follow Button" style="width: 266px; height: 20px;" class="twitter-follow-button twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.1362636220.html#_=1363005723766&amp;id=twitter-widget-1&amp;lang=en&amp;screen_name=UmerPrinceWorld&amp;show_count=true&amp;show_screen_name=true&amp;size=m" allowtransparency="true" frameborder="0" scrolling="no"></iframe><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script></div><div class="emailsub">    <div class="emailicon"><p style=" width:270px; color:#3A3A3A; font-size: 13px; font-weight: normal; font-family: Helvetica, Arial;  padding:0; margin:0;">Subscribe to the free newsletter now for daily updates. (No spam, we promise).</p></div> <form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=AllBlogThings&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'> <input name='uri' type='hidden' value='AllBlogThings'/> <input name='loc' type='hidden' value='en_US'/> <input class='BTstyle' 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 alt='' class='BTsubmit' title='' type='submit' value=' Join '/> </form></div></div>

Customization's

  • Replace            Color With Your Feed Burner Name.
  • Replace            Color With Your Facebook Fan Page Username.
  • Replace            Color With Your Twitter Username.
  • Replace            Color With Your Google+ Username.

That's All.

Congratulations..!! Now You Have Successfully Added This Widget In Your Blogger Blog.

Final Words

So Friends This Neat, Clean, Attractive etc. Widget Is Yours So, I Think This Surely Help You Increase Your Follower & Fans. Friends Please Subscribe Us For More And Also Be Our Follower. Peace & Happy Blogging..!!!