Miscellaneous Hacks - Sharebar - Sidebarslider

Hello,

i create a little modification for my site and want to share it with you.

With this modification you can make a sharebar-slider for your forum.

Please look screenshots for more details or visit http://abload.net for a live demo.


1. Open template "additional.css"
2. Past following code at the end

#followTab {
background: #fff;
width: 52px;
list-style: none;
position: fixed;
z-index: 5;
right: 0;
top: 180px;
padding: 8px 5px;
border-right: none;
border-radius: 5px 0 0 5px;
}
#followTab li {
margin:9px 0 0 0;
line-height:0
}
#followTab li:first-child {
margin-top:0
}
#followTab a {
display:block;
width:24px;
}
#followTab a span {
position:absolute;
top:-999em
}

3. Open template "footer"
4. Past following at the begin

<ul id="followTab">
<li>
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=150946958326648&amp;xfbml=1"></script><fb:like href="" send="false" layout="box_count" width="30" show_faces="false" font="tahoma"></fb:like>
</li>
<li><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>
<li><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></li>
<li><script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})(); 

</script><a class="DiggThisButton DiggMedium" rev="technology"></a></li>
<li><g:plusone size="tall"></g:plusone><script type="text/javascript">
  (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script></li>
</ul>

You must edit your facebook-App-ID in this Code! (Where get a App-ID from Facebook? Look at my other modifications.)

5. Finish!



Changes for your own:

- To adjust the height from the top of the page, change the top: 180px; line in #followtab (additional.css) to the value you need in pixels.

-In the default configuration it is aligned to the right, if you want it aligned to the left, change the #followtab class to this:

#followTab {
background: white;
width: 52px;
list-style: none;
position: fixed;
z-index: 5;
left: 0;
top: 180px;
padding: 8px 5px;
border-right: none;
border-radius: 0 5px 5px 0;
}

- to change the background-color, change in #followtab background: #fff
Here you can find many colors:
http://www.colorpicker.com/
http://tomheller.de/theholycymbal/html-farben.html

-If you want to add more buttons to the sidebar, simply find <ul id="followTab"> and add the additional button's HTML code in <li></li> tags. You can rearrange the order as well.

Note:
- click install
- dont forget to rate and nominate it

[Kraxell]

Your welcome

[Kraxell]

I 'll publish some backgrounds for this today.

[abdobasha2004]

it is all about this CSS code

position: fixed;

thanks for detailed explanation

[Kraxell]

it is all about this CSS code

Dont know what you mean

[Emeralda]

1. What code should I use to have it attached on the edge of the doc?: http://prntscr.com/7l7bg
2. How would I go on about showing the buttons without the count? http://prntscr.com/7l7d1

[Kraxell]

Hello,

1. Dont know exactly what you mean. Please try to explain more
2. I'll take a look and if its possible, i 'll make an update.

[Emeralda]

ad1. http://abload.net/images-i425bmul2d.jpg

[Kraxell]

Ah ok. I'll take a look.

[Hakan39]

Thank you.

[Kraxell]

For Twitter-Button without count:

<a href="https://twitter.com/YOUTTWITTERACCOUNT" class="twitter-follow-button" data-show-count="false" data-lang="de" data-size="large" data-show-screen-name="false">@YOUTTWITTERACCOUNT follow</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

For Facebook its only with little tricks possible.

Please take a look at this site:
http://stackoverflow.com/questions/2...ton-hide-count