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ó thì tìm download nhé. 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 CODE: Select All <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> http://res.cloudinary.com/tint/image/fetch/w_250,h_150,c_thumb tint bạn phải đăng ký tài khoản bên cloudinary ảnh mới chạy nha. Của mình là: http://res.cloudinary.com/cnttqn-com/image/fetch/w_250,h_150,c_thumb EWRblock_RecentNews.css CODE: Select All @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(/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(/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:33.33%;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(/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(/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:33.33%;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(/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(/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.