Addon Share code RecentNews đẹp cho Xenporta

tranvcuong94

Corporal
Tham gia
06/11/2015
Bài viết
102
Được Like
86
Share code RecentNews 3 cột cho Xenporta

Xem DEMO

Ảnh DEMO

huong-dan-tao-recentnew-dep.JPG



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

keo-recentnews.JPG


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


PHP:
<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

PHP:
@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
 

Đính kèm

  • RecentNews.xml
    18.5 KB · Lượt xem: 72
  • RecentNews.php
    6.5 KB · Lượt xem: 80
Sửa lần cuối:

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
tks bạn đã chia sẻ :D, đơ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:

Untitled.png
 

lamtraumvn

Private
Tham gia
12/04/2016
Bài viết
22
Được Like
16
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

Corporal
Tham gia
06/11/2015
Bài viết
102
Được Like
86
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

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
perfect (y)
 

chimcanh

MasterCorporal
Tham gia
12/05/2015
Bài viết
235
Được Like
182
Dùng thừ trên điện thoại chưa ban ?
 

tranvcuong94

Corporal
Tham gia
06/11/2015
Bài viết
102
Được Like
86
CSS có sử dụng Responsive cho mobile bạn nhé. Đã test
 

seoer6

Private
Tham gia
10/09/2017
Bài viết
2
Được Like
0
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

MasterCorporal
Tham gia
03/11/2015
Bài viết
367
Được Like
213
k biết trên xenporta2 thì làm thế nào nhỉ
 

MANHLETN

Private
Tham gia
27/02/2018
Bài viết
1
Được Like
0
Chủ thớt cho mình hỏi làm thành 4 cột thì chỉnh như thế nào?
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom