HackToHell. Powered by Blogger.

Get a floating Share Bar in blogger using AddThis!

Want a floating share bar that does not use tweetmeme.com and is light on javascript .. and highly configurable ?

This one is for you !



Notice my shiny share bar ? You can get it too !

Go here and implement it on blogger : http://www.addthis.com/gallery/fixed-position#.TgilJ2H0dNm

Customisations:

To float it on the left :

.addthis_toolbox.atfixed {
position: fixed;
top: 10%;
left: 20px;
border: 1px solid #eee;
padding: 5px 5px 1px;

-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
left: 100%;
margin-left: -45px;
position: fixed;
top: 25%;
width: 50px;
}
.addthis_toolbox .custom_images a {
width: 32px;
height: 32px;
margin: 0;
padding: 0;
cursor: pointer;
}
.addthis_toolbox .custom_images a img { border: 0; margin: 0 0 1px; opacity: 1.0; }
.addthis_toolbox .custom_images a:hover img { margin: 1px 0 0; opacity: 0.75; }
This floats it to the left ..
Better share buttons ..

<div class="addthis_toolbox atfixed">
<div class="custom_images">

<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='http://2.bp.blogspot.com/-TUTjx0Yc0FY/TXSLKPiLRbI/AAAAAAAAA3U/nI4HkE091Lk/s1600/twitter.png' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='http://4.bp.blogspot.com/-UWnmf5jmYYo/TXSJ0fF4OUI/AAAAAAAAA2k/1dfI5Vp6XkE/s1600/delicious.png' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='http://1.bp.blogspot.com/-GpYwvZxzuzU/TXSJ0qKwUlI/AAAAAAAAA20/UiLh_RsGsqY/s1600/facebook.png' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='http://1.bp.blogspot.com/-JVB0CPHCL1E/TXSJ0ceJsgI/AAAAAAAAA2s/kpyRlPsGJek/s1600/digg.png' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='http://3.bp.blogspot.com/-7-xCrO8HzH8/TXSLJ2054hI/AAAAAAAAA3M/lV4L-SpptZ0/s1600/stumbleupon.png' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='http://3.bp.blogspot.com/-le322tlJxbk/TXSJ0tmqaiI/AAAAAAAAA28/qDly1cnZiIk/s1600/favorites.png' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='http://1.bp.blogspot.com/-DqjDPRVJc5g/TXSJ04YfobI/AAAAAAAAA3E/7HVFTgWb1dE/s1600/more.png' width='32'/></a>
</div>
</div>
Instead of the HTML given at add this paste this and have Twitter, Delicious , Facebook , StumbleUpon !
Share on Google Plus

About hacktohell

Love technology.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment