1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. Please donate today & help us with our growing server costs or buy premium for access to our premium products
    Dismiss Notice

Free Social buttons in navbar

Discussion in 'Xenforo Template Mods & Extras' started by HAWK, Mar 21, 2016.

  1. HAWK

    HAWK Administrator Staff Member ADMIN

    Likes Received:
    593
    Trophy Points:
    113
    Gender:
    Male
    FaceBook, Twitter, MySpace, StumbleUpon, reddit, delicious and Addthis connect. The more interesting of all is Addthis now that allows you to send 416 sites, including the previous.

    The code is the next:
    Code:
    <li class="navTab PopupClosed facebooktab"><a class="navLink" target="_blank" href="http://www.facebook.com/apps/application.php?id=TU_ID_DE_APLICACIÓN"><img src="@imagePath/xenforo/social/facebook.png" width="16" height="16" alt="Compartir a Facebook" /></a><script src="http://connect.facebook.net/es_ES/all.js#xfbml=1"></script><fb:like href="http://www.facebook.com/apps/application.php?id=TU_ID_DE_APLICACIÓN&amp;v=wall" layout="button_count"></fb:like></li>
    <li class="navTab PopupClosed twitterktab"><a class="navLink" target="_blank" href="http://twitter.com/#!/soylms/xenfacil"><img src="@imagePath/xenforo/social/twitter.png" width="16" height="16" alt="Compartir a Twitter" /></a></li>
    <li class="navTab PopupClosed myspacektab"><a class="navLink" target="_blank" href="http://www.myspace.com/TU_ID_DE_USUARIO"><img src="@imagePath/xenforo/social/myspace.png" width="16" height="16" alt="Compartir a MySpace" /></a></li>
    <li class="navTab PopupClosed stumbleuponktab"><a class="navLink" target="_blank" href="http://www.stumbleupon.com/"><img src="@imagePath/xenforo/social/stumbleupon.png" width="16" height="16" alt="Compartir a Stumble It" /></a></li>
    <li class="navTab PopupClosed redditktab"><a class="navLink" target="_blank" href="http://reddit.com/submit" onclick="window.location = 'http://reddit.com/submit?url=' + encodeURIComponent(window.location); return false"><img src="@imagePath/xenforo/social/reddit.png" width="16" height="16" alt="Compartir a Reddit" border="0" /></a></li>
    <li class="navTab PopupClosed deliciousktab"><a class="navLink" target="_blank" href="http://www.delicious.com/save" onclick="window.open('http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;"><img src="@imagePath/xenforo/social/delicious.png" width="16" height="16" alt="Compartir en Delicious" /></a></li>
    <!-- AddThis Button BEGIN -->
    <li class="navTab PopupClosed morektab"><a class="navLink" target="_blank" href="http://www.addthis.com/bookmark.php?v=250&amp;username=TU_USERNAME"><img src="@imagePath/xenforo/social/addthis_64.png" width="16" height="16" alt="Más..." /></a></li>
    <script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=TU_USERNAME"></script>
    <!-- AddThis Button END -->
    
            <!-- no selection -->
    In the navigation template, just above
    Code:
            <!-- no selection -->
    And the navigation.css Template, at the end of the whole, add:
    Code:
    
    .facebooktab a {
        background: transparent url(@imagePath/xenforo/social/facebook_icon.png) center center no-repeat;
         text-indent: -9999px;
    }
    
    .twitterktab a {
         background: transparent url(@imagePath/xenforo/social/twitter_icon.png) center center no-repeat;
         text-indent: -9999px;
    }
    
    .myspacektab a {
        background: transparent url(@imagePath/xenforo/social/myspace_icon.png) center center no-repeat;
         text-indent: -9999px;
    }
    
    .stumbleuponktab a {
         background: transparent url(@imagePath/xenforo/social/stumbleupon_icon.png) center center no-repeat;
         text-indent: -9999px;
    }
    .redditktab a {
        background: transparent url(@imagePath/xenforo/social/reddit_icon.png) center center no-repeat;
         text-indent: -9999px;
    }
    
    .deliciousktab a {
         background: transparent url(@imagePath/xenforo/social/delicious_icon.png) center center no-repeat;
         text-indent: -9999px;
    }
    .morektab a {
         background: transparent url(@imagePath/xenforo/social/addthis_64_icon.png) center center no-repeat;
         text-indent: -9999px;
    }
    
    I create a directory in path root/styles/default/xenforo that name social (path sería root/styles/default/xenforo/social). upload attatches zip images to this directory.
     

Share This Page