Kraxell
03-19-2012, 11:00 PM
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&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 :)
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&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 :)