Beautiful Floating Social Network Tabs for Blogger

Share On Google+Add This To DeliciousTweet/ReTweet ThisShare on FacebookStumbleUpon ThisDigg This

Foating share buttons are much more popular in blogging world for sharing our blog contents in our favorite social sharing site. Mostly we are giving in this tutorial an awesome design social share with css effects and also like Wordpress you can control the widget to placing in right side, left side, top or bottom that your choice. Before in floating social buttons we can place only left or right but i have design the social bar to controlling in your choice. For using and sharing this buttons you can feel much more happy and also i have added many social buttons but if you are not interested to adding more buttons then also you can remove it in your choice. This is also reducing your widget space because in this gadget you can directly add social boxes for easy sharing.

LiveDemo

How to Apply Social Network Tabs for Blogger

• Go to Blogger Dashboard > Design > Edit HTML
• Expand Widget Templates
• Then search below code using Ctrl + f

]]></b:skin>

Now paste the below code just above it.

/* CoolDoood Social Network Tabs */
.MBC ul, .MBC li, .MBC h3 {
padding: 0;
margin: 0;
list-style: none!important;
}
.MBC {
font-size: 12px;
color: #666;
}
.active.MBC .mbc-slider {
-webkit-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6);
}
.MBC a {
text-decoration:none;
}
.MBC-content {
position: relative;
}
.social-tabs li {
padding: 4px;
width: 27px;
height: 26px;
z-index: 10;
}
.active .social-tabs li {
z-index: 10;
-webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6);
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6);
}
.active .social-tabs li.active {
z-index: 11;
-webkit-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6);
}
.static .social-tabs {
padding-left: 8px;
}
.static .social-tabs li {
float: left;
margin-right: 2px;
border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
}
.top .social-tabs {
padding-left: 8px;
}
.top.align-right .social-tabs {
padding-left: 0;
padding-right: 8px;
}
.top .social-tabs li {
padding: 3px 4px;
margin-right: 2px;
float: left;
border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
}
.right .social-tabs {
padding-top: 8px;
}
.right .social-tabs li {
margin: 0 0 2px 0;
border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
}
.bottom .social-tabs {
padding-left: 8px;
}
.bottom.align-right .social-tabs {
padding-left: 0;
padding-right: 8px;
}
.bottom .social-tabs li {
padding: 4px 4px 2px 4px;
margin: 0 2px 0 0;
float: left;
border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
}
.left .social-tabs {
padding-top: 8px;
}
.left .social-tabs li {
margin: 0 0 2px 0;
border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
}
.mbc-slider, .MBC-slider {
clear: both;
overflow: hidden;
}
.tab-content {
position: relative;
overflow: hidden;
z-index: 11;
background: url no-repeat center 200px;
}
.tab-content ul {
font-size: 11px;
}
.tab-content .tab-inner {
background: #fff;
overflow: hidden;
}
.tab-inner ul {
padding: 0 10px;
}
.tab-inner .profile {
position: relative;
padding: 10px;
border-bottom: 1px solid #ccc;
background: #ececec;
}
.tab-inner .profile h3 {
margin: 0;
padding: 3px 0 3px 26px;
position: relative;
}
.tab-inner .profile h3 a {
font-size: 14px;
text-decoration: none;
}
.tab-inner .profile h3, .tab-inner .profile h3 a {
color: #555;
text-shadow: 0 1px 0 #fff;
}
.tab-inner .MBC-btn {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
font: bold 12px/14px Arial, sans-serif;
display:inline-block;
text-decoration:none;
outline:none;
padding: 5px 8px;
background: #fcfcfc url repeat-x 0 0;
color: #fff;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
.tab-inner .MBC-btn:hover{
background-position: 0 100%;
color: #fff;
}
.tab-inner .profile a.avatar{
display:block;
float:left;
text-decoration:none;
outline:none;
margin:0 10px 0 0
}
.tab-inner .profile a.avatar img{
padding:1px;
background: #fff;
border: 3px solid #ccc;
display:block
}
.tab-rss .profile h3 {
background: urlno-repeat 0 4px;
}
.tab-flickr .profile h3 {
background: url no-repeat 0 4px;
}
.tab-delicious .profile h3 {
background: url) no-repeat 0 4px;
}
.tab-twitter .profile h3 {
background: url no-repeat 0 4px;
}
.tab-facebook .profile h3 {
background: url no-repeat 0 4px;
}
.tab-fblike .profile h3 {
background: url no-repeat 0 4px;
}
.tab-fbrec .profile h3 {
background: url no-repeat 0 4px;
}
.tab-google .profile h3 {
background: url no-repeat 0 4px;
}
.tab-youtube .profile h3 {
background: url no-repeat 0 4px;
}
.tab-pinterest .profile h3 {
background: url no-repeat 0 4px;
}
.tab-lastfm .profile h3 {
background: url no-repeat 0 4px;
}
.tab-dribbble .profile h3 {
background: url no-repeat 0 4px;
}
.tab-vimeo .profile h3 {
background: url no-repeat 0 4px;
}
.tab-stumbleupon .profile h3 {
background: url no-repeat 0 4px;
}
.static .mbc-slider, .static .MBC-slider {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.static .tab-content {
padding: 10px;
}
.static .tab-inner {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.top .mbc-slider, .top .MBC-slider {
border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
}
.top .tab-inner {
border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
}
.top .tab-content {
padding: 0 10px 10px 10px;
}
.right .mbc-slider, .right .MBC-slider {
border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
}
.right .tab-inner {
border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
}
.right .tab-content {
padding: 10px 0 10px 10px;
}
.bottom .mbc-slider, .bottom .MBC-slider {
border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
}
.bottom .tab-inner {
border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
}
.bottom .tab-content {
padding: 10px 10px 0 10px;
}
.left .mbc-slider, .left .MBC-slider {
border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
}
.left .tab-inner {
border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
}
.left .tab-content {
padding: 10px 10px 10px 0;
}
.MBC .stream, .mbc .stream {
overflow: hidden;
}
.stream p {
margin: 0;
padding: 0;
}
.tab-inner ul li {
padding: 5px 0 20px 0;
margin: 0;
position: relative;
overflow: hidden;
background: none;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
}
.tab-inner ul li .thumb {
float: left;
margin: 0 10px 0 0;
}
.tab-inner ul li .thumb img {
border: 3px solid #ececec;
padding: 1px;
background: #fff;
}
.tab-inner ul li .logo {
margin-bottom: 3px;
}
.tab-inner ul li .title {
display: block;
font: bold 12px Arial, sans-serif;
margin-bottom: 3px;
}
.tab-inner ul li .title.clear {
clear: both;
}
.tab-inner ul li .text {
display: block;
}
.tab-inner ul li .text br{
display: none;
}
.tab-inner ul li .date {
position: absolute;
bottom: 5px;
left: 0;
font-style: italic;
color: #999;
font-size: 90%;
}
.tab-inner ul li .meta {
display: block;
font-size: 90%;
color: #999;
}
.tab-inner ul li .meta span {
margin: 0 8px 5px 0;
display: block;
float: left;
padding: 0 0 0 15px;
line-height: 12px;
}
.tab-dribbble .tab-inner ul li .thumb img {
margin-bottom: 5px;
}
.tab-lastfm .tab-inner ul li .title {
background: url no-repeat 0 0;
padding-left: 17px;
margin-bottom: 0;
}
.tab-google .tab-inner ul li .title {
margin-bottom: 5px;
}
.tab-vimeo .tab-inner ul li .text {
margin-bottom: 5px;
}
.tab-inner ul li .meta span.plusones {
padding-left: 0;
}
.tab-inner ul li .meta span.shares {
background: url no-repeat 0 0;
padding-left: 20px;
}
.tab-inner ul li .meta span.views {
background: url no-repeat 0 0;
padding-left: 18px;
}
.tab-inner ul li .meta span.likes {
background: url no-repeat 0 0;
padding-left: 16px;
}
.tab-inner ul li .meta span.comments {
background: url no-repeat 0 0;
}
.tab-inner ul li .meta span.users {
background: url no-repeat 0 0;
}
.tab-inner ul li .meta span.videos {
background: url no-repeat 0 0;
padding-left: 16px;
}
.tab-inner ul li.MBC-error {
color: #990000;
}
.MBC-loading {
background: url no-repeat 10px center;
padding: 10px 30px 10px 42px;
}
.controls {
position: absolute;
left: 10px;
height: 20px;
padding: 5px 0;
z-index: 12;
display: none;
background: url) repeat 0 0;
}
.controls ul {
padding: 0 10px;
}
.controls li {
display: inline;
}
.controls a {
display: block;
width: 20px;
height: 20px;
float: left;
margin-right: 4px;
background: url no-repeat 0 0;
}
.controls .prev {
background-position: -40px 0;
}
.controls .next {
background-position: -60px 0;
}
.controls .play {
background-position: 0 0;
}
.controls .pause {
background-position: -20px 0;
}
.controls .mbc-close {
background-position: -80px 0;
}
.controls .prev:hover {
background-position: -40px -20px;
}
.controls .next:hover {
background-position: -60px -20px;
}
.controls .play:hover {
background-position: 0 -20px;
}
.controls .pause:hover {
background-position: -20px -20px;
}
.controls .mbc-close:hover {
background-position: -80px -20px;
}
.static .controls {
bottom: 10px;
}
.top .controls {
bottom: 10px;
}
.right .controls {
bottom: 10px;
right: 0;
}
.bottom .controls {
bottom: 0;
}
.left .controls {
bottom: 10px;
left: 0;
}
.tab-google .tab-inner .google-page {
overflow: hidden;
height: 55px;
border-bottom: 1px solid #ccc;
}
.tab-google .tab-inner .google-page.standard {
height: 117px;
}
.tab-google .tab-inner .google-page.small iframe{
height: 69px;
margin-bottom: 0;
}
.tab-google .tab-inner .google-page.standard iframe{
height: 131px;
margin-bottom: 0;
}
.tab-flickr .tab-inner ul {
padding-top: 5px;
}
.tab-flickr .tab-inner li {
float: left;
padding: 0;
margin: 0 5px 5px 0;
border: none;
}
.tab-flickr .tab-inner li .thumb {
margin: 0;
}
.tab-flickr .tab-inner li img{
height: 70px;
}
.youtube-subscribe {
overflow: hidden;
height: 105px;
width: 100%;
border: 0;
}
.tab-digg .digg-widget .digg-widget-head.premium, .tab-digg .digg-widget .digg-widget-head {
height: auto;
overflow: hidden;
padding: 10px;
position: relative;
white-space: nowrap;
border: none;
border-radius: 0;
-webkit-border-radius: 0;
}
.tab-digg .digg-widget .digg-widget-head h2 {
font-size: 14px;
font-weight: bold;
line-height: 20px;
margin: 0;
overflow: hidden;
padding: 0 0 0 26px;
white-space: nowrap;
text-shadow: 0 1px 0 #fff;
background: url no-repeat 0 0;
}
.tab-digg .digg-widget .digg-widget-head a {
top: 12px;
}
.tab-digg .digg-widget-content {
border-top: 1px solid #ccc;
}
.tab-content.tab-linkedin .tab-inner {
background: #fff url(../images/loader.gif) no-repeat center center;
}
.tab-twitter,.tab-twitter .MBC-btn, li.active.MBC-twitter, li.MBC-twitter:hover{background-color:#4ec2dc;}.tab-facebook,.tab-facebook .MBC-btn, li.active.MBC-facebook, li.MBC-facebook:hover{background-color:#3b5998;}.tab-fblike,.tab-fblike .MBC-btn, li.active.MBC-fblike, li.MBC-fblike:hover{background-color:#3b5998;}.tab-fbrec,.tab-fbrec .MBC-btn, li.active.MBC-fbrec, li.MBC-fbrec:hover{background-color:#3b5998;}.tab-google,.tab-google .MBC-btn, li.active.MBC-google, li.MBC-google:hover{background-color:#2d2d2d;}.tab-rss,.tab-rss .MBC-btn, li.active.MBC-rss, li.MBC-rss:hover{background-color:#FF9800;}.tab-flickr,.tab-flickr .MBC-btn, li.active.MBC-flickr, li.MBC-flickr:hover{background-color:#f90784;}.tab-delicious,.tab-delicious .MBC-btn, li.active.MBC-delicious, li.MBC-delicious:hover{background-color:#3271CB;}.tab-youtube,.tab-youtube .MBC-btn, li.active.MBC-youtube, li.MBC-youtube:hover{background-color:#DF1F1C;}.tab-digg,.tab-digg .MBC-btn, li.active.MBC-digg, li.MBC-digg:hover{background-color:#195695;}.tab-pinterest,.tab-pinterest .MBC-btn, li.active.MBC-pinterest, li.MBC-pinterest:hover{background-color:#CB2528;}.tab-lastfm,.tab-lastfm .MBC-btn, li.active.MBC-lastfm, li.MBC-lastfm:hover{background-color:#C90E12;}.tab-dribbble,.tab-dribbble .MBC-btn, li.active.MBC-dribbble, li.MBC-dribbble:hover{background-color:#F175A8;}.tab-vimeo,.tab-vimeo .MBC-btn, li.active.MBC-vimeo, li.MBC-vimeo:hover{background-color:#4EBAFF;}.tab-stumbleupon,.tab-stumbleupon .MBC-btn, li.active.MBC-stumbleupon, li.MBC-stumbleupon:hover{background-color:#EB4924;}.tab-tumblr,.tab-tumblr .MBC-btn, li.active.MBC-tumblr, li.MBC-tumblr:hover{background-color:#365472;}.tab-deviantart,.tab-deviantart .MBC-btn, li.active.MBC-deviantart, li.MBC-deviantart:hover{background-color:#B8C529;}.tab-linkedin,.tab-linkedin .MBC-btn, li.active.MBC-linkedin, li.MBC-linkedin:hover{background-color:#006DA7;}.social-tabs li {background:#7d7d7d;}

• Save your template.
• Now paste the below code in JavaScript widget.

<div id="MBC-2" class="MBC right align-top sliding" style="width: 360px; position: fixed; margin-right: -360px; top: 10px; right: 0px; "><div id="social-tabs" class="MBC-content"><ul class="social-tabs" style="position: absolute; top: 0px; left: 0px; margin-left: -35px; width: 35px; "><li class="MBC-twitter first"><a href="#" rel="0" title="twitter"><img src="http://1.bp.blogspot.com/-xBOKgPOlVjY/UBVYAYzsGtI/AAAAAAAACQo/AMDko1yTznw/s320/twitter.png" alt="" rel="twitter"></a></li><li class="MBC-facebook"><a href="#" rel="1" title="facebook"><img src="http://1.bp.blogspot.com/--6Q5YLxZUKY/UBVWkh4rn1I/AAAAAAAACPI/HCcVF2YTJEI/s320/facebook.png" alt="" rel="facebook"></a></li><li class="MBC-fblike"><a href="#" rel="2" title="fblike"><img src="http://3.bp.blogspot.com/-E8TsQgkPb0A/UBVWk_Q0fRI/AAAAAAAACPU/1RfGobJ8CRo/s320/fblike.png" alt="" rel="fblike"></a></li><li class="MBC-fbrec"><a href="#" rel="3" title="fbrec"><img src="http://2.bp.blogspot.com/-eTJffp_XqN4/UBVXYDUCXoI/AAAAAAAACPg/DsDQ5g4R45g/s320/fbrec.png" alt="" rel="fbrec"></a></li><li class="MBC-google"><a href="#" rel="4" title="google"><img src="http://1.bp.blogspot.com/-VpucjHQuLWk/UBVXYK-ZfbI/AAAAAAAACPs/WRJ3wLtJSfg/s320/google.png" alt="" rel="google"></a></li><li class="MBC-linkedin"><a href="#" rel="5" title="linkedin"><img src="http://1.bp.blogspot.com/-9EjdzY2Cvs8/UBVY0XugIFI/AAAAAAAACRM/W2afpfxj3cI/s320/linkedin.png" alt="" rel="linkedin"></a></li><li class="MBC-rss"><a href="#" rel="6" title="rss"><img src="http://2.bp.blogspot.com/-iUNrYWpW988/UBVXYxBHMCI/AAAAAAAACQQ/WOyuBxGREkA/s320/rss.png" alt="" rel="rss"></a></li><li class="MBC-delicious"><a href="#" rel="7" title="delicious"><img src="http://1.bp.blogspot.com/--FNvyhhovqU/UBVWkB89feI/AAAAAAAACOk/i1tBmlFgaV0/s320/delicious.png" alt="" rel="delicious"></a></li><li class="MBC-youtube"><a href="#" rel="8" title="youtube"><img src="http://4.bp.blogspot.com/-vbN6ifuNgGI/UBVYA3CJNOI/AAAAAAAACRA/YMiLLa8gW6w/s320/youtube.png" alt="" rel="youtube"></a></li><li class="MBC-digg"><a href="#" rel="9" title="digg"><img src="http://2.bp.blogspot.com/-lqiOg4rwRyE/UBVWkR21FhI/AAAAAAAACOw/RVl9vY-rU0I/s320/digg.png" alt="" rel="digg"></a></li><li class="MBC-pinterest"><a href="#" rel="10" title="pinterest"><img src="http://1.bp.blogspot.com/-O6jVOTHrd2Y/UBVXYus_ZjI/AAAAAAAACQE/KBGD_veEFj8/s320/pinterest.png" alt="" rel="pinterest"></a></li><li class="MBC-lastfm"><a href="#" rel="11" title="lastfm"><img src="http://2.bp.blogspot.com/-T-aRYyLuBhs/UBVXYVrtkGI/AAAAAAAACP4/bkwq53L15Z8/s320/lastfm.png" alt="" rel="lastfm"></a></li><li class="MBC-dribbble"><a href="#" rel="12" title="dribbble"><img src="http://3.bp.blogspot.com/-JxPFx4fln0s/UBVWkUY6ijI/AAAAAAAACO8/DHtm3WXhL0I/s320/dribbble.png" alt="" rel="dribbble"></a></li><li class="MBC-vimeo"><a href="#" rel="13" title="vimeo"><img src="http://4.bp.blogspot.com/-8I2NKLKb2xA/UBVYAsBm5EI/AAAAAAAACQ0/FoMzvNKtMdE/s320/vimeo.png" alt="" rel="vimeo"></a></li><li class="MBC-stumbleupon"><a href="#" rel="14" title="stumbleupon"><img src="http://4.bp.blogspot.com/-XutABgjQhno/UBVYAS-3SrI/AAAAAAAACQc/d3_vS_N_vKs/s320/stumbleupon.png" alt="" rel="stumbleupon"></a></li></ul><ul class="MBC-slider"><li class="tab-content tab-twitter tab-active" style="height: 535px; width: 350px; position: relative; display: list-item; "><div class="tab-inner" style="height: 535px; width: 350px; "></div></li><li class="tab-content tab-facebook" style="height: 535px; width: 350px; position: relative; display: none; "><div class="tab-inner" style="height: 535px; width: 350px; "></div></li><li class="tab-content tab-fblike" style="height: 535px; width: 350px; position: relative; display: none; "><div class="tab-inner" style="height: 535px; width: 350px; "></div></li><li class="tab-content tab-fbrec" style="height: 535px; width: 350px; position: relative; display: none; "><div class="tab-inner" style="height: 535px; width: 350px; "></div></li><li class="tab-content tab-google" style="height: 535px; width: 350px; position: relative; display: none; "><div class="tab-inner" style="height: 535px; width: 350px; "></div></li><li class="tab-content tab-linkedin" style="height: 535px; width: 350px; position: relative; display: none; "><div class="tab-inner" style="height: 535px; width: 350px; "></div></li><li class="tab-content tab-rss" style="height: 535px; width: 350px; position: relative; display: none; "><div class="tab-inner" style="height: 535px; width: 350px; "></div></li><li class="tab-content tab-delicious" style="height: 535px; width: 350px; position: relative; display: none; "><div class="tab-inner" style="height: 535px; width: 350px; "></div></li><li class="tab-content tab-youtube" style="height: 535px; width: 350px; position: relative; display: none; "><div class="tab-inner" style="height: 535px; width: 350px; "></div></li><li class="tab-content tab-digg" style="height: 535px; width: 350px; position: relative; display: none; "><div class="tab-inner" style="height: 535px; width: 350px; "></div></li><li class="tab-content tab-pinterest" style="height: 535px; width: 350px; position: relative; display: none; "><div class="tab-inner" style="height: 535px; width: 350px; "></div></li><li class="tab-content tab-lastfm" style="height: 535px; width: 350px; position: relative; display: none; "><div class="tab-inner" style="height: 535px; width: 350px; "></div></li><li class="tab-content tab-dribbble" style="height: 535px; width: 350px; position: relative; display: none; "><div class="tab-inner" style="height: 535px; width: 350px; "></div></li><li class="tab-content tab-vimeo" style="height: 535px; width: 350px; position: relative; display: none; "><div class="tab-inner" style="height: 535px; width: 350px; "></div></li><li class="tab-content tab-stumbleupon" style="height: 535px; width: 350px; position: relative; display: none; "><div class="tab-inner" style="height: 535px; width: 350px; "></div></li></ul><div class="controls" style="width: 350px; display: none; "><ul><li><a href="#" class="pause"></a></li><li><a href="#" class="prev"></a></li><li><a href="#" class="next"></a></li><li><a href="#" class="mbc-close close"></a></li></ul></div></div></div>

• Now put your social page links by removing #.
• For changing the button areas change the red color text with your choice like: right, bottom, top and left.
• Now save your template and visit your blog.

Kindly Bookmark this Post using your favorite Bookmarking service: