Xin chào các bạn ạ. Hiện tại em muốn chỉnh sửa cách hiển thị những tin mới hơn, và những tin cũ hơn hiển thị theo dạng hình ảnh như thế này ạ.

Chúng ta cùng bắt đầu xem sao nhé? Mình hướng dẫn các bạn chia thành 2 cột luôn cho đẹp con mắt..

B1 mở file: detail.tpl

tìm đến đoạn code:

<!-- BEGIN: related_new -->
......nội dung cũ......
............................
<!-- END: related_new -->

thay toàn bộ code trong nội dung cũ bằng toàn bộ code sau:

<div class="col-md-12">
    	<p class="h3"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>&nbsp;&nbsp;<strong>{LANG.related_new}</strong>&nbsp;<span class="icon_new">&nbsp;</span></p>    
        <div class="clearfix">
            <ul class="related">
        		<!-- BEGIN: loop -->             
        		<li class="clearfix">        			
                    <a href="{RELATED_NEW.link}" <!-- BEGIN: tooltip -->data-content="{RELATED_NEW.hometext}" data-img="{RELATED_NEW.imghome}" data-rel="tooltip" data-placement="{TOOLTIP_POSITION}"<!-- END: tooltip --> title="{RELATED_NEW.title}"><img src="{RELATED_NEW.imghome}" alt="{RELATED_NEW.title}" width="65" class="img-thumbnail pull-left " />{RELATED_NEW.title}</a>        			
                    <em>({RELATED_NEW.time})</em>
        		</li>
        		<!-- END: loop -->
        	</ul>
            </div>
        </div>

B2 tìm đến đoạn code:

<!-- BEGIN: related -->
.....Nội dung cũ.....
<!-- END: related -->

Thay toàn bộ code trong nội dung cũ bằng code sau:

<div class="col-md-12">
    	<p class="h3"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i>&nbsp;&nbsp;<strong>{LANG.related}</strong></p>      
        <div class="clearfix">   
            <ul class="related">
        		<!-- BEGIN: loop -->
        		<li class="clearfix">
                    <a href="{RELATED.link}" <!-- BEGIN: tooltip -->data-content="{RELATED.hometext}" data-img="{RELATED.imghome}" data-rel="tooltip" data-placement="{TOOLTIP_POSITION}"<!-- END: tooltip --> title="{RELATED.title}"><img src="{RELATED.imghome}" alt="{RELATED.title}" width="65" class="img-thumbnail pull-left " />{RELATED.title}</a>
        			<em>({RELATED.time})</em>
        			<!-- BEGIN: newday -->
        			<span class="icon_new">&nbsp;</span>
        			<!-- END: newday -->
        		</li>
        		<!-- END: loop -->
        	</ul>
        </div>
        </div>