Professional Cloud social subscribe widget V2

Social buttons is a great role to increase any blog or website traffic in a higher way. Also for getting much more amount of valuable traffic need social networking. In our previous posts i have share the first version of the tutorial
Blogger Cloud social share widget V1. But after thinking much more time i have created an new design with decreasing button sizes with removing counter background image. For getting much more amount of subscribers in our feedburner, Facebook likes and other social subscribers to need to adding this gadget in your blog. Now read the full topic to know much more about this widget.

Professional Cloud social subscribe widget V2

First visit Blogger Dashboard > Design > Edit HTML

Then search below code using Ctrl + F

]]></b:skin>

Now paste the below code just above it.

.Mybloggerclub { font-size: 16px; font-family: "Helvetica Neue", "Helvetica", "Arial" , sans-serif; margin: 20px 0; }

.Mybloggerclub ul { margin: 10px 0 0 0 ; padding: 0; list-style: none; }

.Mybloggerclub ul li span { display: block; }

.Mybloggerclub ul li .mbc_icon, .Mybloggerclub ul li .mbc_icon a { display: block; width: 34px; height: 36px; }

.Mybloggerclub ul li .mbc_count { color: #555555; }

.Mybloggerclub ul li .mbc_label { color: #afafaf; }

.Mybloggerclub.mbc_dark ul li .mbc_count { color: #fdfdfd; }

.Mybloggerclub.mbc_dark ul li .mbc_label { color: #cacaca; }
.Mybloggerclub.mbc_theme_4 ul li.mbc_facebook_network span.mbc_icon { background: url(http://2.bp.blogspot.com/-dxdWIIhiVCk/UBZyUKA1TiI/AAAAAAAACWo/Z04hEouhz8c/s320/facebook.png) no-repeat;  }

.Mybloggerclub.mbc_theme_4 ul li.mbc_twitter_network span.mbc_icon { background: url(http://2.bp.blogspot.com/-7DabzoVFmkk/UBZxglaHcnI/AAAAAAAACVg/g4klrl_wIac/s320/twitter.png) no-repeat;  }

.Mybloggerclub.mbc_theme_4 ul li.mbc_vimeo_network span.mbc_icon { background: url(http://1.bp.blogspot.com/-PNN8GLizxCs/UBZxgR93w8I/AAAAAAAACVU/kD8CV-PSvi0/s320/vimeo.png) no-repeat; width:  }

.Mybloggerclub.mbc_theme_4 ul li.mbc_youtube_network span.mbc_icon { background: url(http://3.bp.blogspot.com/-Fb1z-QTYbw0/UBZxgOiSNyI/AAAAAAAACVI/c55jAAk7r5s/s320/youtube.png) no-repeat;  }

.Mybloggerclub.mbc_theme_4 ul li.mbc_dribbble_network span.mbc_icon { background: url(http://1.bp.blogspot.com/-fIXqoa3czI0/UBZy86LxcoI/AAAAAAAACXA/z8tIeMw_RQ0/s320/dribbble.png) no-repeat;}

.Mybloggerclub.mbc_theme_4 ul li.mbc_forrst_network span.mbc_icon { background: url(http://2.bp.blogspot.com/-Xaijbj-W76k/UBZzVlHbQdI/AAAAAAAACXY/6-_p_FtosmU/s320/forrst.png) no-repeat;}

.Mybloggerclub.mbc_theme_4 ul li.mbc_feedburner_network span.mbc_icon { background: url(http://4.bp.blogspot.com/-jdjSk7nNxe4/UBZyT-gAE2I/AAAAAAAACWc/q60PPC1r5ok/s320/feedburner.png) no-repeat;}

.Mybloggerclub.mbc_theme_4 ul li.mbc_envato_network span.mbc_icon { background: url(http://4.bp.blogspot.com/-W_An9l_SIMI/UBZyUV9m-_I/AAAAAAAACW0/gmdz2xbCrK4/s320/envato.png) no-repeat;}

.Mybloggerclub.mbc_theme_4 ul li.mbc_digg_network span.mbc_icon { background: url(http://3.bp.blogspot.com/-OWExl0NOcPs/UBZy8-HPj5I/AAAAAAAACXM/vhygT1if4xg/s320/digg.png) no-repeat;}

.Mybloggerclub.mbc_theme_4 ul li.mbc_likedin_network span.mbc_icon { background: url(http://4.bp.blogspot.com/-dkdrs5qO8AA/UBZxg9X0lPI/AAAAAAAACV4/2V1hROG265c/s320/linkedin.png) no-repeat;}

.Mybloggerclub.mbc_theme_4 ul li.mbc_google_network span.mbc_icon { background: url(http://2.bp.blogspot.com/-vqMk_UmFFlY/UBZyTz_mhUI/AAAAAAAACWQ/Vw2qhG7HC0U/s320/google.png) no-repeat;}

.Mybloggerclub.mbc_theme_4 ul li.mbc_pinterest_network span.mbc_icon { background: url(http://3.bp.blogspot.com/-odYX2yun1SM/UBZxg5XTIUI/AAAAAAAACVs/agw32EuFJUM/s320/pinterest.png) no-repeat;}

.Mybloggerclub.mbc_theme_4 ul li.mbc_klout_network span.mbc_icon { background: url(http://1.bp.blogspot.com/-M_9Zw58GMXA/UBZyTrheVUI/AAAAAAAACWE/wz21sL9W1Yo/s320/klout.png) no-repeat;}

.Mybloggerclub.mbc_theme_4 ul li { display: inline-block; vertical-align: middle; margin: 5px 15px 5px 0;}

.Mybloggerclub.mbc_theme_4 ul li span.mbc_icon { display: inline-block; vertical-align: middle; width: 28px; height: 28px; }

.Mybloggerclub.mbc_theme_4 ul li div.mbc_text { display: inline-block; vertical-align: middle; margin-left: 5px;  }

.Mybloggerclub.mbc_theme_4 ul li span.mbc_count {  font-size: 14px; line-height: 14px; text-align: left; font-weight: bold;}

.Mybloggerclub.mbc_theme_4 ul li span.mbc_label {  font-size: 11px; line-height: 11px; text-align: left; font-weight: bold;  }

Then go to Design > Page element.

Now paste the below code in a JavaScript widget.

<div class="Mybloggerclub mbc_theme_4 "><ul><li class="mbc_facebook_network"><span class="mbc_icon"><a href="https://facebook.com/" target="_blank"></a></span><div class="mbc_text"><span class="mbc_count">52m</span><span class="mbc_label">fans</span></div></li><li class="mbc_twitter_network"><span class="mbc_icon"><a href="http://twitter.com/" target="_blank"></a></span><div class="mbc_text"><span class="mbc_count">21</span><span class="mbc_label">followers</span></div></li><li class="mbc_google_network"><span class="mbc_icon"><a href="https://plus.google.com/" target="_blank"></a></span><div class="mbc_text"><span class="mbc_count_hidden"></span><span class="mbc_label">google+</span></div></li><li class="mbc_feedburner_network"><span class="mbc_icon"><a href="http://feeds.feedburner.com/" target="_blank"></a></span><div class="mbc_text"><span class="mbc_count">101k</span><span class="mbc_label">subscribers</span></div></li><li class="mbc_youtube_network"><span class="mbc_icon"><a href="http://youtube.com/" target="_blank"></a></span><div class="mbc_text"><span class="mbc_count">1m</span><span class="mbc_label">subscribers</span></div></li><li class="mbc_vimeo_network"><span class="mbc_icon"><a href="http://vimeo.com/" target="_blank"></a></span><div class="mbc_text"><span class="mbc_count">41</span><span class="mbc_label">likes</span></div></li><li class="mbc_likedin_network"><span class="mbc_icon"><a href="http://linkedin.com/" target="_blank"></a></span><div class="mbc_text"><span class="mbc_count_hidden"></span><span class="mbc_label">linkedIn</span></div></li><li class="mbc_dribbble_network"><span class="mbc_icon"><a href="http://dribbble.com/" target="_blank"></a></span><div class="mbc_text"><span class="mbc_count">7k</span><span class="mbc_label">followers</span></div></li><li class="mbc_digg_network"><span class="mbc_icon"><a href="http://digg.com/" target="_blank"></a></span><div class="mbc_text"><span class="mbc_count">318</span><span class="mbc_label">followers</span></div></li><li class="mbc_envato_network"><span class="mbc_icon"><a href="http://themeforest.net/user/" target="_blank"></a></span><div class="mbc_text"><span class="mbc_count">44</span><span class="mbc_label">followers</span></div></li><li class="mbc_pinterest_network"><span class="mbc_icon"><a href="http://pinterest.com/" target="_blank"></a></span><div class="mbc_text"><span class="mbc_count_hidden"></span><span class="mbc_label">pinterest</span></div></li><li class="mbc_klout_network"><span class="mbc_icon"><a href="http://klout.com/" target="_blank"></a></span><div class="mbc_text"><span class="mbc_count_hidden"></span><span class="mbc_label">klout</span></div></li></ul></div>

 Change all blue color links with your links.

Save your template.

Visit your blog and enjoy with new gadget.