How To Add Advanced Social Subscription Widget in Blogger

Socialize It →

Tweet

28

Advertisements

Have you ever thought of combining all Social Subscription Buttons into one Cute little Widget? The main idea behind adding all the Social Buttons into one widget is to give multiple options to the users so, they can subscribe to your site with their personal favorite social platform. The Idea of joining Social Buttons into one gadget is not different because there are lots of Subscriptions widgets that work in the same fashion. However, they are not flexible enough to support all foremost Social Platforms. For that reason, we have designed a brilliant Social Subscription widget. It has all the key Social Platforms that are essential for a website. Today, in this article, we will Learn How to Add Advance Social Subscription Widget in Blogger.

This Gadget is developed to be used in the Sidebar of a website. However, anyone can utilize it according to their desire needs. Just take a look at our sidebar. There should be an Advanced Social Subscription gadget on this page. We have attached a screenshot below just in case if we remove it in the future.

This gadget is extremely robust and supports almost each and every platform whether its iPad, iPhone, Android and etc. Now everyone can get rid of the different kinds of Social Subscription gadgets because they get everything in just one gadget. Advanced Social Widget would add a Widget box to your sidebar that consists of all the popular Social networking sites such as Google +1/follow buttons, Facebook Like and Twitter Tweet/Follow buttons.

How To Add Advance Social Subscription Widget in Blogger?

The steps mentioned below are straightforward and would barely take few minutes to complete. Consider the following instructions as mentioned below.

Go to Blogger >> Your Site >> Layout >> Add a Gadget >> Add HTML/JavaScript. Now carefully paste the following coding. Remember: This gadget would also work on WordPress Platform because it’s just a chunk of modest coding. 

<style>
/*--- MBL Advance Social Gadget --- */
#socialwid { 
font-family:Arial, serif; 
text-transform: uppercase;
font-weight:bold; 
font-size:15px; color:white; text-align:center; margin-top:10px;}

#socialwid a {color:inherit;}

#mbladvance-sub div *{
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;}

#mbladvance-sub div #likered{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfRchx0yiVyoFfgcMClmgEpom1J3r_awn7M5U-3m0wEzhg7iG62Mg_VGnnz7TNMnXa5tuQF5vopeP-A_cAz66sHoftQmAk1VRDpwTpE5sgFTRDWMyL__D-VFKFEoMiPDvDh_mmU0h5psc/s1600/Sociala.png)!important;background-position:top left;
background-repeat:no-repeat;
height:242px;
width:300px;}
#mbladvance-sub div{
margin:0;
padding:0;
background-image:none!important;}

#mbladvance-sub{
margin-bottom:15px;
height:250px; 
background-color:#ffffff}
</style>

<div id="mbladvance-sub" style="height: 257px!important;" class="block">
<div>

<div id="likered" style="height:257px!important;">
<div style="height: 47px;"></div>

<!--Google +1/Follow-->
<div style="width:300px; height:54px;overflow:hidden;border: 3px solid #8ec801;border-bottom: none;border-top: none; margin-top:1px;">
<span style="width:75px;display:inline-block;float:left;padding: 15px 0 0 23px; ">
<div class="g-plusone" data-href="http://www.mybloggerlab.com"></div>
</span>

<span style="display:inline-block; width:170px;float:right;">
<div class="g-plus" data-href="https://plus.google.com/107878572539846672883" data-width="170" data-height="69"></div>
</span>
</div>

<!--Facebook Like--> 
<div style="border:1px solid #8ec801;padding:10px 10px 0 10px; border: 3px solid #8ec801;border-top: 1px solid #8ec801; border-bottom:none;">
<iframe src="//www.facebook.com/plugins/like.php?href=facebook.com%2Fmybloggerlab&amp;send=false&amp;layout=standard&amp;width=280&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=36" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:280px; height:36px;" allowtransparency="true"></iframe></div>

<!--Twitter Tweet/Follow--> 
<div style="border: 3px solid #8ec801;border-top: 1px solid #8ec801;border-bottom: none; padding:10px 0 5px 10px;height: 50px;">
<span style="display:inline-block; width:195px;height: 35px;float: left;">
<a href="http://twitter.com/mybloggerlab" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @MyBloggerLab</a>
</span>

<span style="display:inline-block;width:78px; overflow: hidden;line-height: 0;float: left;">
<a href="http://www.mybloggerlab.com" class="twitter-share-button" data-show-count="false" data-size="large" data-text="The Best Blogger Resource Website" data-url="http://www.mybloggerlab.com" data-via="mybloggerlab" data-hashtags="design">Tweet</a>
</span>
 </div>

<!--Blogger--><div style="border: 3px solid #8ec801;border-top: 1px solid #8ec801; padding:8px 0 5px 10px;height: 54px;">
<span style="display:inline-block; width: 120px;height: 30px;overflow: hidden;line-height: 0;float:left;margin-left: 16px;">
<a href="http://www.blogger.com/profile/04420446464276156950" target="_blank">
<img style="margin-top: 2px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg62I0Dj2NcXzpGSoYaN3Pssfz6mCOWL9FuC5hb95jpCY0ykTr8uZ8oAreZXjTXYdXOD9mXZ6T3JrF1I7W33V3vfDCn_lTXpxro7TePrm2_MCZRC8hh6pJyc-FHEuUuRy3OqSqDT4wSYHU/s1600/Bloggerzzz.gif" width="110" /></a>
</span>

<!--Pinterest--> 
<span style="display:inline-block;width: 111px;height: 50px;overflow: hidden;line-height: 0;float: left;margin-left: 20px;">
<a href="http://pinterest.com/fosterzone" target="_blank"><img style="margin-top: 3px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinDx6kZdMW5WWqeYpsCuAy9zxMXLbr8XIQB7oDZCHAc4V8NbcshES8ER7I4HOyYqAK8NKYlB6becpO1a5q73JttiBQSdNBlssf-BV5TD4j7QOEyv1xaNCl4MXxwwjscvGhd8agb9U4b1Y/s1600/LogoRed.png" /></a>
<span style="display:inline-block;width:1px;height: 50px;overflow: hidden;line-height: 0;float: left;margin-left: 20px;"><div id="socialwid"></div>
</span></span></div>
<script src='https://mybloggerlab.googlecode.com/files/advsub.js' type='text/javascript'></div>
</div>
</div>

Customization: 

• Google +1/Follow URLs: Replace http://www.mybloggerlab.com with your Website URL. Also Replace https://plus.google.com/107878572539846672883 with your Google+ Profile or Page URL.
• Facebook Like Button:  Replace mybloggerlab with your Facebook Page's username.
• Twitter Follow/Tweet:  Replace http://twitter.com/mybloggerlab with your Twitter URL.
• Pinterest: Replace http://pinterest.com/fosterzone with your Pinterest URL.
• Blogger: Replace http://www.blogger.com/profile/04420446464276156950 with your Blogger Profile URL.

From The Editor's Desk:

We hope that this gadget would help you to convert your each and every visitor into Social Followers. We are sure that it would take less space and would provide buckets full of results. What are your thoughts about it? Any suggestions would be a piece of Gold. Take a lot care of yourselves till then, Peace, Blessings and Happy subscribing. 

Advertisements

About the Editorial Team

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).