Addon Share code RecentNews đẹp cho Xenporta

[tranvcuong94]

Share code RecentNews 3 cột cho Xenporta

Xem DEMO

Ảnh DEMO

Hướng dẫn: Trước hết bạn phải cài Xenporta bạn nào chưa có xem tại đây

Bước 1: Bạn download file đính kèm.
Bước 2: Upload file RecentNews.php vào thư mục website /library/EWRporta/Block
Bước 3: Import file RecentNews.xml tại admin.php -> Home -> XenPorta -> Block -> Install block
Bước 4: Kéo RecentNews vào Layout: PORTAL

Hướng dẫn sửa code:

Appearance -> Styles -> Giao diện sử dụng-> Templates -> EWRblock_RecentNews
Nhớ thay đổi link ảnh http://cnttqn.com/ thành link domain website của bạn

<xen:require css="message_user_info.css" />
<xen:require css="bb_code.css" />
<xen:require css="EWRblock_RecentNews.css" />
<div id="Block1">
<div class="block-title"><a href="http://cnttqn.com/forums/thu-thuat-tin-hoc/" title="Tin tức"><span>Tin tức - Sự kiện </span></a></div>
<ul class="block1">
<xen:foreach loop="$RecentNews" value="$news" i="$i">
<xen:if is="{$i}<7">

        <li>
        <div class="block-content" id="{$news.thread_id}">
            <div class="img-thumb">
      
            <xen:if is="{$news.promote_icon} != 'disabled'">
                <xen:if hascontent="true">

                            <xen:contentcheck>
                            <xen:if is="{$news.attach}">
                                <a href="{xen:link threads, $news}" class="pin_pic_img_a"><img src="http://res.cloudinary.com/tint/image/fetch/w_250,h_150,c_thumb/http://cnttqn.com/{$news.attach.thumbnailUrl}"  /></a>
                            <xen:elseif is="{$news.medio}" />
                                <div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">
                                    <a href="{xen:link 'full:media/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}" class="pin_pic_img_a"><img src="{$news.image}" alt="{$news.image}" /></a>
                            <xen:else />
                                <a href="{xen:link threads, $news}" class="pin_pic_img_a"><img src="http://cnttqn.com/images/not-img.jpg" /></a>
                            </xen:if>
                            </xen:contentcheck>
                </xen:if>
            </xen:if>
      
            </div>
            <div class="thread-info">
            <a href="{xen:link threads, $news}" title="{$news.title}" class="title">{$news.title}</a>

            <p class="desc">{xen:helper snippet, $news.message, 100}</p>
            </div>
        </div>
        </li>
</xen:if>
</xen:foreach>
</ul>
</div>

EWRblock_RecentNews.css

@media (min-width:128px)

