Code tạo lượt xem chạy bên trái xenforo

[PVS]

Bài này mình sẽ hướng dẫn tạo lượt xem chạy bên trái xenforo giống fullcode (vbb) đang dùng. Vì thấy, tính năng này khá thú vị và đẹp nên mình viết bài mong là sẽ có ích cho mọi người khi thiết kế giao diện cho xenforo.

Bước làm cũng thật đơn giản các bạn làm theo cách sau:
Vào ACP => vào template thread_view tìm:

<xen:if is="{$canReply}">

Và thêm vào bên trên đoạn code:

<xen:include template="luotxembai"></xen:include>

Tiếp theo, bạn vào Appearance => Templates đang dùng, chọn Create New Template để tạo 2 template mới là luotxembai và luotxembai.css với nội dung như sau:

Luotxembai

<xen:require css="luotxembai.css" />
  <menu class="shareBar side-sharebar" id="shareBar">

  <div class="item">
       <xen:if is="{$post.position} == 0"> <p class="recentCount"><b>{xen:number $thread.view_count}</b><br><span class="luotxem">lượt xem</span></p></xen:if>
  </div>

  <div class="item">
      <div class="fb-like" data-href="http://vnxf.vn/{xen:link threads, $thread}" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"> </div>
  </div>
    <div class="item">
      <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        <g:plusone size="tall"></g:plusone>
  </div>
</menu>

* Sửa lại vnxf.vn thành tên miền cho website của bạn

Luotxembai.css

.side-sharebar {
left: 10px;
top: 127px;
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 .recentCount {
display: block;
text-align: center;
width: 58px;
height: 40px;
padding: 2px 0 0 0!important;
background-color: #b7b7b8;
color: #39434c;
border: 1px solid #A7A7A8;
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 .luotxem {
font-size: 12px;
}
.side-sharebar .recentCount {
font-size: 14px;
}
#shareBar p.recentCount {
font-weight: bold;
font-size: 15px;
}

Demo:

Chúc bạn thành công!

Nguồn: muaban47.net​