How to Add All in One Social Subscribe Box Widget in Blogger

Advertisements
After the successful release of Fireworks Jquery Effect and Social Content Locker for Blogger Platform, we are thrilled to share yet another remarkable widget for Blogger Platform. About few months ago, one of our readers contacted us and requested to create a clean and elegant all in one Social Subscription widget. Unfortunately, that time we were unable to complete his request. Finally, we have designed a Clean and Classy Social Subscription widget that has significant Social Networking websites. We have not used any jQuery file. Therefore, it is extremely lightweight, and it would not affect your site speed. Today in this article, we will Add All in One Social Subscription Box in Blogger.

Features of All In One Social Subscription Box:

There is no doubt that this widget would add a new life to your website, and it would magnetize users to follow you on different social platforms. Though, it has awe-inspiring features, but we have listed the few key features below. 

  • It is extremely lightweight, and it would not affect your site speed.
  • Use compact (12K, 3.2M) or full (12.000, 3.200.000) numbers.
  • Reorder and incapacitate any of these networks which are suitable for your site.
  • Full support for all foremost browsers i.e. Firefox, Internet explorer, Chrome, and etc.

How To Install All in One Social Subscription Box in Blogger?

Steps mentioned below are extremely straightforward and would soak 5 minutes to complete the integration. Remember: This widget would work on any platform that supports HTML. Therefore, we can also use it on WordPress, Jhoomla and etc.

Go to Blogger.com >> Template >> Edit HTML >> Proceed.

In the template search for ]]></b:skin> and just above it Paste the Following CSS Coding. There is no need to do any modification in the coding because it is universal and would automatically fit your layout. After pasting the CSS coding, Save your template and proceed to the next step.


/*
 * MyBloggerLab.com All in one Social Subscription Box
 * --------------------------------------------------------*/
div.socialbox-mbl,
div.socialbox-mbl ul,
div.socialbox-mbl ul li,
div.socialbox-mbl ul li p,
div.socialbox-mbl ul li img,
div.socialbox-mbl ul li p span,
div.socialbox-mbl ul li a{
background: none;
border: none;
font-style: normal;
font-weight: normal;
margin: 0;
padding: 0;
}

div.socialbox-mbl ul,
div.socialbox-mbl ul li{
list-style: none;
}

div.socialbox-mbl ul li a,
div.socialbox-mbl ul li img{
display: inline;
width: auto;
}

div.socialbox-mbl ul li a.socialbox-button{
text-align: center;
}

div.socialbox-mbl.mbl-classic{
color: #768a96;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}

div.socialbox-mbl.mbl-classic ul{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDB2oOv8FNhVFR20M6C9UFxMUwwTB0ySf3s4ZIPDiu_pduJwE1J6yai2Mi0Ynf083bG4BHnmj5ltMY2ryUdvZm6OTER9IBwcuFY-gxvbxT3Firib_F89hgle5gT4LN1LAuZkTTRMt_uMM/s1600/classic-background.png) repeat;
border: 1px solid #d8dcdf !important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 4px #dfe4e7;
-moz-box-shadow: 0px 2px 4px #dfe4e7;
box-shadow: 0px 2px 4px #dfe4e7;
margin: 0 !important;
padding: 0;
}

div.socialbox-mbl.mbl-classic ul li{
background-image: none;
border-bottom: 1px solid #d8dcdf;
height: 40px;
overflow: hidden;
padding: 19px 9px 0 9px;
}

div.socialbox-mbl.mbl-classic ul li:last-child{
border-bottom: none;
}

div.socialbox-mbl.mbl-classic ul li img{
border: none;
margin-right: 10px;
float: left;
}

div.socialbox-mbl.mbl-classic ul li p{
display: inline;
position: relative;
top : -3px;
}

div.socialbox-mbl.mbl-classic ul li p span{
color: #425763;
font-weight: bold;
}

div.socialbox-mbl.mbl-classic ul li a.socialbox-button{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdcJmqTjyMTi04Wa5cQ4ExwQRdOKBeiWqDKhAnckgMwO-UgrZVlsFFO0aqq5-UV3RkjvbK9V9kMSKsvhjlTY7oVUVrBoSgNN1uHnMVP8MGc14TMqg0zUaadvViUnRConFA5ooYdAZbUG0/s1600/classic-button.png) no-repeat;
border: 1px solid #d8dcdf;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #425763;
float: right;
font-size: 11px;
font-weight: bold;
line-height: 11px;
padding: 6px 10px;
position: relative;
text-decoration: none;
text-transform: uppercase;
top: -4px;
}

div.socialbox-mbl.mbl-classic ul li a.socialbox-button:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdcJmqTjyMTi04Wa5cQ4ExwQRdOKBeiWqDKhAnckgMwO-UgrZVlsFFO0aqq5-UV3RkjvbK9V9kMSKsvhjlTY7oVUVrBoSgNN1uHnMVP8MGc14TMqg0zUaadvViUnRConFA5ooYdAZbUG0/s1600/classic-button.png) 0 -27px no-repeat;
}

