Một chủ đề trong topic của forum mà hiển thị theo dạng tin tức thì quả là điều chưa từng thấy vì forum là forum chứ không phải blogspot hay wordpress. Ấy vậy mà nhiều người vẫn nghĩ ra được những cái táo bao như thế và lai làm được điều đó.

Hôm nay ad tui sẽ lấy về và chia sẽ cho mọi người dùng thử chơi.

Cách làm:

Vào trang chủ quản lý --> Display --> Quản Lý Tổng Thể (trong mục Templates) --> Viewtopic_body

Thay toàn bộ code trong Viewtopic_body bằng đoạn code dưới đây.

Code:

 <!-- BEGIN switch_user_logged_out -->
<style>
.post--0  {display:none;}
</style>
<!-- END switch_user_logged_out -->

<style>
 

.news-item {
    background: #fff;
    width: 50%;
    float: left;
    margin-bottom: 20px;
}
 .news-item h2 {
    padding-top: 3px;
    padding-right: 5px;
    line-height: 1.5;
    max-height: 70px;
    overflow: hidden;
  }
 
 
.news-item h2 a {
      font-size: 16px;
  }
 

  .crop a img {
    width: 120px!important;
    height: 80px!important;
    object-fit: cover;
    float: left;
    margin-right: 15px;
    border: 1px solid #e6e6e6;
  margin-left: 15px;
  }
 .news-item .post {
    border-bottom: 1px solid #ededed!important;
    border-top: 0px solid #ededed!important;
    padding-top: 10px!important;
    padding-bottom: 10px!important;
      height: 46px;
    overflow: hidden;
}
 
.line_header{
     border-top: 1px solid #e5e5e5;
        margin: 10px 15px 20px;
  }
  .line_cuoibai{
     border-top: 1px solid #e5e5e5;
    margin: 20px 0;
  }
 
  .editbai {   
    font-style: italic;
    font-size: 12px;
    color: #666;
  }
  .editbai img{   
    display:none;
  }
 
  .editbai a {   
  padding:0px!important;
  float:right;
  }
 
 
  .editbai a:before {   
    content: "\Sửa bài";
    font-size: 12px;
    color: #666;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid grey;
    box-shadow: 1px 3px #888888;
  }
 

.dungbolo {
    color: #666;
    font-size: 18px;
    font-family: 'Roboto Condensed',sans-serif;
    text-transform: uppercase;
    padding-bottom: 5px;
      margin-top: 24px;
  margin-bottom: 20px;
      border-bottom: 1px solid;
  }
 
.binhluancat {
    background: #f3f3f3;
    padding: 8px;
    border-left: 5px solid #4c69ba;
    color: #4c69ba;
    font-size: 16px;
  }

  .postbody img {max-width:650px;}
 
/* Viewtopic */
 
 
  .pun .post-entry {
    padding: 0em;
}
 
  .pun .topic {
border: 0px solid #DDD;
padding:0px;
}
 
.pun .post {
border: 0px solid #e4e4e4;
    margin-bottom: 5px;
      border-radius: 3px;
  background: #fff;
}

  .tiletopic{
      padding: 20px 12px 5px;

  }
  .tiletopic a {
 
    line-height: 1.5;
    color: #d1090b!important;
  }


#tcm {font-size: 0px;}
#tcm span {font-size: 13px;!important}
 
 
  .infotopic {
    font-size: 13px;
    color: #777;
    padding: 6px 2px 2px 20px;

  }
   
  .infotopic a {
  font-size: 13px!important;
  color:#777!important;
  }
 
   
  .infotopic a span {
  font-size: 13px!important;
  color:#777!important;
  }
 
  .infotopic a span strong {
  font-weight: 500!important;
  }
 
  .post{border:none; box-shadow: none; margin-bottom: 0;}
  .box-body{
     border: 1px solid rgba(0,0,0,0.1);
     -moz-box-shadow: 1px 2px 3px rgba(0,0,0,0.03);
       -webkit-box-shadow: 1px 2px 3px rgba(0,0,0,0.03);
       box-shadow: 1px 2px 3px rgba(0,0,0,0.03);
  }
