Hướng dẫn bổ sung tính năng tin nổi bật vào giao diện module news nukeviet

Nếu như website của bạn đang sử dụng là NukeViet thì chắc hẳn bạn sẽ hỏi tại sao website của bạn không có tính năng nổi bật ở module news. Tuy nhiên điều này không có khó khăn gì và sau đây Thịnh sẽ hướng dẫn các bạn thêm tính năng tin nổi bật vào module news dành cho phần hiển thị danh sách tin và theo dạng lưới sẽ có thêm tính năng bài nổi bật sẽ lên trên cùng thay vì ở các page khác để người đọc có thể chú tâm đọc bài viết của bạn.

Sau đây là hướng dẫn dành cho bạn

Lưu ý: my_themes là tên theme mà bạn đang sử dụng

Đầu tiên bạn cần mở file themes/my_themes/modules/news/viewcat_grid.tpl

Bạn tìm đoạn <!– END: viewdescription –> và đoạn code này <!– BEGIN: viewcatloop –>

Thêm vào giữa nó đoạn sau

<!-- BEGIN: featuredloop -->
<div class="news_column">
<div class="panel panel-default">
<div class="panel-body featured">
<!-- BEGIN: image -->
<a href="{CONTENT.link}" title="{CONTENT.title}"><img alt="{HOMEIMGALT1}" src="{HOMEIMG1}" width="150px" class="img-thumbnail pull-left imghome" /></a>
<!-- END: image -->
<h2>
<a href="{CONTENT.link}" title="{CONTENT.title}">{CONTENT.title}</a>
</h2>
<div class="text-muted">
<ul class="list-unstyled list-inline">
<li>
<em class="fa fa-clock-o">&nbsp;</em> {CONTENT.publtime}
</li>
<li>
<em class="fa fa-eye">&nbsp;</em> {LANG.view}: {CONTENT.hitstotal}
</li>
<li>
<em class="fa fa-comment-o">&nbsp;</em> {LANG.total_comment}: {CONTENT.hitscm}
</li>
</ul>
</div>
<p class="text-justify">
{CONTENT.hometext}
</p>
<!-- BEGIN: adminlink -->
<p class="text-right">
{ADMINLINK}
</p>
<!-- END: adminlink -->
</div>
</div>
</div>
<!-- END: featuredloop -->

Tiếp theo bạn mở file themes/my_themes/modules/news/viewcat_page.tpl

<div class="panel panel-default">
<div class="panel-body">
<!-- BEGIN: image -->
<a href="{CONTENT.link}" title="{CONTENT.title}"><img alt="{HOMEIMGALT1}" src="{HOMEIMG1}" width="{IMGWIDTH1}" class="img-thumbnail pull-left imghome" /></a>
<!-- END: image -->
<h3>
<a href="{CONTENT.link}" title="{CONTENT.title}">{CONTENT.title}</a>
<!-- BEGIN: newday -->
<span class="icon_new">&nbsp;</span>
<!-- END: newday -->
</h3>
<div class="text-muted">
<ul class="list-unstyled list-inline">
<li><em class="fa fa-clock-o">&nbsp;</em> {CONTENT.publtime}</li>
<li><em class="fa fa-eye">&nbsp;</em> {LANG.view}: {CONTENT.hitstotal}</li>
<li><em class="fa fa-comment-o">&nbsp;</em> {LANG.total_comment}: {CONTENT.hitscm}</li>
</ul>
</div>
<p class="text-justify">
{CONTENT.hometext}
</p>
<!-- BEGIN: adminlink -->
<p class="text-right">
{ADMINLINK}
</p>
<!-- END: adminlink -->
</div>
</div>

Sửa thành

<!-- BEGIN: featured -->
<div class="panel panel-default">
<div class="panel-body featured">
<!-- BEGIN: image -->
<a href="{CONTENT.link}" title="{CONTENT.title}"><img alt="{HOMEIMGALT1}" src="{HOMEIMG1}" width="{IMGWIDTH1}" class="img-thumbnail pull-left imghome" /></a>
<!-- END: image -->
<h3>
<a href="{CONTENT.link}" title="{CONTENT.title}">{CONTENT.title}</a>
<!-- BEGIN: newday -->
<span class="icon_new">&nbsp;</span>
<!-- END: newday -->
</h3>
<p class="text-justify">
{CONTENT.hometext}
</p>
<!-- BEGIN: adminlink -->
<p class="text-right">
{ADMINLINK}
</p>
<!-- END: adminlink -->
</div>
</div>
<!-- END: featured -->
<!-- BEGIN: news -->
<div class="panel panel-default">
<div class="panel-body">
<!-- BEGIN: image -->
<a href="{CONTENT.link}" title="{CONTENT.title}"><img alt="{HOMEIMGALT1}" src="{HOMEIMG1}" width="{IMGWIDTH1}" class="img-thumbnail pull-left imghome" /></a>
<!-- END: image -->
<h3>
<a href="{CONTENT.link}" title="{CONTENT.title}">{CONTENT.title}</a>
<!-- BEGIN: newday -->
<span class="icon_new">&nbsp;</span>
<!-- END: newday -->
</h3>
<p class="text-justify">
{CONTENT.hometext}
</p>
<!-- BEGIN: adminlink -->
<p class="text-right">
{ADMINLINK}
</p>
<!-- END: adminlink -->
</div>
</div>
<!-- END: news -->

Tiếp nữa bạn tiến hành css lại bằng cách mở file themes/my_themes/css/news.css thêm vào cuối file đoạn code sau

.featured h2 {
font-size: 16px ;
padding-left: 5px ;
}
.featured p {
font-size: 14px ;
padding-left: 5px ;
}