Blogger Cloud social share widget V1

Mainly social share buttons are best method to attract visitors to share your topic. But i have personally while i am first time in blog that time i have not getting my my real choice social share buttons with some attractive look. But after sometime i learn something in Photoshop to creating some social button images with some css work. Now i am going to share the amazing widget to all bloggers and also this gadget can also use the WordPress users to getting much more amount of shares. Also this is the first version of the Cloud social share widget but i will try my best to sharing you other 2 versions but need to subscribe our news letter to don't miss the widgets.

Blogger Cloud social share widget V1

First visit blogger Dashboard > Design > Edit HTML

now search the below code using Ctrl + F

]]></b:skin>

Now paste the below code just above it.

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

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

.MBC_icons ul li span { display: block; }

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

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

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

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

.MBC_icons.mbc_dark ul li .mbc_label { color: #cacaca; }

.MBC_icons ul li.mbc_google_network span.mbc_icon { background: url(http://1.bp.blogspot.com/-5rsGetAFmoM/UBPxCkUplzI/AAAAAAAACIs/HyEFTenHv3I/s320/google.png) no-repeat;}

.MBC_icons ul li.mbc_facebook_network span.mbc_icon { background: url(http://4.bp.blogspot.com/-UrFJsOtOax4/UBPwN4GLyNI/AAAAAAAACIE/tlCeGg-dM70/s320/facebook.png) no-repeat;  }

.MBC_icons ul li.mbc_twitter_network span.mbc_icon { background: url(http://1.bp.blogspot.com/-q8bsb6UelnI/UBPxvcf6q8I/AAAAAAAACJw/0WniYXArqsk/s320/twitter.png) no-repeat;  }

.MBC_icons ul li.mbc_vimeo_network span.mbc_icon { background: url(http://2.bp.blogspot.com/-R8ALDsl0OFs/UBPxvENEhQI/AAAAAAAACJk/aJ48dz57zv0/s320/vimeo.png) no-repeat; width:  }

.MBC_icons ul li.mbc_youtube_network span.mbc_icon { background: url(http://4.bp.blogspot.com/-YYcvXiJQbbY/UBPxu7CrDfI/AAAAAAAACJY/LBs6hn5HRDc/s320/youtube.png) no-repeat;  }

.MBC_icons ul li.mbc_dribbble_network span.mbc_icon { background: url(http://2.bp.blogspot.com/-fCrVOMDGTTw/UBPwNrkuOqI/AAAAAAAACHs/v4ebC1tAjdk/s320/dribbble.png) no-repeat;}

.MBC_icons ul li.mbc_forrst_network span.mbc_icon { background: url(http://4.bp.blogspot.com/-ZwU0jC8N5ZE/UBPxCcKZCPI/AAAAAAAACIc/lO_Ry2QzSaY/s320/forrst.png) no-repeat;}

.MBC_icons ul li.mbc_feedburner_network span.mbc_icon { background: url(http://1.bp.blogspot.com/-te1DsRlowsk/UBPwOO2TW2I/AAAAAAAACIQ/iu9TcmCjV8I/s320/feedburner.png) no-repeat;}

.MBC_icons ul li.mbc_envato_network span.mbc_icon { background: url(http://2.bp.blogspot.com/-Tq5-DU4ALCY/UBPwN-LV3BI/AAAAAAAACH4/0nM-oAjztSw/s320/envato.png) no-repeat;}

.MBC_icons ul li.mbc_digg_network span.mbc_icon { background: url(http://2.bp.blogspot.com/-cqfedj9JT3s/UBPwNQTvjRI/AAAAAAAACHg/qrIe39eHvzg/s320/digg.png) no-repeat;}

.MBC_icons ul li.mbc_likedin_network span.mbc_icon { background: url(http://1.bp.blogspot.com/-DfyF9ZJUPHQ/UBPxDCP3RxI/AAAAAAAACJE/w6hecyvqdAs/s320/linkedin.png) no-repeat;}

.MBC_icons ul li.mbc_pinterest_network span.mbc_icon { background: url(http://4.bp.blogspot.com/-V7YFeOx7p3E/UBPxDWgVXoI/AAAAAAAACJM/hnMyCjzp2iU/s320/pinterest.png) no-repeat;}

.MBC_icons ul li.mbc_klout_network span.mbc_icon { background: url(http://4.bp.blogspot.com/-Cdhwf6IrYsA/UBPxC0xP6QI/AAAAAAAACI0/B2SFAVWWmAU/s320/klout.png) no-repeat;}

.MBC_icons.mbc_theme_1 ul li { margin: 5px 25px 5px 0; display: inline-block; }

.MBC_icons.mbc_theme_1 ul li span.mbc_count { color: #555555; width: 53px; height: 34px; background: url(http://3.bp.blogspot.com/-sbfMME0rITg/UBPxvsCzlDI/AAAAAAAACJ8/0cA2OaEu5jA/s320/cloud.png) no-repeat; font-size: 12px; font-weight: bold; text-align: center; padding-top: 10px; margin-bottom: 5px;  }

.MBC_icons.mbc_theme_1 ul li span.mbc_count_hidden { width: 53px; height: 34px; padding-top: 10px; margin-bottom: 5px;  }

.MBC_icons.mbc_theme_1 ul li span.mbc_label { margin-left: -16px; font-size: 11px; font-weight: bold; width: 65px; text-align: center; }

Now save your template.

then go to Design > Page element

Now select an HTML/JavaScript gadget.

Then paste the below code in the box.

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

Now change the blue color links with your links.

Now save your template.

Visit your blog and enjoy with new premium widget.