Blogger Simple share Floating Bar

Floating social bars are are not good while talking about loading time of our blogs. Also uselessly its increasing more codes adding in blogger with no professional design.  Today after some hour thinking i have created an new simple social bar with opacity effect. This social bar is tested in all most all browsers and its just working much more perfect.  Now in our previous posts we are share many types professional design social share widgets for blogger and i think all most all bloggers are liking this widgets because professional design. But if you are  interested to increasing your widget space then you must add the social floating bars for getting much more space to adding more widgets and all also you will getting many subscribers to promoting your blog. So take look in the full article to get details about this widget.

Blogger Simple share Floating Bar

First visit Blogger Dashboard > Design > Edit HTML

Now search below code using Ctrl + F

]]></b:skin>

Paste the below code just above it.

#MBC-wrapper    {
    position: fixed;
    z-index: 1000;
}
#MBC    {
    width: 42px;
    padding: 0;
    position: relative;
    color: #4a7bb8;
}

#MBC img    {
    padding: 5px;
    background: #fff;
    margin: 0;
    border: 1px solid #ccc;
    border-bottom: none;
}
#MBC a:last-child img    {
    border-bottom: 1px solid #ccc;
}
#MBC a    {
    margin: 0;
    padding: 0;
    height: 0px;
    line-height: 0;
}
#MBC a:hover img    {
    filter: alpha(opacity=50);
    -khtml-opacity: 0.5;     
    -moz-opacity: 0.5;      
    opacity: 0.5;          
}

Now save your template.

Then go to Design > Page element

Paste the below code in javascript widget.

<div id="MBC-wrapper">
                <div id="MBC">
                    <em>Share</em>
                                            <a href="http://www.feedburner.com/"><img src="http://3.bp.blogspot.com/-1-BQ8a0mpew/UBaorvIIESI/AAAAAAAACaI/jVWc8-vAMn4/s320/rss.png" class="MBC" alternate="RSS Feed"></a>

                        <a href="http://digg.com/&amp;title=mbc"><img src="http://4.bp.blogspot.com/-LGam5zRHCa0/UBapcIJ3h3I/AAAAAAAACbE/HWklbkRYxLg/s320/digg.png" class="MBC" alternate="Digg"></a>
                                            <a href="http://www.stumbleupon.com/&amp;title=mbc"><img src="http://1.bp.blogspot.com/-FU3xWEuTkiM/UBaorQ4bZYI/AAAAAAAACZ8/4XMi3Jf2Yjo/s320/stumbleupon.png" class="MBC" alternate="Stumble Upon"></a>
                                            <a href="http://www.linkedin.com/&amp;title=mbc"><img src="http://4.bp.blogspot.com/-9skJwfHx9xo/UBaor06wmEI/AAAAAAAACaU/anvm0OWoWvI/s320/linkedin.png" class="MBC" alternate="LinkedIn"></a>
                                            <a href="http://www.facebook.com/"><img src="http://2.bp.blogspot.com/-pxaCRQpCn4o/UBaosM3V0mI/AAAAAAAACag/Eg8xY3qK-Pk/s320/facebook.png" class="MBC" alternate="Facebook"></a>
                                            <a href="http://twitter.com/"><img src="http://1.bp.blogspot.com/-o9VqjFGQmtA/UBaorbKzKMI/AAAAAAAACZw/IqoALWerqjw/s320/twitter.png" class="MBC" alternate="Twitter"></a>
                                            <a href="http://del.icio.us/post?url=&amp;title=mbc"><img src="http://4.bp.blogspot.com/-6pQljbf37_I/UBapbWCWN2I/AAAAAAAACa4/hvk-wDqumy4/s320/delicious.png" class="MBC" alternate="Delicious"> </a>
                                            <a href="http://www.feedburner.com/&amp;loc=$loc"><img src="http://3.bp.blogspot.com/-bP0wt8inaIQ/UBapbeXts2I/AAAAAAAACas/Lz1XGRPb3Ik/s320/email.png" class="MBC" alternate="Email This"></a>           
                                    </div>       
            </div>

Change all blue color links with your links.

Now save your template.

Visit your blog and enjoy with new social bar widget.