</style>

<script type="text/javascript">//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
$(function(){

    if(typeof(_atc) == "undefined") {
        _atc = { };
    }

    _atc.cwait = 0;
    $('.addthis_button').mouseup(function(){
        if ($('#at15s').css('display') == 'block') {
            addthis_close();
        }
    });
});

var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }
       
        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
 {
 if( $(this).is(":visible") )
 {
 $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
 }
 else
 {
 $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
 }
 });
        }
    }
    catch(e) { }
   
 return false;
};

//]]>
</script>

 {POLL_DISPLAY}



<div class="box-body">
  <!-- BEGIN postrow -->
  <h1 class="tiletopic">
    <a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
  </h1>
 <!-- BEGIN displayed -->
<div class="infotopic">
     <span class="sub-header-path">
         <a class="nav" href="{U_INDEX}"><i class="fa fa-tags"></i> <span>{L_INDEX}</span></a>
         {NAV_CAT_DESC}
     </span>
  <div style="clear:both;"></div>
  <i class="fa fa-user"></i> {postrow.displayed.POSTER_NAME}  <i class="fa fa-calendar"></i> <span class="datepost">{postrow.displayed.POST_DATE_NEW}</span>
</div>
<div class="line_header"></div>         
<div class="post post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">
<div class="post-entry">
 
<div class="entry-content postbody">
 
{postrow.displayed.MESSAGE}
  <div class="clear"></div>
  <div class="line_cuoibai"></div>
  <div class="clear"></div>
  <div class="editbai">{postrow.displayed.EDIT_IMG}</div>
 
<span style="margin-top: 30px;margin-bottom:10px">
    <span class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></span>
  </span>
</div>
 
</div>
</div>
 
<div style="clear:both;"></div>

 
 
 <!-- END displayed -->
 <!-- END postrow -->
                         
</div>

      <div class="clear"></div>

<div class="dungbolo" style="float:left;">Bài Cùng Chuyên Mục</div>
<div class="clear"></div>
<div class="show_topic">
 <div id="topic">

 </div>
 
</div>
                        <div class="clear"></div>


<div class="binhluancat">Bình Luận</div>
<div style="background-color:#fff;padding:0px;">
 
<div class="fb-comments" data-href="{FORUM_URL}{TOPIC_URL}" data-width="910px" data-numposts="15"></div>

</div>

 <div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.8";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>



<!-- BEGIN viewtopic_bottom -->
<p class="right">
            {S_TOPIC_ADMIN}
</p>
            <!-- END viewtopic_bottom -->



<script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>

<script>
    $(function () {
        $.ajax({
            url: "/feed/?f={FORUM_ID}",
            success: function (ta) {
                for (var i = 2; i < 8; i++) {
                    var DL = $(ta).find("link:eq(" + i + ")").text();
                    var title = $(ta).find("title:eq(" + i + ")").text();
$('<div class="news-item"><div class="postfeed"><div class="crop"><a href="' + DL + '" rel="bookmark"></a><h2></h2><div style="clear: both;"></div>
</div></div></div></div>').appendTo('div.show_topic #topic');             
                   
                    $('<a href="' + DL + '">' + title + '</a>').appendTo('.news-item:eq(' + (i - 2) + ') .postfeed h2');
                    $('<img src="http://1.bp.blogspot.com/-_rVBDk7MBgs/UeW2vn3fwWI/AAAAAAAAGzI/ONP2vpF-MdE/s1600/Untitled-1.png' + $(".news-item:eq(" + (i - 2) + ") .crop a:eq(0)").load(DL + ".postblog .postbody img:eq(0)") + '"  src="test" />').appendTo('.news-item:eq(' + (i - 2) + ') .crop a:eq(0)');
                }
            }
        })
    })
</script>
 
  

Đơn giản vậy thôi, hãy làm theo cách của bạn và tận hưởng những gì bạn làm được.