[Code] Thanh ShareBar convert từ VBB !

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



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/&amp;send=false&amp;layout=box_count&amp;width=52&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=90&amp;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>


Code:

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