Hướng dẫn Portal dạng slider giống Keeng.vn cho Xenforo

[CNTT01]

Đầu tiên vào template EWRblock_RecentNews thay hết bằng code sau

  <div class="box-album">

              <div class="album-wrap">
                <div class="box-flash">
                  <div id="play_list">
           <xen:foreach loop="$RecentNews" value="$news" i="$i">
                <xen:if is="{$i}>=1 && {$i} <=8">
                        <div class="item item{$i}" style="background: url(<xen:if is="{$news.promote_icon} != 'disabled'"><xen:if hascontent="true"><xen:contentcheck><xen:if is="{$news.attach}">{$news.attach.thumbnailUrl}<xen:elseif is="{$news.image}" />{$news.image}<xen:else />http://democracylive.com/wp-content/uploads/2013/11/news.jpg</xen:if></xen:contentcheck></xen:if></xen:if>) center center no-repeat">
                         <a title="{$news.title}" href="{xen:link threads, $news}">
                         <div class="black_mask"></div>
                          <div class="label">
                            <span class="toplabel black1"></span>
                            <span class="toplabel">
                              <span class="song">{xen:helper snippet, $news.title, 20}</span>
                            </span>
                            <span class="leftbottom black2"></span>
                             <span class="leftbottom">
                               <span class="author">
                               <b>{$news.username}</b>
                               </span>
                             </span>
                           </div>
                            </a>
                           </div>
                   </xen:if>
               </xen:foreach>
                    </div>
      </div>
    </div>
  </div>

Sau đó vào template EWRblock_RecentNews.css thay hết bằng code sau

/*box-album*/
.box-album {float: left;width: 100%;margin-bottom:15px;}
.h3-header-more {float: left;font-size: 18px !important;width: 100%;padding-top:3px;font-weight:normal;}
.h3-header-more a.lnk-header-more {cursor: pointer;}
.h3-header-more a.lnk-header-more span.sp-more {color: #797979;font-size: 12px;font-weight: normal;margin-left: 5px;position: relative;top: -2px;}
.h3-header-more a.lnk-header-more:hover span.sp-more{color:#90BE04;}
.album-wrap {float: left;overflow: hidden;width: 750px;margin-top:10px;}
.album-wrap .album-item{float: left;margin-bottom: 15px;margin-right: 20px;overflow: hidden;position: relative;width: 160px;}
.album-wrap .album-item a.album-lnk-img{float: left;height: 160px;width: 160px;}
.album-wrap .album-item a.album-lnk-img img{float: left;height: 160px;width: 160px;}
.album-wrap .album-item .album-info{ float:left;padding: 5px 0px 0;width: 160px;}
.album-wrap .album-item .playlist-edit{float: left;height: 160px;width: 160px;position:relative;}
.album-wrap .album-item .playlist-edit a.lnk-playlist-edit {background: url("../images/keeng_36.png") no-repeat scroll left top transparent;cursor: pointer;height: 30px;right: 31px;position: absolute;top: 0;width: 30px;display:none;}
.album-wrap .album-item .playlist-edit a.lnk-playlist-delete {background: url("../images/keeng_35.png") no-repeat scroll left top transparent;    cursor: pointer;height: 30px;right: 0px;position: absolute;top: 0;width: 30px;display:none;}
.album-wrap .album-item .playlist-edit:hover a.lnk-playlist-edit{display:block;}
.album-wrap .album-item .playlist-edit:hover a.lnk-playlist-delete{display:block;}
.playlist-persion .album-wrap{margin-top:0px;}
.album-wrap .album-item .album-info h3{overflow:hidden;width:100%;}
.album-wrap .album-item .album-info a.name-album {color: #393939;font-size:15px;font-weight:normal}
.album-wrap .album-item .album-info a.name-album:hover {color:#90BE04;}
.album-wrap .album-item .album-info a.name-singer {color: #727272;font-weight: normal;}
.album-wrap .album-item .album-info a.name-singer:hover{text-decoration:underline}
.box-album .h3-header-more a.lnk-header-more{float:left;line-height:25px;font-weight:normal;font-size:18px;}
.app-keeng {color: #676767;float: right;font-size: 14px;font-weight: bold;line-height: 25px;text-align: right;width: 500px;}
.app-keeng p {display: inline;}
.app-keeng a {color: #676767;height: 25px;line-height: 25px;margin-left: 15px;width: 60px;cursor:pointer}
.app-keeng a:hover{color:#90BE04;}
.keeng-singer{}
.keeng-singer .album-wrap{}
.keeng-singer .album-wrap .album-item{height:auto;}

Tiếp theo bạn download file js.zip ( đính kèm ) về rồi giải nén ra, upload folder js lên host.

Vậy là xong!