Add Mega Floating Social Network Sharing Buttons Bar

Posted by : TheCode-X

Wednesday, 15 January 2014

- Add Comment

In this tutorial im gonna explain how to add largest floating social network icons. you can
add this social icon bar on top, bottom, left and right.Im using CSS and HTML for this. Css code is too long. Copy paste it well. You can link this all icons to your profile. Its easy. If you want to get my earlier post about social buttons and icons

LIVE DEMO

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.

5. Find this tag by using Ctrl+F ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

CSS

/* The CSS Code for the menu starts here http://bitly.com/BloggerPlayground*/  /* 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;}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

HTML

Replace # with your links. There have more, be patient to do it.
You can replace Right with bottom, left, top.

10. Now save your HTML/Javascript'.

Mix-R

"Myths, legends and stories are the signposts previous generations have left us so we don’t have to figure out our own personal journey in solitude!"

Notifikasi

Mix Blogging