Chia sẻ code RecentNews đẹp cho xenforo

administrator

Administrator
Thành viên BQT
#1
Xin chào các bạn ,hôm nay mình xin hướng dẫn các bạn tạo một RecentNews đẹp cho trang tin tức xenforo.
Yêu cầu trước hết các bạn phải cài Xenporta sau đó tạo một RecentNews mới và chèn code như bên dưới mình chia sẻ nhé. Cái RecentNews này mình chèn vào sibebar cho đẹp.

Xem DEMO

Ảnh DEMO



Phần Code:

Mã:
<xen:require css="EWRblock_RecentNews17.css" />

<div class="layout4">
<div class="block-title17">Du Lịch</div>
<ul>
<xen:foreach loop="$RecentNews17" value="$news" i="$i">
<xen:if is="{$i} < 6">
<li>
<div class="block-thumb">
<xen:if hascontent="true">
<xen:contentcheck>
<xen:if is="{$news.attach}">
<a href="{xen:link threads, $news}"><img src="{$news.attach.thumbnailUrl}" alt="{$news.attach.filename}" /></a>
<xen:elseif is="{$news.medio}" />
<div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">
<a href="{xen:link 'full:media/popout', $news.medio}" class="OverlayTrigger"><img src="styles/8wayrun/EWRmedio_play.png" width="160" height="90" /></a>
</div>
<xen:elseif is="{$news.image}" />
<a href="{xen:link threads, $news}"><img src="{$news.image}" alt="{$news.image}" style="height: 75px; width: 80px;" /></a>
<xen:else />
<xen:avatar user="$news" size="m" itemprop="photo" />
</xen:if>
</xen:contentcheck></div>
<div class="block-new17"><a href="{xen:link threads, $news}" class="newsTitle">{xen:helper threadPrefix, $news}{$news.title}</a></div>
<span class="entry-info"><a href="members/1/">admin</a> posted <span class="DateTime"><xen:datetime time="$news.promote_date" /></span></span>
</xen:if>
</li></xen:if></xen:foreach>
</ul>
</div>
Phần CSS:
Mã:
.layout4 {
    padding: 10px;
    background-color: #FFF;
    border: 1px solid rgb(236,236,236);
}

.block-title17  {
border-top-color: rgb(236,236,236);
    margin: -10px -10px 10px;
    color: #777;
    border-right-color: rgb(236,236,236);
    font-family: Helvetica,Arial,sans-serif;
    font-size: 16px;
    border-bottom: 1px solid rgb(236,236,236);
    padding: 10px 14px;
    background: #F1F1EC url(http://fprotech.com/styles/images/navigation-tab.png) repeat-x top;
}

.layout4 li:first-child {
    padding-top: 0;
}

.layout4 li {
    border-bottom: 1px solid #ddd;
    overflow: hidden;
    padding: 5px 2px 2px 2px;
    position: relative;
}

.layout4 .block-thumb {
    float: left;
    margin-right: 10px;
}

.layout4 li span.entry-info {
    float: left;
    margin-top: 5px;
    font-size: 12px;
}

.layout4 li a {
    color: #444;
    font-size: 12px;
    font-weight: bold;
}

.block-new17 {
    border-bottom: 1px dashed #e3e3e3;
    color: #222;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    padding-bottom: 5px;
   
    }
Chúc các bạn may mắn! Hi vọng các bạn sẽ ủng hộ diễn đàn của mình.