Perfect all in one social media subscription widget for Blogger

If you are looking for mashable style social media subscription box then you are at right place because in previous posts I have shared many social widget for blogger with different styles and options. But now, in this post I will share a mashable style all in one social media subscription box for Blogger. This Box allows your website visitors to subscribe your website easily within a single box. This box has RSS feed count, Twitter, Facebook, Google plus, Email form and Google plus follower badge. Titter follow button with count is also included in this widget. So, everything is at a single place definitely effect your subscriber list positively. Enjoy and install this widget in your blogger blog if you have not any or just want to change the existing one. You can addthis widget in your blog sidebar. Follow below steps and see it live on the web!

Demo

How to add this widget in Blogger:

Log in to your Blogger dashboard.

Select your template in which you want to add/install this widget.

Go to layout >> Add a Gadget >> select HTML/JavaScript

 Paste the below code and save it. Now save arrangements.

Note: Instead of selecting whole code with mouse just click on copy code by taking your mouse on right hand corner and copy code in Clipboard.

HTML and CSS!

<style type="text/css">.BB{width: 300px; float: left; background: rgb(255, 255, 255) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaMuLtq2gF0CoRxBRK5qZDZcS9ILb0JFY1g16bAcbWx8teniAnd2E9WaRfEleIYqiw8mXi7r99bLPGdqERF1RCzkbRSfNdKPu8FS9P42MU8EUAFOXkr6dwC7IBXdlizrPFfZLxkQFZaQw4/s1600/bloggingbee.png) top no-repeat; margin: 0 0 10px; padding: 10px; border: 1px solid rgb(211, 211, 211); -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;}.BB h2{background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJgNY8bzHaBDItIwroL_JDccyXuB6MUWhyF2MmMQn0WGzV771TkNxg-njzRTNa5-HyAAfD7mLkoZAVHBAND86nr6VSSoIesW36VwKvQujIqULsrH3Tgxl9lp-QUU8EuhlnhqgfC7Pa7qXC/s1600/sdf.png) no-repeat; height: 50px; margin: 0px 0 0px 0; padding: 0px 20px 0px 0px; font-size: 0px; font-family: Sans-serif, Arial, Helvetica; font-weight: bold; text-transform: uppercase; color: rgb(255, 255, 255); text-shadow: 0 1px 0 rgb(255, 255, 255); border-bottom: 1px solid rgb(228, 108, 6);}.BB .count{color:#F17C18;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;}.BB .count span.bigcount{color:#F17C18;font-size:24px;font-family:Helvetica, Arial;line-height:39px;vertical-align:middle;margin:0px;padding:10px 0px 0px 0;}.BB .subicons{border-bottom:1px solid #e6e6e6;margin:0px 0 0px 0;float:left;width:300px;font-family:Helvetica, Arial;font-size:12px;}.BB .subicons a{text-decoration:none;color:#333333;}.BB .subicons a:hover{text-decoration:underline;color:#333333;}.BB .subicons .rssicon{border-right:1px solid #e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0muOuEnRmFeXGNg_x6J4lNauAr9kMhECaMrclfCr86SicSMa6MWc0GwINa9d8P-ObUcBvv23B4Cb1Fy0TRgcyUWuZ174-gcv6fV7y4JyX25nxVMqnLz90_IEKxb63Zv2ZubVpVdbL18Eb/s1600/BB-social+stripe.png) no-repeat;background-position:0px 5px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.BB .subicons .googleicon{border-right:1px solid #e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0muOuEnRmFeXGNg_x6J4lNauAr9kMhECaMrclfCr86SicSMa6MWc0GwINa9d8P-ObUcBvv23B4Cb1Fy0TRgcyUWuZ174-gcv6fV7y4JyX25nxVMqnLz90_IEKxb63Zv2ZubVpVdbL18Eb/s1600/BB-social+stripe.png) no-repeat;background-position:0px -37px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.BB .subicons .fbicon{border-right:1px solid #e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0muOuEnRmFeXGNg_x6J4lNauAr9kMhECaMrclfCr86SicSMa6MWc0GwINa9d8P-ObUcBvv23B4Cb1Fy0TRgcyUWuZ174-gcv6fV7y4JyX25nxVMqnLz90_IEKxb63Zv2ZubVpVdbL18Eb/s1600/BB-social+stripe.png) no-repeat;background-position:0px -79px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.BB .subicons .twittericon{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0muOuEnRmFeXGNg_x6J4lNauAr9kMhECaMrclfCr86SicSMa6MWc0GwINa9d8P-ObUcBvv23B4Cb1Fy0TRgcyUWuZ174-gcv6fV7y4JyX25nxVMqnLz90_IEKxb63Zv2ZubVpVdbL18Eb/s1600/BB-social+stripe.png) no-repeat;background-position:0px -121px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.BB .emailsub{border-bottom:0px solid #e6e6e6;padding:15px 0 0px 0;float:left;width:100%;font-family:Helvetica, Arial;}.BB .emailsub .emailicon{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYryYP-X_TDUD5azzs18WVi-cPpJ5AsYWTqqSh4aBp-YrCMKj1ZH5dvYwJ3pBNyqgR3_66NvJwT6dd5BvQERBnGQrNXimeOAiGfjGr1dUHpQuFRj-or-LSK5QUOGTqWk4vgHikMWR19hJS/s1600/e_mail.png) no-repeat 0 2px;float:left;padding:0px 15px 0px 50px;margin:0 0 0 5px;width:300px;line-height:20px;vertical-align:middle;font-size:14px;color:#333;}.BB .emailsub .emailupdatesform{margin:15px 0 5px 5px;width:300px;float:left;}.BB .emailsub .emailupdatesform input.emailupdatesinput{background:#fff !important;float:left;border:1px solid #d2d2d2;padding:0px 8px 0px 8px;color:#a19999;font-size:12px;height:25px;width:185px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}.BB .emailsub .emailupdatesform input.joinemailupdates{/*linear-gradient*/background:-webkit-gradient(linear,left top,left bottom,color-stop(#F9EAD4,0),color-stop(#F9780E,1));background:-webkit-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-moz-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-o-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#F9780E));border:1px solid #F9780E;text-transform:none;font:bold 12px arial;color:#fff;height:25px;padding:0 12px 0 12px;margin:0 0 0 5px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;cursor:pointer;}</style><br /> <div class="BB"> <h2 class="title"> </h2> <div class="count"> <span class="bigcount"><a href="http://feeds.feedburner.com/bloggingqbee" rel="nofollow"><img alt="" src="http://feeds.feedburner.com/%7Efc/bloggingqbee?bg=F2F2F2&amp;fg=666&amp;anim=1" height="26" style="border: 0;" width="88" /></a> </span>Learn Free Pro Tricks daily </div> <div class="subicons"> <div class="rssicon"> &nbsp;<a href="http://feeds.feedburner.com/bloggingqbee" rel="nofollow" target="_blank"> RSS</a></div> <div class="googleicon"> &nbsp;<a href="https://plus.google.com/110989633346810310335" rel="author" target="_blank"> G+</a></div> <div class="fbicon"> &nbsp;<a href="https://www.facebook.com/Bloggingqbee" rel="nofollow" target="_blank">FB</a></div> <div class="twittericon"> &nbsp;<a href="https://www.twitter.com/bloggingqbee" rel="nofollow" target="_blank">Twitter</a></div> </div> <div style="border-bottom: 1px solid #e6e6e6; margin: 8px 5px 0px 0px; padding-bottom: 5px; width: 300px;"> <!-- Place this tag where you want the widget to render. --> <br /> <div class="g-person" data-href="//plus.google.com/110989633346810310335" data-layout="landscape" data-rel="author" data-width="297"> </div> <!-- Place this tag after the last widget tag. --> <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></div> <div style="border-bottom: 1px solid #e6e6e6; margin: 8px 5px 0px 0px; padding-bottom: 5px; width: 300px;"> <iframe allowtransparency="true" class="twitter-follow-button" data-twttr-rendered="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1347008535.html#_=1351358237637&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=bloggingqbee&amp;show_count=true&amp;show_screen_name=true&amp;size=m" style="height: 20px; width: 266px;" title="Twitter Follow Button"></iframe> <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script> </div> <div class="emailsub"> <div class="emailicon"> <div style="color: #3a3a3a; font-family: Helvetica, Arial; font-size: 13px; font-weight: normal; margin: 0; padding: 0; width: 270px;"> Receive Our All Updates In Your Inbox by &nbsp; &nbsp; submitting your Email ID below.</div> </div> <div class="emailupdatesform"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggingqbee', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input class="emailupdatesinput" gtbfieldid="10" name="email" onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" value="Enter your email here..." /><input name="uri" type="hidden" value="bloggingqbee" /><input class="joinemailupdates" type="submit" value="Submit" /></form> </div> </div> </div>

Customization Of this widget!
You Just need to replace Social media profile links with your own. The easy way to find links press ctrl+F and type bloggingqbee. Replace it with your own social profiles links. Also find 110989633346810310335and replace it with your Google plus profile link.
If you face any problem regarding installing this widget. kindly contact us or leave a comment. Your side bar width must be 300px for better and perfect result.
Enjoy
Don't forget to subscribe us for latest updates......!