floating box Social button for your forum

[ngocol]

1. make your forum center so we have space on the left/ right side for the floating box


open stylevar

find doc_margin

setting

Unit = px

Use the 'top' value for all sides : No

right and left : 125


or you can read this link to make your forum center

https://vborg.vbsupport.ru/showthread.php?t=231114




2 Open Headiclude and Add this before </head>



<!-- Floating start -->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type="text/javascript">
$(function() {
var offset = $("#box").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#box").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#box").stop().animate({
marginTop: 0
});
};
});
});
</script>
<!-- Floating end -->




3 add Floating sosial button

<div id="box">
<div><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script> </div>
<div><script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script></div>
<div><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class="fb-like" data-href="{vb:raw $vboptions.vbforum_url}" data-send="false" data-layout="box_count" data-show-faces="false"></div>


<div><div class="g-plusone" data-size="tall" data-count="true"></div>

<!-- Place this render call where appropriate -->
<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></div>

</div>



4. add CSS

Open additional css and add


#box{position: absolute;left: 55px; top: 117px;border: 1px dotted; border-right: 10px;padding: 10px; background-color: #FFF;}
#box div{margin: 10px 0;}



demo here Ngocol publik komplain forum (http://ngocol.us)

sorry but please dont ask me cause i dont know about coding thank :)

[ngocol]

sory small change on the facebook button

Use this
<div class="fb-like" data-href="{vb:raw $vboptions.vbforum_url}" data-send="false" data-layout="box_count" data-show-faces="false"></div>

thanks

[LifesGreatestGift]

screenshot would be nice.

[ngocol]

here the screen shot

on forum home
133369

on forum display
133370

on forum threat
133371

[Antonio Pereira]

Any mod do this? I like so much this float social.