Back to vBulletin 4.x Add-ons

floating box Social button for your forum
Mod Version: 1.00, by ngocol

vB Version: 4.1.4 Rating: (1 vote - 5.00 average) Installs: 10
Released: 29 Sep 2011 Last Update: Never Downloads: 0
Not Supported Template Edits  

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
index.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 http://ngocol.us

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

Download

No files for download.

Similar Mods

Miscellaneous Hacks BF-Floating Message Box vBulletin 4.x Add-ons
Miscellaneous Hacks Floating notice box in forumhome. vBulletin 3.8 Add-ons
Mini Mods Add PyPoo Social Bookmarking button to your forum vBulletin 3.7 Template Modifications

vblts.ru supports vBulletin®, 2022-2024