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

Socialize It →

Tweet

28

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.

AIO Social Subscribe Box (DEMO)

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

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).