{
#Block1 .block1 li {width:100%;overflow:hidden;float:left;background-color: #FDFDFD;}
#Block1 .block1 .block-content {margin:7px;min-height:250px}
#Block1 .block1 .img-thumb {height:auto;overflow:hidden}
#Block1 .block1 .img-thumb img {width:100%;height:100%}
#Block1 .block1 .thread-info {padding:6px}
#Block1 .block1 .title {font-size:14px;line-height:18px; color: #0C4C80;font-weight:bold}
#Block1 .block-content {-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); -khtml-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 3px #676C6E;background-color: #FFF;-webkit-border-radius:3px; -moz-border-radius:3px; -khtml-border-radius:3px; border-radius:3px}
#Block1 .block-content .desc {padding-top:10px; color: #2E2E30;}
.block-title {
    background: url(http://cnttqn.com/styles/default/xenforo/icon_red_top.png) no-repeat left top;
    background-size: 236px 40px;
    margin-left: 6px;
    border-bottom: 2px #0C4C80 solid;
        background-color: #FDFDFD;
}
.block-title span {
font-family: UTM_Header, arial;
text-transform: uppercase;
color: #FFF;
display: inline-block;
line-height: 30px;
padding: 0 40px 0 30px;
background: url(http://cnttqn.com/styles/default/xenforo/title-box-top.png) no-repeat right top;
background-size: 300px 300px;
font-weight: normal;
margin-top: 10px;
font-size: 14px;
    font-weight: bold;
}
#Block1 .block-title span {
background-position: 100% -40px;
}
}
@media (min-width:540px)
{
#Block1 .block1 li {
width: 265px !important;
height: 263px !important;
overflow:hidden;float:left;background-color: #FDFDFD;}[/COLOR]
#Block1 .block1 .block-content {margin:7px;min-height:250px}
#Block1 .block1 .img-thumb {height:auto;overflow:hidden}
#Block1 .block1 .img-thumb img {width:100%;height:100%}
#Block1 .block1 .thread-info {padding:6px}
#Block1 .block1 .title {font-size:14px;line-height:18px; color: #0C4C80;font-weight:bold}
#Block1 .block-content {-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); -khtml-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 3px #676C6E;background-color: #FFF;-webkit-border-radius:3px; -moz-border-radius:3px; -khtml-border-radius:3px; border-radius:3px}
#Block1 .block-content .desc {padding-top:10px; color: #2E2E30;}
.block-title {
    background: url(http://cnttqn.com/styles/default/xenforo/icon_red_top.png) no-repeat left top;
    background-size: 236px 40px;
    margin-left: 6px;
    border-bottom: 2px #0C4C80 solid;
        background-color: #FDFDFD;
}
.block-title span {
font-family: UTM_Header, arial;
text-transform: uppercase;
color: #FFF;
display: inline-block;
line-height: 30px;
padding: 0 40px 0 30px;
background: url(http://cnttqn.com/styles/default/xenforo/title-box-top.png) no-repeat right top;
background-size: 300px 300px;
font-weight: normal;
margin-top: 10px;
font-size: 14px;
    font-weight: bold;
}
#Block1 .block-title span {
background-position: 100% -40px;
}
}
@media (min-width:740px)
{
#Block1 .block1 li {
width: 265px !important;
height: 263px !important;
overflow:hidden;float:left;background-color: #FDFDFD;
}
#Block1 .block1 .block-content {margin:7px;min-height:250px;}
#Block1 .block1 .img-thumb {height:120px;overflow:hidden}
#Block1 .block1 .img-thumb img {width:100%;height:100%}
#Block1 .block1 .thread-info {padding:6px}
#Block1 .block1 .title {font-size:14px;line-height:18px; color: #0C4C80;font-weight:bold}
#Block1 .block-content {-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); -khtml-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 3px #676C6E;background-color: #FFF;-webkit-border-radius:3px; -moz-border-radius:3px; -khtml-border-radius:3px; border-radius:3px}
#Block1 .block-content .desc {
padding-top:10px; color: #2E2E30;
    font-family: tahoma;
    font-size: 14px;
    line-height: 21px;
    text-align: justify;
}
.block-title {
    background: url(cnttqn.com/styles/default/xenforo/icon_red_top.png) no-repeat left top;
    background-size: 264px 40px;
    margin-left: -26px;
    border-bottom: 2px #0C4C80 solid;
 
}
.block-title span {
font-family: UTM_Header, arial;
text-transform: uppercase;
color: #FFF;
display: inline-block;
line-height: 30px;
padding: 0 40px 0 30px;
background: url(http://cnttqn.com/styles/default/xenforo/title-box-top.png) no-repeat right top;
background-size: 300px 300px;
font-weight: normal;
margin-top: 10px;
font-size: 14px;
    font-weight: bold;
}
#Block1 .block-title span {
background-position: 100% -40px;
}
.fb2
{
padding-top:5px;
}
}

CSS có sử dụng Responsive cho mobile.

Chúc các bạn thành công.

Cập nhật RecentNews đẹp cho Xenporta v2

 

[PVS]

tks bạn đã chia sẻ , đơn giản nhưng khá đẹp, à mà mình vào trang demo thì khung cuối cùng lỗi hiển thị như sau:

 

[lamtraumvn]

anh ơi, em làm đúng hướng dẫn rồi mà không thấy nó hiện recentnew để kéo vào là sao nhỉ, với cả đúng là trong demo bị lỗi cái recentnew cuối, 2 bài viết bị trôi xuống dưới

 

[tranvcuong94]

tks bạn đã chia sẻ , đơn giản nhưng khá đẹp, à mà mình vào trang demo thì khung cuối cùng lỗi hiển thị như sau:

View attachment 12706

Ok bạn. Mình đã sửa.

 

[tranvcuong94]

anh ơi, em làm đúng hướng dẫn rồi mà không thấy nó hiện recentnew để kéo vào là sao nhỉ, với cả đúng là trong demo bị lỗi cái recentnew cuối, 2 bài viết bị trôi xuống dưới

Bạn đã import chưa. bạn vào Home -> XenPorta -> Layouts xem đã có portal chưa.

 

[PVS]

perfect (y)

 

[Blue]

Cám ơn bạn vì đóng góp vô cùng hữu ích này. Tiếp tục phát huy nhé

 

[chimcanh]

Dùng thừ trên điện thoại chưa ban ?

 

[tranvcuong94]

CSS có sử dụng Responsive cho mobile bạn nhé. Đã test

 

[seoer6]

Các bác cho em hỏi làm sao tạo được 3 cái blocks : RecentNews -RecentNews1 -RecentNews2 như trên ảnh chủ top vậy ? thanks

 

[onlyonelove]

k biết trên xenporta2 thì làm thế nào nhỉ

 

[MANHLETN]

Chủ thớt cho mình hỏi làm thành 4 cột thì chỉnh như thế nào?