div.socialbox-mbl.mbl-classic ul li a.socialbox-button:active{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdcJmqTjyMTi04Wa5cQ4ExwQRdOKBeiWqDKhAnckgMwO-UgrZVlsFFO0aqq5-UV3RkjvbK9V9kMSKsvhjlTY7oVUVrBoSgNN1uHnMVP8MGc14TMqg0zUaadvViUnRConFA5ooYdAZbUG0/s1600/classic-button.png) 0 -54px no-repeat;
}


How To Add All in One Social Subscription Box in Blogger?

Go to Blogger >> Layout >> Add a Gadget.

From the List Select Add HTML/JavaScript and in the Text Box paste the following HTML Coding. To Reduce the widget of the Social Box Replace 300px according to your desire needs. 

<!-- MyBloggerLab.com All in one Social Subscription Box -->
<div class="socialbox-mbl mbl-classic" style="width: 300px !important">
<ul>

 <li>
<a href="http://www.facebook.com/mybloggerlab" title="Like on Facebook" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKAXK1esl5HBCIg1zVgZIFsTAqiMBg7cohBPuscsSbQh6NGwkgjA1fJoCPFfYVBcR6K0o-x1FFNQI2FphF3rR_13SUGNjbjVwiTGqsY5o_BlRTMkBtr6vAVBKSZZCLX-xEuHAxyrW9Hg8/s1600/facebook_16.png" alt="Facebook" />
</a><p><span>3500</span> Fans</p><a href="http://www.facebook.com/mybloggerlab" class="socialbox-button" rel="nofollow"  title="Like on Facebook" target="_blank">Like</a>
</li>
<li>
<a href="http://twitter.com/mybloggerlab" title="Follow on Twitter" rel="nofollow"  target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT14R8Mx5yk9LYC-ogbBRA2JsLwsky0IE0ZtgInHIAgSeK64nk4IPNWQvIopmBn4WsywR_PkUnhWNCWRV1b5D55zEVag-piyKMjLBRepQLTNYuGsWzqhs7XxIxp4CdyR8LIytvIfJ3yiM/s1600/twitter.png" alt="Twitter" /></a><p><span>3000</span> Followers</p><a href="http://twitter.com/mybloggerlab" class="socialbox-button" rel="nofollow"  title="Follow on Twitter" target="_blank" >Follow</a>
</li>
<li>
<a href="#" title="Subscribe to Youtube Channel" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjTK2tIKbq4Kjss4uDAW_X-pmBi571vo6hyH3OGkUjR3HqCAm8NS0L-fpBXcN78cVNyvVrFtgqIaQgEnIO4kxtgOVDWNRcFNOlar-8FXuK4qdXb7Nv7PYvr9Sfrn1jqGxL1jWRi88WXgY/s1600/youtube_16.png" alt="YouTube" /></a><p><span>400</span> Subscribers</p><a href="#" rel="nofollow" class="socialbox-button" title="Subscribe to Youtube Channel" target="_blank" >Subscribe</a>
</li>
<li>
<a href="http://pinterest.com/fosterzone" title="Follow on Pinterest" rel="nofollow"  target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPhyphenhyphenU6s4qetLfwVFisgipYlA0CchKDOYeIHH7H6TzvASpLRLtYem6bn4gWMrnigTf0VoEC0U9OfpM1YSuFnEFigqNZ2diTrjrrXjfA-SswEeFKZtHCc48eP9XLkXG33rRhw1u5tkxfwNk/s1600/Pinterestmbl.png" alt="Pinterest" /></a><p><span>200</span> Followers</p><a href="http://pinterest.com/fosterzone" rel="nofollow"  class="socialbox-button" title="Follow on Pinterest" target="_blank" >Follow</a>
</li>
<li>
<a href="https://plus.google.com/u/0/106374439082237286396" title="Follow on Google+" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw8lQNllzm-zbQPUjmgf7XwIKcnmRpXn1tzHOHePz7-dvK4rZ6fZZkhF6bB52mlw8jsvFjJM2vTgBsCamfSMTfZh4ARxDJk53uFtf6iTE31vt94b5a5Y13h49merNBuCmnAd9GZxBdoVQ/s1600/Googleplusmbl.png" alt="Google+" /></a><p><span>1000</span> Followers</p><a href="https://plus.google.com/u/0/106374439082237286396" rel="nofollow"  class="socialbox-button" title="Follow on Google+" target="_blank" >Follow</a>
</li>
</ul>
</div>
<!-- End -->

All Done: After customizing the Gadget according to your desire needs, just Save the Gadget. Now go and check your site, we are sure it would not let you down. Feel free to leave your comments and suggestions would be more than welcomed. 

From The Editor's Desk:

We are two days away from the New Year's Eve, and we are quite pleased to announce that on New Year's Night Sharp at 12:00 o Clock we would reveal our newly born Website dedicated to Blogger Platform. Its a whole new venture and we are so excited about it.  Take a lot care till then, Peace, Blessings and Happy socializing. 
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!

26 comments

December 29, 2012 at 12:39 PM

Faizan, actually this widget and similar you already published on your blog would be better if they would have an auto increment function.. but without that it is just headache to update them when followers are increased..

Let me know if I'm wrong!

Editorial Team MOD
December 29, 2012 at 3:52 PM

Well, you are quite right that we have widget similar to the one which we have shared today. However, it has more elegant look.

Coming back to point, Well to make it auto update we have to use API of Different Social Websites. Which is indeed a difficult TASK. Nonetheless, we would try to create a auto Updating Social Networking widget.

Since, Blogger is not flexible enough. That why we always prefer custom. Self updating widgets.

Editorial Team MOD
December 29, 2012 at 3:53 PM

Thanks Pal for those kind words!

December 29, 2012 at 7:55 PM

hey hi ...i want rss subscribe,,,g+ foller,,twitter,,,find me in facbook nd linked n widget plzz....Bro Can help me in this issue..plzz

December 29, 2012 at 9:00 PM

It is awesome but it could be more better if the like and subscribe is done on the spot. For ex. When I press the like button, the page should get liked instead of opening our page window.
Hope you understand what I mean to say.

Thanks, 
AKTECHz

Editorial Team MOD
December 29, 2012 at 10:46 PM

If we add Those buttons directly then it could affect the page speed. Therefore, we used this functionality. Peace

December 29, 2012 at 11:57 PM

I agree with you but can we do so.. If yes, them please tell me.....

Editorial Team MOD
December 30, 2012 at 2:49 AM

Yes, It possible but for that we have to rewrite the CSS and HTML coding from scratch!

December 30, 2012 at 6:28 AM
This comment has been removed by a blog administrator.
December 30, 2012 at 6:59 AM

Dude. I am back on blogger. I didn't liked wp. Nice widget. You can even make the above widget a single piece of code using < style > tag in HTML/JAVSCRIPT. I know you have got me. And one more thing, change your pic. not a nice one! :P

December 30, 2012 at 7:03 AM

It would not work in Wordpress then .

Editorial Team MOD
December 30, 2012 at 7:11 AM

Yeah! we can Combine the Whole Coding, There is no problem in that. BTW: What is wrong with the Picture, I guess its sparkling lol.

@Navneet Dude It Also Works on WP Blogs. We have tested it.

December 31, 2012 at 12:16 AM

ah! I didn't read your last paragraph... Waiting for your new website... Whats the niche for that? Seriously, i m crazy to see that!!!

Editorial Team MOD
December 31, 2012 at 12:33 AM

I am Sure, You would love it. We might release it tonight, Let keep our fingers Crossed!

December 31, 2012 at 3:30 AM

Yea! For sure! :D :)

December 31, 2012 at 3:53 AM

I hv scheduled a post on new year for 12:00 and added your fireworks in post! smart me! :P :D

Used CSS in < style > tag.

December 31, 2012 at 10:49 AM

wheres the new site??? :(

Editorial Team MOD
December 31, 2012 at 11:52 AM

We promised to Publish it on 12:00 Pakistani Time :) and its live you can check the latest article!

Editorial Team MOD
December 31, 2012 at 11:52 AM

Oh cool, I just saw it now. Great

Anonymous
January 1, 2013 at 10:07 PM

There is nothing any speciality by sharing this wordpress widget source code, it would be nice if you create a blogger widget which may automatically increase number of likes or followers.

Editorial Team MOD
January 1, 2013 at 11:35 PM

It is not Created By any kind of WordPress Widget Source. We have coded it From Scratch. Secondly, The automation in Blogger Platform is not Straightforward we have to use API of each and every platforms. Our developers are working and once done we will release it. Take care Pal. Peace

March 7, 2013 at 1:11 AM

It works but the outer border and the overall format is totally different from what is seen in the demo? am i doing something wrong here? insted of follow/like buttons i see links of follow/like, and everything comes on the next line, first fb logo comes, then below that fb dan count comes like that? pl tell me how to fix this, i reallyyyyyyyyyyyy want this on my blog

Waiting for ur reply...

http://ultimatesqs.blogspot.in/

Editorial Team MOD
March 7, 2013 at 1:37 AM

I cannot see the code installed in you blog. Provide the URL of the site where you have added it.

March 18, 2013 at 11:54 AM

i removed it bcoz of the problems i encountered with it so it was not looking good, so i had no choice but to remove it.

Editorial Team MOD
March 18, 2013 at 1:10 PM

Your Template's coding might be conflicting with it. I rechecked the widget and everything seems to be in order.

February 28, 2016 at 8:45 AM

Nice widget... thnks for this sharing

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 - 2018. MBL Networks, All Rights are Strictly Reserved.