Rảnh nên ngồi convert cái mod sharebar như facebook, google cho anh em
Mod này mình convert từ vBulletin 4.0.2, dành cho Forumotion

P/s:Đây
cũng chỉ là một mod cũng khá đơn giản, là mod convert đầu tay của Bee
nên mong các pro đi trước thấy có gì lượt bớt được thì edit giùm

Demo

[You must be registered and logged in to see this link.]

HD: - Past code dứơi đây vào cuối header
*Trong đoạn code dưới, các bạn tự thay link diễn đàn hay website mình vào chỗ link facebook nhé và thay app IP lun

Code:


    <style>
    .side-sharebar {
        top: 175px;
        left: 50%;
        background-color: #EEE;
        border: 1px solid #CCC;
        border-right: none;
        position: fixed;
        -webkit-box-shadow: -6px 0 6px -6px rgba(0,0,0,0.25) inset,0 1px 0 #fff inset;
        -moz-box-shadow: -6px 0 6px -6px rgba(0,0,0,0.25) inset,0 1px 0 #fff inset;
        box-shadow: -6px 0 6px -6px rgba(0,0,0,0.25) inset,0 1px 0 #fff inset;
        -webkit-border-radius: 3px 0 0 3px;
        -moz-border-radius: 3px 0 0 3px;
        border-radius: 3px 0 0 3px;
      padding:0px;
    }


    .side-sharebar .item {
        border-bottom: 1px solid #CCC;
        -webkit-box-shadow: 0 1px 0 #fff;
        -moz-box-shadow: 0 1px 0 #fff;
        box-shadow: 0 1px 0 #fff;
        padding: 10px 2px 10px 0;
        text-align: center;
      width: 76px;
    }


    .side-sharebar .item:last-child{
        border:none;
        -webkit-box-shadow:none;
        -moz-box-shadow:none;
        box-shadow:none;
        font-size:.8em;
        line-height:1.133em;
    }




    .side-sharebar .recentCount{
        display:block;
        text-align:center;
        width:58px;
        height:40px;
        padding:2px 0 0 0!important;
        background-color:#b7b7b8;
        background:none,-khtml-gradient(linear,left top,left bottom,from(#d7d8d9),to(#aaaaab));
        background:none,-moz-linear-gradient(top,#d7d8d9 0,#aaaaab 100%);
        background:none,-webkit-gradient(linear,left top,left bottom,color-stop(0,#d7d8d9),color-stop(100%,#aaaaab));
        background:none,-webkit-linear-gradient(top,#d7d8d9 0,#aaaaab 100%);
        background:none,-o-linear-gradient(top,#d7d8d9 0,#aaaaab 100%);
        background:none,-ms-linear-gradient(top,#d7d8d9 0,#aaaaab 100%);
        background:none,linear-gradient(top,#d7d8d9 0,#aaaaab 100%);
        color:#39434c;
        border:1px solid #A7A7A8;
        -webkit-box-shadow:0 1px 0 #8b8b90,0 1px 0 0 rgba(255,255,255,0.4) inset;
        -moz-box-shadow:0 1px 0 #8b8b90,0 1px 0 0 rgba(255,255,255,0.4) inset;
        box-shadow:0 1px 0 #8b8b90,0 1px 0 0 rgba(255,255,255,0.4) inset;
        -moz-text-shadow:0 1px 0 rgba(255,255,255,0.65);
        -webkit-text-shadow:0 1px 0 rgba(255,255,255,0.65);
        -khtml-text-shadow:0 1px 0 rgba(255,255,255,0.65);
        text-shadow:0 1px 0 rgba(255,255,255,0.65);
        -webkit-border-radius:3px;
        -moz-border-radius:3px;
        border-radius:3px;
        font-size:10px;
        font-weight:bold;
        -webkit-box-shadow:0 2px 0 #8b8b90;
        -moz-box-shadow:0 2px 0 #8b8b90;
        box-shadow:0 2px 0 #8b8b90;
        position:relative;
        margin:0 auto;
      text-decoration: none;
    }

    .side-sharebar .recentCount .countNumber{
        font-size:1.8em;
    }

    .side-sharebar .recentCount:after{
        width:0;
        height:0;
        border-top:5px solid #aaaaab;
        border-bottom:5px solid transparent;
        border-right:5px solid #aaaaab;
        display:block;
        position:relative;
        bottom:-7px;
        position:absolute;
        right:10px;
    }

    .side-sharebar .recentCount:before{
        width:0;
        height:0;
        border-top:5px solid #8b8b90;
        border-bottom:5px solid transparent;
        border-right:5px solid #8b8b90;
        display:block;
        position:relative;
        bottom:-8px;
        position:absolute;
        right:10px;
    }


    #shareBar p.recentCount{
        font-weight:bold;
    }
    </style>

    <menu class="shareBar side-sharebar" id="shareBar" style="margin-left:-579px;">

      <div class="item">
        <iframe src="//www.facebook.com/plugins/like.php?href=http://it4t.info/&send=false&layout=box_count&width=52&show_faces=false&action=like&colorscheme=light&font=arial&height=90&appId=297934043613585" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:52px; height:62px;" allowTransparency="true"></iframe>
      </div>
      <div class="item">
    <g:plusone size="tall"></g:plusone>
    <script type="text/javascript">
      window.___gcfg = {lang: 'vi'};

      (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>
    </menu>


*Lưu ý:
- Muốn chỉnh lại qua phải hay qua trái thì chỉnh ở đoạn code này (ở chỗ số -579px)

Code:

    <menu class="shareBar side-sharebar" id="shareBar" style="margin-left:-579px;">