Addon Share code RecentNews đẹp cho Xenporta v2

tranvcuong94

tranvcuong94

Corporal
Code hoặc hướng dẫn này được sử dụng trên phiên bản Xenforo cũ đã quá hạn sử dụng. Bạn hãy click để tìm bản mới hơn
Share code RecentNews đẹp cho xenporta V2

Xem lại Bài trước

Bài này mình sẽ chia sẻ tiếp giao diện dễ nhìn hơn và chuẩn Responsive cho các kích thước màn hình.

Xem DEMO Tại Đây

Ảnh DEMO

demo.JPG


Responsive cho ipad: 3 cột có đường bao viền.

bao-vien-3.JPG


Responsive cho màn hình khoảng 5inch - 7inch: 2 cột có đường bao viền.

bao-vien-2.JPG


Responsive cho màn hình từ 4inch và dưới 4inch : 1 cột có đường bao viền.

1-vien.JPG


Có hiệu ứng chuyển đổi màu chữ khi rê chuột vào hình ảnh.

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.12705.html


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

Appearance -> Styles -> Giao diện sử dụng-> Templates -> EWRblock_RecentNews
Chú ý: Nhớ thay đổi yourdomain thành website của bạn ở code link ảnh bên dưới.


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="td">
<div class="tieu-de"><a href="/forums/tin-tuc-va-su-kien/">Tin tức - Sự kiện </a></div><div class="stripe-line"></div>
</div>
<div class="clear"></div>
<ul class="block1">
<xen:foreach loop="$RecentNews" value="$news" i="$i">
<xen:if is="{$i}<26">

         <li>
         <a href="{xen:link threads, $news}" title="{$news.title}" class="pin_pic_img_a">
        <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}">
                                <img src="http://res.cloudinary.com/tint/image/fetch/w_250,h_140,c_thumb/http://yourdomain/{$news.attach.thumbnailUrl}"  />
                            <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}" />
                                <img src="http://res.cloudinary.com/tint/image/fetch/w_250,h_140,c_thumb/{$news.image}" alt="{$news.image}" />
                            <xen:else />
                               <img src="http://cnttqn.com/images/not-img.jpg" />
                            </xen:if>
                            </xen:contentcheck>
                </xen:if>
            </xen:if>
    
            </div>
            <div class="thread-info">
            {xen:helper snippet,$news.title, 66}


            </div>
        </div></a>
        </li>
</xen:if>
</xen:foreach>
</ul>

</div>

EWRblock_RecentNews.css

