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

[Emeralda]

Not sure if it helps, but this mod has proper codes that I dunno how to take: https://vborg.vbsupport.ru/showthread.php?t=266159, but I much prefer how yours might look to be honest.

[Kraxell]

In ur linked mod is the count-button too

[Emeralda]

It can be switched to different variations, I'm currently using these: http://prntscr.com/7sfjk

[Kraxell]

Please provide me a link, i'll take a look.

[Emeralda]

Not sure which link you want. If where I have it set up, than here: http://cafeotaku.net/forum
If you mean a link to the mod, than it's above.

[Kraxell]

I'll publish a new mod today with better design.

[Emeralda]

Rawr, sorry for troubling you with that like that. It's just that I don't think showing the (0) counts would look well on smaller forums >.<