Addon Share code RecentNews đẹp cho Xenporta

tranvcuong94

tranvcuong94

Corporal
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

Sửa lần cuối:
Bài viết liên quan
[Ap Yazılım] Announcement Area - Khu vực thông báo cho XenForo 2.3 1.0.0 bởi PVS,
[cXF] Style Variations in Navigation - Biến thể giao diện trong Navigation cho XenForo 2.3 1.2.0 bởi PVS,
Report reasons - Thêm lý do báo cáo cho XenForo 2 1.1.3 bởi PVS,
[DigitalPoint] Better Google Analytics - Phân tích Google tốt hơn cho XenForo 2 1.1.2 bởi PVS,
Standard Library - Thư viện tiêu chuẩn cho XenForo 2 1.21.10 bởi PVS,
Search Improvements - Cải tiến tìm kiếm cho XenForo 2 2.16.2 bởi PVS,
Được quan tâm
[cXF] Last post date on thread view - Thêm ngày đăng bài cuối cùng trong Thread View XenForo 2.3 1.1.0 bởi PVS,
[cXF] Style Variations in Navigation - Biến thể giao diện trong Navigation cho XenForo 2.3 1.2.0 bởi PVS,
Report reasons - Thêm lý do báo cáo cho XenForo 2 1.1.3 bởi PVS,
[Ap Yazılım] Announcement Area - Khu vực thông báo cho XenForo 2.3 1.0.0 bởi PVS,
ArrowChat: Facebook Style Chat - Thêm chat phong cách Facebook vào XenForo 2 v4.1.2a bởi PVS,
Bài viết mới
[Ap Yazılım] Announcement Area - Khu vực thông báo cho XenForo 2.3 1.0.0 bởi PVS,
ArrowChat: Facebook Style Chat - Thêm chat phong cách Facebook vào XenForo 2 v4.1.2a bởi PVS,
[cXF] Last post date on thread view - Thêm ngày đăng bài cuối cùng trong Thread View XenForo 2.3 1.1.0 bởi PVS,
[cXF] Style Variations in Navigation - Biến thể giao diện trong Navigation cho XenForo 2.3 1.2.0 bởi PVS,
Report reasons - Thêm lý do báo cáo cho XenForo 2 1.1.3 bởi PVS,
[DigitalPoint] Better Google Analytics - Phân tích Google tốt hơn cho XenForo 2 1.1.2 bởi PVS,
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
 
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
 
lamtraumvn nói:
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
Nhấn để mở rộng...
Bạn đã import chưa. bạn vào Home -> XenPorta -> Layouts xem đã có portal chưa.
 
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
 
3,018 11 4
Bạn phải đăng nhập hoặc đăng ký để bình luận.

Chủ đề tương tự

tranvcuong94
Addon Share code RecentNews đẹp cho Xenporta v2
Trả lời
11
Lượt xem
2K
PVS
PVS
PVS
Addon 2x Share via QR Code - Chia sẻ qua mã QR cho XenForo 2.2 1.0.1
Trả lời
0
Lượt xem
367
PVS
PVS
PVS
Addon 2x Share via QR Code - Chia sẻ qua mã QR cho XenForo 2.2 1.0.0
Trả lời
0
Lượt xem
811
PVS
PVS
KHUCTHUYDU
[share] Code nạp Credit bằng Card điện thoại
2
Trả lời
37
Lượt xem
6K
namhbnam
namhbnam
PVS
Addon 2x A Personalized Share this page Widget - Cá nhân hóa Widget Chia sẻ trang này cho XenForo 2
Trả lời
0
Lượt xem
178
PVS
PVS

Dịch vụ XenForo của VNXF

anhanhxf     0906081284
silzedt_1207          Inbox   PVS

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

XenForo 1 XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

Xử lý sự cố (Troubleshooting)

Texlink

Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Back
Top