Yêu cầu: Sử dụng addon Xenporta

Bài viết này sẽ giúp các bạn tạo nút “Xem thêm” ở cuối trang.

1. Vào EWRblock_RecentNews, tìm đoạn

<xen:if hascontent="true"> 
	<div class="section sectionMain"> 
		<xen:contentcheck> 
			<xen:if is="{$option.pagenav} && {$option.count} > {$option.limit}"> 
				<xen:pagenav link="articles" linkdata="{$category}" page="{$page}" perpage="{$option.limit}" total="{$option.count}" /> 
			</xen:if>
		</xen:contentcheck>
	</div>
</xen:if>

Thêm vào bên trên đoạn này

<xen:if hascontent="true">
	<div style="margin: 10px auto; height: 32px;">
		<xen:contentcheck>
			<xen:set var="$limit_click">{xen:calc '{$option.count} / {$option.limit}'}</xen:set>
			<xen:if is="{$page} == 0">
				<a class="buttons nextListPage" href="/?page=2" style="display: inline;">Click để xem thêm, còn nhiều lắm !</a>
			<xen:elseif is="{$limit_click} > {$page}"/>
				<a class="buttons nextListPage" href="/?page={xen:calc '{$page} + 1'}" style="display: inline;">Click để xem thêm, còn nhiều lắm !</a>
			<xen:else />
				<a class="buttons nextListPage" href="/" style="display: inline;">Hết rồi còn đâu !</a>
			</xen:if>
		</xen:contentcheck>
	</div>
</xen:if>

2. Thêm đoạn sau vào EWRblock_RecentNews.css

a.nextListPage{
    color: white;
    float: left;
    margin-bottom: 10px;
    width: 100%;
}
.buttons {
    text-decoration: none !important;
    line-height: 30px;
    font-size: 12px;
    font-weight: bold;
    background-color: #00A5F0;
    color: white;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-transition: background-color .2s linear;
    -moz-transition: background-color .2s linear;
    border: 1px solid rgba(0, 0, 0, .2);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset, 0 1px white;
    -moz-box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset, 0 1px #fff;
    -webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset, 0 1px white;
    text-shadow: 0 -1px rgba(0, 0, 0, .2);
    text-align: center;
    cursor: pointer
}
.buttons:hover {
    background-color: #24BBFF;
}
.buttons:active {
    background-color: #0082bd;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2) inset;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2) inset;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2) inset;
}