Addon Share code RecentNews đẹp cho Xenporta v2

1,960 11 3
tranvcuong94

tranvcuong94

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

Đính kèm

  • RecentNews.php
    6.5 KB · Lượt xem: 49
  • RecentNews.xml
    18.5 KB · Lượt xem: 48
Sửa lần cuối:
Bài viết liên quan
[MMO] External Accounts - Tài khoản bên ngoài cho XenForo 2 2.3.0 Beta 1 bởi PVS,
Signature Once - Hiển thị chữ ký một lần trong mỗi chủ đề cho XenForo 2 2.0.6 bởi PVS,
Search Improvements - Cải tiến tìm kiếm cho XenForo 2 2.13.1 bởi PVS,
Conversation Last Read Time - Thêm Last Read Time vào cuộc trò chuyện cho XenForo 2 1.1.1 bởi PVS,
Frictionless Login - Đăng nhập không ma sát cho XenForo 2 1.0.0 Beta 3 bởi PVS,
Login as User (LAU2) - Đăng nhập như người dùng cho XenForo 2 1.2.9 bởi PVS,
Được quan tâm
[MMO] External Accounts - Tài khoản bên ngoài cho XenForo 2 2.3.0 Beta 1 bởi PVS,
Bài viết mới
[MMO] External Accounts - Tài khoản bên ngoài cho XenForo 2 2.3.0 Beta 1 bởi PVS,
Signature Once - Hiển thị chữ ký một lần trong mỗi chủ đề cho XenForo 2 2.0.6 bởi PVS,
Search Improvements - Cải tiến tìm kiếm cho XenForo 2 2.13.1 bởi PVS,
Conversation Last Read Time - Thêm Last Read Time vào cuộc trò chuyện cho XenForo 2 1.1.1 bởi PVS,
Frictionless Login - Đăng nhập không ma sát cho XenForo 2 1.0.0 Beta 3 bởi PVS,
Login as User (LAU2) - Đăng nhập như người dùng cho XenForo 2 1.2.9 bởi PVS,
PVS

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,829
Được Like
12,687
đẹp và logic :D, nhưng mình thích cái có viền của ipad hơn ^^
 
  • Like
Reactions: THB
PVS

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,829
Được Like
12,687
haha, ý là mình thích có viền á ^^, chứ thật ra nhìn cũng ok mà ^^, tks for share
 
tranvcuong94

tranvcuong94

Corporal
Tham gia
06/11/2015
Bài viết
102
Được Like
86
Mình chưa nâng cấp lên xenporta 2. Bạn thử xem sao.
 
Nausixkiz

Nausixkiz

Corporal
Tham gia
28/06/2016
Bài viết
138
Được Like
78
Xenprota 2 ít người làm quá thôi xuống 1.6.0 vậy
 
PVS

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,829
Được Like
12,687
mình cũng bị lệch ^^ :D, chủ thớt fix hộ hii
 
Bạn phải đăng nhập hoặc đăng ký để bình luận.
Người đăng Chủ đề tương tự Diễn đàn Trả lời Ngày đăng
PVS Addon 2x Share via QR Code - Chia sẻ qua mã QR cho XenForo 2.2 1.0.1 Add-ons Xenforo 0
PVS Addon 2x Share via QR Code - Chia sẻ qua mã QR cho XenForo 2.2 1.0.0 Add-ons Xenforo 0
tranvcuong94 Addon Share code RecentNews đẹp cho Xenporta Add-ons Xenforo 11
Blue [VNXF] BBCode Share Lock - Chia sẻ mới được xem nội dung Add-ons Xenforo 77
longruoi [share] Add-On Social_Locker_Code 1.0 Add-ons Xenforo 13

Chủ đề tương tự


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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mobile/Zalo: 0906081284

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

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
Top Bottom