The Arcive of vBulletin Modifications Site.

floating box Social button for your forum · **Released**: 09-28-2011

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

Code:

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>

Code:

<!-- 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

Code:

<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

Code:

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

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

ngocol · #2 09-30-2011, 12:15 PM

sory small change on the facebook button

Use this

Code:

<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 · #3 10-01-2011, 03:53 PM

screenshot would be nice.

ngocol · #4 10-01-2011, 08:23 PM

here the screen shot

on forum home
Attachment 133369

on forum display
Attachment 133370

on forum threat
Attachment 133371

Antonio Pereira · #5 07-02-2012, 12:31 PM

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