PHP: 
@media (min-width:128px)
{
#Block1 .block1 li {width:100%;float:left;background-color: #FDFDFD;}
#Block1 .block1 .block-content {margin:7px;min-height:179px}
#Block1 .block1 .img-thumb {height:auto;overflow:hidden;text-align: center;}
#Block1 .block1 .img-thumb img {width:94%;height:100%; margin-top: 8px;}
#Block1 .block1 .thread-info {
padding:6px}
#Block1 .block1 .title {font-size:14px;line-height:18px;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(/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;
            margin-bottom: 5px;
                display: inline-block;
}
.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(/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;
}
}
@media (min-width:340px)
{
#Block1 .block1 li {width:50%;float:left;background-color: #FDFDFD;}
#Block1 .block1 .block-content {margin:7px;min-height:179px}
#Block1 .block1 .img-thumb {height:auto;overflow:hidden;text-align: center;}
#Block1 .block1 .img-thumb img {width:94%;height:100%;margin-bottom: -4px;}
#Block1 .block1 .thread-info {
padding:6px;padding-top: 7px;

}
#Block1 .block1 .title {font-size:14px;line-height:18px;font-weight:bold}
#Block1 .block-content {}
#Block1 .block-content .desc {padding-top:10px; color: #2E2E30;}
.block-title {
    background: url(/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;
            margin-bottom: 5px;
                display: inline-block;
}
.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(/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;
}
.qcmobi2
{
  display: none;
}
}
@media (min-width:540px)
{
#Block1 .block1 li {width:33.3%;float:left;background-color: #FDFDFD;}
#Block1 .block1 .block-content {margin:7px;min-height:179px}
#Block1 .block1 .img-thumb {height:auto;overflow:hidden;text-align: center;}
#Block1 .block1 .img-thumb img {width:94%;height:100%;margin-bottom: -4px;}
#Block1 .block1 .thread-info {
padding:6px;padding-top: 7px;

}
#Block1 .block1 .title {font-size:14px;line-height:18px;font-weight:bold}
#Block1 .block-content {}
#Block1 .block-content .desc {padding-top:10px; color: #2E2E30;}
.block-title {
    background: url(/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;
            margin-bottom: 5px;
}
.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(/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:1100px)
{
#Block1 .block1 li {
width: 265px !important;
height: 195px !important;
float:left;background-color: #FDFDFD;
}
#Block1 .block1 .block-content {margin:7px;min-height:179px;background-color: #FDFDFD;}
#Block1 .block1 .img-thumb {height:auto;overflow:hidden;text-align: center;}
#Block1 .block1 .img-thumb img {width:94%;height:100%;margin-bottom: -4px;}
#Block1 .block1 .img-thumb img:hover {}
#Block1 .block1 .thread-info {
padding:6px;padding-top: 7px;
       font-weight: bold;
}
#Block1 .block1 .title {font-size:14px;line-height:18px;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 0px 0px #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(/styles/default/xenforo/icon_red_top.png) no-repeat left top;
    background-size: 264px 40px;
    margin-left: -26px;
    border-bottom: 2px #0C4C80 solid;
        margin-bottom: 5px;

}
}
.tieu-de
{
    float: left;
    margin-right: 10px;
    font-size: 22px;
    text-transform: uppercase;

    color: #2e6ab3;
    font-weight: bold;
    padding-left: 10px;
}
.tieu-de a
{
color: #2e6ab3;
}
.stripe-line
{
background: url(http://cnttqn.com/images/title-home.png);
    height: 12px;
    margin-top: 10px;
        overflow: hidden;
}
.td
{
padding: 3px 0;
        margin-top: 12px;
}


Bài viết có thể thiếu sót mong các bạn góp ý.

Nguồn: VNXF.VN
 
Sửa lần cuối:
Bài viết liên quan
[VNXF 2x] Weather Widget - Widget hiển thị thời tiết dựa vào GPS cho XenForo 2.3 1.0.0 bởi PVS,
Standard Library - Thư viện tiêu chuẩn cho XenForo 2.3 1.22.4 bởi PVS,
[Ap Yazılım] External Link Redirector - Chuyển hướng liên kết ngoài cho XenForo 2.3 1.1.0 bởi PVS,
[Ap Yazılım] Postbit - Giao diện người dùng hiện đại cho XenForo 2.3 1.0.0 bởi PVS,
[Ap Yazılım] User Panel - Bảng điều khiển người dùng cho XenForo 2.3 1.0.0 bởi PVS,
[Ap Yazilim] Mini Announcement Blocks - Block thông báo nhỏ cho XenForo 2.3 1.2.0 bởi PVS,
Được quan tâm
[VNXF 2x] Weather Widget - Widget hiển thị thời tiết dựa vào GPS cho XenForo 2.3 1.0.0 bởi PVS,
Bài viết mới
[VNXF 2x] Weather Widget - Widget hiển thị thời tiết dựa vào GPS cho XenForo 2.3 1.0.0 bởi PVS,
Standard Library - Thư viện tiêu chuẩn cho XenForo 2.3 1.22.4 bởi PVS,
[Ap Yazılım] External Link Redirector - Chuyển hướng liên kết ngoài cho XenForo 2.3 1.1.0 bởi PVS,
[VNT] ACP Custom 2.8.6 - Ẩn tệp đính kèm có thông báo bởi thahtrung06,
[Ap Yazılım] Postbit - Giao diện người dùng hiện đại cho XenForo 2.3 1.0.0 bởi PVS,
[Ap Yazılım] User Panel - Bảng điều khiển người dùng cho XenForo 2.3 1.0.0 bởi PVS,
đẹp và logic :D, nhưng mình thích cái có viền của ipad hơn ^^
 
  • Like
Reactions: THB
2,130 11 3
Bạn phải đăng nhập hoặc đăng ký để bình luận.

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

Diễn đàn chia sẻ kinh nghiệm massage
Review dịch vụ massage toàn quốc
Cộng Đồng Massage Việt Nam
Liên hệ đặt Textlink

Nhà Tài Trợ

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