How To Add Advanced Social Subscription Widget in Blogger

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(http://4.bp.blogspot.com/-O0Hpy4cRnvg/UO2oso7C2RI/AAAAAAAALKE/7kbHd9DlwcA/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="http://4.bp.blogspot.com/-hHcPJba-g4k/UOxPjTZDttI/AAAAAAAALDQ/RnlURlUJUJ4/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="http://2.bp.blogspot.com/-mKP2fHbgZyI/UOxOTpidswI/AAAAAAAALDA/_tpcxghaRfs/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

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

Comment With:
OR
Choose Wisely!

32 comments

January 9, 2013 at 12:08 PM

nice

January 9, 2013 at 3:00 PM

This is indeed a standard social sharing widget. I have added it to my blog, but changed the title and background colour of the widget to match my site colour.

I really commend your work on Mybloggerlab. Keep it up bro.

Cheers!

January 9, 2013 at 5:17 PM

Cool ..... I was looking out for such a box and as always mybloggerlab produced it !!

Www.YourpcGenie.net

January 9, 2013 at 5:47 PM

very nice dear..

January 9, 2013 at 6:49 PM

nice tutorials for those who are using bloggers, thanks for the sharing :)
let me know is it possible on wordpress to combine all social buttons in one square box ?

January 9, 2013 at 7:34 PM

Thanks, looking for this fully loaded widget. MBL Rockzzzzz...

January 9, 2013 at 9:07 PM

WoW it is rocking widget. I will install on my blog. thanks for sharing this :)

January 9, 2013 at 10:26 PM

I think there is no new idea in your mind you are just filling the blanks of schedule ?

Editorial Team MOD
January 10, 2013 at 12:08 AM

Well, Thanks for your So Nice Views. And Yes, Feel Free to Customize it According to your Desire needs. Take Care Pal

Editorial Team MOD
January 10, 2013 at 12:10 AM

We are Pleased that You Like the Innovative Widget :)

Editorial Team MOD
January 10, 2013 at 12:10 AM

Now It will Rock your Blog Too Mate. More power more Passion. Peace

Editorial Team MOD
January 10, 2013 at 12:11 AM

Yap, You can Copy PASTE the Coding, in the HTML/TEXT AREA in WordPress Widgets. It would work like a Charm. Peace

Editorial Team MOD
January 10, 2013 at 12:19 AM

Are you Sure? That we are out of topics? I Don't think so.

I Guess,You already got your answer because the Commentors above have mentioned that What this widget mean to them.

MBL is a site where we share PRO Widgets, tricks and sometimes minor Blogging tips. So, we can't start to share Entertainment, Sports related stuff. If we did then it would be the END of Insanity. LOL.

Hope you would understand, Peace

January 10, 2013 at 3:26 AM

simple but its good for new ones,
brother i wnat to have a sharing bar below post titles same as your, have you shared it on the blog then give me the link, if not then tell me how get it.

January 10, 2013 at 3:29 AM

Nice.. I have mixed up this widget with one present! One thing, my blogger URL redirects to G+.. can I stop this?

January 10, 2013 at 3:44 AM

What the heck?? My site is redirecting to YOURS!!!!!!!!!!!!!! Removing widget.. I don't know why....!!!!!!!!!!!!!!!!!!!!

Editorial Team MOD
January 10, 2013 at 4:32 AM

You might Have Removed some DIV ids :/ That's why it is Happening.

Editorial Team MOD
January 10, 2013 at 4:34 AM

One More Thing, Paste the Whole coding in Gadget AREA, not on the Template. The Coding should remain in Once Piece.

Editorial Team MOD
January 10, 2013 at 4:34 AM

Yup, Get it form Here

http://www.mybloggerlab.com/2012/08/floating-social-sharing-horizontal-bar.html

Editorial Team MOD
January 10, 2013 at 4:36 AM

To Stop Redirection to G+. Simply Unlink your Google+ Profile with Blogger.

January 10, 2013 at 4:46 AM

:-P YA MERA IDEA THA CREDIT KIDR HA

Editorial Team MOD
January 10, 2013 at 4:50 AM

Haha :) Per Banaya kis ne:D

January 10, 2013 at 5:06 AM

very nice widget,

January 10, 2013 at 5:50 AM

I removed pinterest coz i don't have that!

January 10, 2013 at 5:55 AM

Dude.. Can I please submit a Guest Post on MBL? I mean, please provide your email to me and I would send one. And you can publish it here with my link... as you know I am working hard but all my effort is going in vain due to SEO! :(

Editorial Team MOD
January 10, 2013 at 6:07 AM

Thats Why it Stopped Working.

Editorial Team MOD
January 10, 2013 at 6:08 AM

We don't accept guest posts, However, you are one of our oldest readers. Therefore, contact me @ contact.mybloggerlab.com

January 10, 2013 at 1:18 PM

Hello, Syed. MBL is one of the greatest sources for Blogger solutions. Perhaps the greatest. Keep up the good work!

I have a request, could you include Tumblr on this widget? And, in the future, on any social widget you make?

Tumblr, along with Pinterest, is one of the social networks that most grows up nowadays. It is a trend, and a precious tool that most bloggers neglect, failing to notice it's potential.

Thanks in advance!

January 10, 2013 at 9:50 PM

@Syed Faizan Ali
thnx bro for the bar, will definitely try it on my blog.

Editorial Team MOD
January 10, 2013 at 11:05 PM

Thanks for your kind Remarks. Do AS Follows to ADD Tumblr.

Search for this Image in the Coding:
http://4.bp.blogspot.com/-hHcPJba-g4k/UOxPjTZDttI/AAAAAAAALDQ/RnlURlUJUJ4/s1600/Bloggerzzz.gif

One You Find it, Replace it with the Following URL:
http://4.bp.blogspot.com/--zE7rfwaoqQ/UO-5RVL2ugI/AAAAAAAALUU/WCs1cO7OmNE/s1600/Tumblr.png

That's It :) Hope that Helps. Peace

May 28, 2013 at 10:14 PM

Thanks, This Look Way Similar To shoutmeloud ! I Was Looking For This

July 8, 2013 at 1:33 PM

Wo, that is what I'm looking for... thanks bro.

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2014. MBL Networks, All Rights are Strictly Reserved.