Share block Hotnews dạng slide dùng CSS3 cho xenforo.

vbt.dongnguyen · 28/8/14

Cũng vẩn là vọc vạch phá phách chơi, thấy ổn thì chia sẽ để anh em muốn dùng thì dùng, khỏi mất công tìm hihi.
Nếu bạn còn cái RecentNews nào trống thì khỏi cần cài thêm block hotnews làm gì, còn nếu chưa thì cài thêm hihi.

Mở block mà bạn muốn áp dụng code thay bằng mã html sau:

<xen:require css="EWRblock_HotNews.css" />
<div id="content-slider">
<div id="slider">
<xen:foreach loop="$RecentNews2" value="$news" i="$i">
<xen:if is="{$i}>20">
<xen:elseif is="{$i}>=10 && {$i}<=12" />
<div class="view view-eighth">

<img src="attachments/{$news.attach.filename}.{$news.attach.attachment_id}" height="155" width="224" />
<div class="mask">
<h2>{xen:helper snippet, $news.title, 25}</h2>
<p>{xen:helper snippet, $news.message, 300}</p>
<a href="{xen:link threads, $news}" class="info">Xem thêm</a>
</div>

</div>
<xen:elseif is="{$i}>=13 && {$i}<=15" />
<div class="view view-eighth">

<img src="attachments/{$news.attach.filename}.{$news.attach.attachment_id}" height="155" width="224" />
<div class="mask">
<h2>{xen:helper snippet, $news.title, 25}</h2>
<p>{xen:helper snippet, $news.message, 300}</p>
<a href="{xen:link threads, $news}" class="info">Xem thêm</a>
</div>

</div>

</xen:if>
</xen:foreach>

</div>
</div>
Click to expand...

Và cuối cùng là thêm CSS vào:

/* CONTENT SLIDER */
#content-slider {
width: 100%;
height: 340px;
margin: 10px auto 0px;
-padding-bottom: 20px;
}

/* SLIDER */
#slider {
background: none repeat scroll 0% 0% #FAFAFA;
-border: 5px solid #EAEAEA;
-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
height: 330px;
max-width: 696px;
margin: 0px auto;
overflow: visible;
position: relative;
}
.view {
width: 224px;
height: 155px;
float: left;
-border: 1px solid #d1d1d1;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #E6E6E6;
cursor: default;
background: #FFF;
margin: 4px;
}
.view .mask,.view .content {
width: 224px;
height: 155px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
-text-transform: uppercase;
color: #FFF;
text-align: center;
position: relative;
font-size: 14px;
padding: 5px;
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.8);
-margin: 20px 0px 0px;
}
.view p {
font-family: Georgia,serif;
-font-style: italic;
font-size: 12px;
position: relative;
color: #FFF;
padding: 10px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
/* NINTH EXAMPLE*/
.view-eighth .mask {
background-color: rgba(255, 255, 255, 0.7);
top: -200px;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease-out 0.5s;
-moz-transition: all 0.3s ease-out 0.5s;
-o-transition: all 0.3s ease-out 0.5s;
-ms-transition: all 0.3s ease-out 0.5s;
transition: all 0.3s ease-out 0.5s;
}
.view-eighth h2 {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.1s;
-moz-transition: all 0.2s ease-in-out 0.1s;
-o-transition: all 0.2s ease-in-out 0.1s;
-ms-transition: all 0.2s ease-in-out 0.1s;
transition: all 0.2s ease-in-out 0.1s;
}
.view-eighth p {
color: #333;
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.2s;
-moz-transition: all 0.2s ease-in-out 0.2s;
-o-transition: all 0.2s ease-in-out 0.2s;
-ms-transition: all 0.2s ease-in-out 0.2s;
transition: all 0.2s ease-in-out 0.2s;
}
.view-eighth a.info {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.3s;
-moz-transition: all 0.2s ease-in-out 0.3s;
-o-transition: all 0.2s ease-in-out 0.3s;
-ms-transition: all 0.2s ease-in-out 0.3s;
transition: all 0.2s ease-in-out 0.3s;
}
.view-eighth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
top: 0px;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
-webkit-animation: bounceY 0.9s linear;
-moz-animation: bounceY 0.9s linear;
-ms-animation: bounceY 0.9s linear;
animation: bounceY 0.9s linear;
}
.view-eighth:hover h2 {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.view-eighth:hover p {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.view-eighth:hover a.info {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
@keyframes bounceY {
0% { transform: translateY(-205px);}
40% { transform: translateY(-100px);}
65% { transform: translateY(-52px);}
82% { transform: translateY(-25px);}
92% { transform: translateY(-12px);}
55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}
@-moz-keyframes bounceY {
0% { -moz-transform: translateY(-205px);}
40% { -moz-transform: translateY(-100px);}
65% { -moz-transform: translateY(-52px);}
82% { -moz-transform: translateY(-25px);}
92% { -moz-transform: translateY(-12px);}
55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0px);}
}
@-webkit-keyframes bounceY {
0% { -webkit-transform: translateY(-205px);}
40% { -webkit-transform: translateY(-100px);}
65% { -webkit-transform: translateY(-52px);}
82% { -webkit-transform: translateY(-25px);}
92% { -webkit-transform: translateY(-12px);}
55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);}
}
Click to expand...

Chú ý: bạn phải tùy chỉnh cho phù hợp với diễn đàn mình nhé, còn bạn nào không biết thì hỗ trợ tại topic này luôn.

Demo thì đây: http://www.zshare.vn

Captain · 28/8/14

Bác có thể chế hiệu ứng như web nay đc hok
blackberryvietnam.net

vbt.dongnguyen · 28/8/14

Hotnews của blackberryvietnam.net đó hả bạn.

Minh Bảo · 28/8/14

up ủng hộ tinh thần
P/S: site bác cắt ghép khủng

vbt.dongnguyen · 28/8/14

kkk, đang ăn cắp cái hotnews của blackberryvietnam.net nè.

bibiduy · 28/8/14

Và cuối cùng là thêm CSS vào:
cái này bác có thể nói rỏ được không vậy em cảm ơn @vbt.dongnguyen

vbt.dongnguyen · 28/8/14

Thì bạn phải thêm vào css của block đó bạn.
Ví dụ: Bạn muốn thêm cái hotnews này vào EWRblock_RecentNews2 thì bạn đổi tên dòng <xen:require css="EWRblock_HotNews.css" /> lại thành <xen:require css="EWRblock_RecentNews2.css" /> sau đó thêm phần css đó vào EWRblock_RecentNews2.css

bibiduy · 28/8/14

sao em lam không hiện nhì em bỏ vào
EWRblock_RecentNews
EWRblock_RecentNews.css

vbt.dongnguyen · 28/8/14

À quên bạn nhớ set News Posts Per Page cho nó là 20 nhé.

bibiduy · 28/8/14

sao em không hiện nhì có phải
EWRblock_RecentNews
EWRblock_RecentNews.css
hay là
HotNews
hã bác

vbt.dongnguyen · 28/8/14

Bạn đã bỏ mấy đoạn đó vào block nào thì bạn kéo block đó ra.
Ví dụ bỏ bào block RecentNews thì bạn phải kéo block RecentNews ra nó mới hiện chứ.

vbt.dongnguyen · 28/8/14

Hoặc bạn PM yahoo: VipByTeam38 mình teamview qua giúp bạn cho nhanh hihi

AC_Khanh01 · 29/8/14

vbt.dongnguyen said: ↑

Hoặc bạn PM yahoo: VipByTeam38 mình teamview qua giúp bạn cho nhanh hihi
Click to expand...

Share trang porta đẹp của bác được không bác ơi

vbt.dongnguyen · 29/8/14

AC_Khanh01 said: ↑

Share trang porta đẹp của bác được không bác ơi
Click to expand...

Cái này share nhiều lắm bạn, mà nếu bạn tìm không ra thì chiều về mình share, giờ đi học rồi.

loc1388 · 29/8/14

đẹp

Xenfo · 29/8/14

Quá là đẹp

vbt.dongnguyen · 29/8/14

Đây giờ rảnh rồi nè, đây là toàn bộ template của recentnews forum mình.
EWRblock_RecentNews:

Mã:

<xen:require css="message_user_info.css" />
<xen:require css="bb_code.css" />
<xen:require css="EWRblock_RecentNews.css" />

<div id="recentNews">
       <div class="header_rc"><div class="title_rc">Tin mới nhất</div></div>
    <xen:foreach loop="$RecentNews" value="$news">
        <div class="section sectionMainportal recentNews" id="{$news.thread_id}">
                        <div class="cms_congnghe_img">
                <xen:if is="{$news.promote_icon} != 'disabled'">
                <xen:if hascontent="true">

                            <xen:contentcheck>
                            <xen:if is="{$news.attach}">
                                <a href="{xen:link threads, $news}"><img src="attachments/{$news.attach.filename}.{$news.attach.attachment_id}" alt="{$news.attach.filename}" /></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}"><img src="http://res.cloudinary.com/tint/image/fetch/w_500,h_333,c_thumb/{$news.image}" alt="{$news.image}" /></a>
                            <xen:else />
                                <a href="{xen:link threads, $news}"><img src="/images/news.jpg" /></a>
                            </xen:if>
                            </xen:contentcheck>
                </xen:if>
                </xen:if>
                       </div>
      
                       <div class="right_ct">
                         <div class="subHeadingportal">
                          <a href="{xen:link threads, $news}" class="newsTitle">{xen:helper threadPrefix, $news}{$news.title}</a>
                          <xen:if is="{$visitor.permissions.EWRporta.canPromote}">
                (<a href="{xen:link 'threads/edit', $news}" class="OverlayTrigger">{xen:phrase edit}</a>)
              </xen:if>
                          <div class="edit_btn" style="float: right; white-space: nowrap;">
                           </div>
                         </div>
            <div class="messageContent baseHtml">
                <div class="postedBy">
                    <span class="posted iconKey">{xen:phrase by_x_at_y,
                        'user=<a href="{xen:link members, $news}" class="username">{$news.username}</a>,',
                        'date=<a href="{xen:link threads, $news}">{xen:time $news.post_date, 'absolute'}</a>'}</span>
                </div>
                <div class="newsText">{xen:helper snippet, $news.message, 300}</div>

                        <div class="clearFix"></div>
                      </div>
                        </div>
       

        </div>
    </xen:foreach>

    <xen:if hascontent="true">
    <div class="section sectionMain">
        <xen:contentcheck>
        <xen:if is="{$option.pagenav} && {$option.count} > {$option.limit}">
            <xen:pagenav link="articles" linkdata="{$category}" page="{$page}" perpage="{$option.limit}" total="{$option.count}" />
        </xen:if>
        </xen:contentcheck>
    </div>
    </xen:if>
</div>

EWRblock_RecentNews.css:

Mã:

.EWRporta_Portal .breadBoxTop, .EWRporta_Portal .titleBar {display: none;}
.header_rc{border-bottom:4px solid #666;position:relative;width:auto}/*#0093cb #006d96*/
.title_rc{background:#333;color:#fff;float:left;font-size:15px;padding:10px;position:absolute;text-transform:uppercase;top:-39px}
#recentNews {
    background: none repeat scroll 0% 0% #FAFAFA;
    -border: 1px solid #CCC;
    margin-top: 10px;
    padding-top: 30px;
}
.page_count{background:none;border:none}
.EWRporta_Portal .breadBoxBottom{display:none}
.postedStat .views,.postedStat .likes,.postedStat .comments{float:left;padding-right:25px;padding-top:3px}
.postedStat .views span{background:transparent url(/images/icon.png) no-repeat -135px -7px;float:left;font-size:13px;height:15px;padding-right:10px;width:19px}
.postedStat .likes span{background:transparent url(/images/icon.png) no-repeat -174px -67px;float:left;font-size:13px;height:15px;padding-right:0;width:19px}
.postedStat{padding-bottom:10px;padding-left:10px;padding-top:10px}
.recentNews .messageContent .comments span{background:transparent url(/images/icon.png) no-repeat -173px -7px;float:left;font-size:13px;height:15px;padding-right:5px;width:19px}
.recentNews .messageContent .comments a{color:#3A3A3A!important;font-weight:400!important}
.LeftMenuFix{margin:0 auto;width:1000px}
.LeftMenu_wrp{background:#fff;float:left;margin-left:0;margin-right:10px;margin-top:15px;width:130px}
/* .item_lmn{border:#d9d9d9 solid 1px;border-top:none;color:#3870a0;display:block;font-size:14px;padding:8px 10px;text-align:center}
.item_lmn:hover{background:#f1f1f1}
.title_lmn1 .item_lmn{background:#0093cc;color:#fff}
.title_lmn2 .item_lmn{background:#e75218;color:#fff}
.LeftMenuFixed{margin-left:-140px;margin-top:-3px;position:absolute;width:135px!important}*/
.clearFix{clear:both}
.HotBlock{float:left;margin-top:0;width:100%}
.HotBlock_wrp{background:none repeat scroll 0 0 #FFF;border:1px solid #CCC;margin-top:15px;padding-top:30px}
.HotBlock_ct{padding:20px 0 0}
.header_hb .title_rc{background:#444}
.HotBlock_items{float:left;height:100px;overflow:hidden;padding-bottom:20px;padding-left:20px;width:320px}
.img_items{display:block;float:left;height:95px;overflow:hidden;padding-right:10px;width:95px}
.img_items img{min-height:95px;width:95px}
.ct_items{float:left;width:205px}
.title_items{color:#444!important;display:block;font-size:15px;font-weight:700;max-height:58px;overflow:hidden;text-align:justify;width:205px}
.info_items{color:#666!important;font-size:12px;width:190px}
.lmn_bock02 .fb-like,.lmn_bock02 .plusone{border:#d9d9d9 solid 1px;border-top:none;color:#3870a0;display:block;font-size:14px;margin:0!important;padding:8px 10px;text-align:center}
.thread_view .HotBlock{margin-bottom:10px;margin-right:310px;margin-top:-10px;width:auto}
.EWRporta_Portal .PageNav{padding-top:10px}
.titleBar h1{margin-top:10px}
.cms_congnghe_img{float:left;height:170px;overflow:hidden;width:270px}
.right_ct{margin-left:280px}

.bbCodeQuote{margin-right:10px!important}
.subHeadingportal{-webkit-border-radius:5px 5px 0 0; -moz-border-radius:5px 5px 0 0; -khtml-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0;font-weight:700;margin:0 0 5px;overflow:hidden;padding-bottom:2px;text-align:left}
.subHeadingportal .newsTitle{color:#444;font-family:Tahoma, Geneva, sans-serif;font-size:16px;line-height:24px}
.recentNews .leftDate .newsText{font-size:13px;margin-left:0!important;text-align:justify}
.recentNews .leftDate .newsText iframe{max-width:550px;width:auto}
.cn_message{padding-bottom:0!important}
.cn_message .fb-comments{margin:0 auto}
.cnfacebookLike{padding:15px 10px 10px}
.sectionFooterportal{color:#65a5d1;font-size:11px;line-height:16px;padding:4px 10px}
.sectionFooterportal a{color:#65a5d1}
.primaryContentportal{background-color:#FFFFF;padding:10px}
.primaryContentportal a{color:#176093}
.sectionMainportal {
    background: none repeat scroll 0% 0% #FFF;
    border-bottom: 1px solid #D9D9D9;
    float: left;
    margin: 0px !important;
    padding: 20px;
    -webkit-box-shadow: 0px 0px 10px -7px rgba(0,0,0,0.76);
    -moz-box-shadow: 0px 0px 10px -7px rgba(0,0,0,0.76);
    box-shadow: 0px 0px 10px -7px rgba(0,0,0,0.76);
}
.widget-container .secondaryContent a,.widget-container .userTitle a{font-weight:400}
.cms_congnghe_img a:hover img {
    margin-left: -5%;
    width: 110%;
}
.cms_congnghe_img a img {
    transition: all 0.2s ease 0s;
    width: 100%;
}
.recentNews .subHeading { margin: -10px -10px 10px; }
.recentNews .subHeading a { color: #444444 !important; }
.recentNews .subHeading h2 { font-size: 1.5em; }
.recentNews .messageUserBlock { float: right; margin-left: 10px; }

.recentNews .newsDate { float: left; margin: 0px 10px 10px 0px; padding: 0px 10px 5px; width: 35px; font-weight: bold; text-align: center; }
.recentNews .newsDate .newsMonth { padding: 10px 0px 5px !important; margin: 0px -10px 5px !important; text-transform: uppercase; }
.recentNews .newsDate .newsDay { font-size: 26px; }

.recentNews .leftDate .newsDate { margin-left: -45px; }
.recentNews .leftDate .newsText { margin-left: 25px; }

.recentNews .messageContent { font-size: 13px; }
.recentNews .messageContent .postedBy a{color:#666;}
.recentNews .messageContent .postedBy { font-size: 12px; padding-bottom: 5px;padding-top: 0px; }
.recentNews .messageContent .username { font-weight: bold; color:#0093cb !important;}
.recentNews .messageContent .comments { float: left; font-weight: bold; }
.recentNews .messageContent .clearFix { clear: right; }

.recentNews .iconKey div
{
    background: transparent url('styles/baisik/xenforo/xenforo-ui-sprite.png') no-repeat 10000px 0;
    width: 16px;
    height: 16px;
    float: left;
    margin-right: 4px;
}
.recentNews .iconKey .sticky    { background-position:   0px -16px; }
.recentNews .iconKey .redirect  { background-position: -48px -16px; }
.recentNews .iconKey .new       { background-position: -64px -16px; }

.recentNews .sectionFooter { margin: 10px -10px -10px; text-align: right; position: relative; }
.recentNews .sectionFooter .continue { padding-top: 5px; font-size: 12px; }
.recentNews .sectionFooter .continue .redirect { margin: 3px 4px 0px 0px; }

.recentNews .sectionFooter .categories { padding-top: 5px; float: left; }
.recentNews .sectionFooter .categories li { display: inline; }

.recentNews .sectionFooter .sharePage { position: absolute; }
.recentNews .sectionFooter .shareControl { margin-top: 6px !important; }

Demo thì dưới chữ ký nhé

Còn cái hotnews của http://blackberryvietnam.net/ nữa, hôm qua bạn nào nói cần đó mà hok thấy trả lời nên bạn nào cần thì share luôn.

Captain · 29/8/14

vbt.dongnguyen said: ↑

Đây giờ rảnh rồi nè, đây là toàn bộ template của recentnews forum mình.
EWRblock_RecentNews:

Mã:

<xen:require css="message_user_info.css" />
<xen:require css="bb_code.css" />
<xen:require css="EWRblock_RecentNews.css" />

<div id="recentNews">
       <div class="header_rc"><div class="title_rc">Tin mới nhất</div></div>
    <xen:foreach loop="$RecentNews" value="$news">
        <div class="section sectionMainportal recentNews" id="{$news.thread_id}">
                        <div class="cms_congnghe_img">
                <xen:if is="{$news.promote_icon} != 'disabled'">
                <xen:if hascontent="true">

                            <xen:contentcheck>
                            <xen:if is="{$news.attach}">
                                <a href="{xen:link threads, $news}"><img src="attachments/{$news.attach.filename}.{$news.attach.attachment_id}" alt="{$news.attach.filename}" /></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}"><img src="http://res.cloudinary.com/tint/image/fetch/w_500,h_333,c_thumb/{$news.image}" alt="{$news.image}" /></a>
                            <xen:else />
                                <a href="{xen:link threads, $news}"><img src="/images/news.jpg" /></a>
                            </xen:if>
                            </xen:contentcheck>
                </xen:if>
                </xen:if>
                       </div>
     
                       <div class="right_ct">
                         <div class="subHeadingportal">
                          <a href="{xen:link threads, $news}" class="newsTitle">{xen:helper threadPrefix, $news}{$news.title}</a>
                          <xen:if is="{$visitor.permissions.EWRporta.canPromote}">
                (<a href="{xen:link 'threads/edit', $news}" class="OverlayTrigger">{xen:phrase edit}</a>)
              </xen:if>
                          <div class="edit_btn" style="float: right; white-space: nowrap;">
                           </div>
                         </div>
            <div class="messageContent baseHtml">
                <div class="postedBy">
                    <span class="posted iconKey">{xen:phrase by_x_at_y,
                        'user=<a href="{xen:link members, $news}" class="username">{$news.username}</a>,',
                        'date=<a href="{xen:link threads, $news}">{xen:time $news.post_date, 'absolute'}</a>'}</span>
                </div>
                <div class="newsText">{xen:helper snippet, $news.message, 300}</div>

                        <div class="clearFix"></div>
                      </div>
                        </div>
      

        </div>
    </xen:foreach>

    <xen:if hascontent="true">
    <div class="section sectionMain">
        <xen:contentcheck>
        <xen:if is="{$option.pagenav} && {$option.count} > {$option.limit}">
            <xen:pagenav link="articles" linkdata="{$category}" page="{$page}" perpage="{$option.limit}" total="{$option.count}" />
        </xen:if>
        </xen:contentcheck>
    </div>
    </xen:if>
</div>

EWRblock_RecentNews.css:

Mã:

.EWRporta_Portal .breadBoxTop, .EWRporta_Portal .titleBar {display: none;}
.header_rc{border-bottom:4px solid #666;position:relative;width:auto}/*#0093cb #006d96*/
.title_rc{background:#333;color:#fff;float:left;font-size:15px;padding:10px;position:absolute;text-transform:uppercase;top:-39px}
#recentNews {
    background: none repeat scroll 0% 0% #FAFAFA;
    -border: 1px solid #CCC;
    margin-top: 10px;
    padding-top: 30px;
}
.page_count{background:none;border:none}
.EWRporta_Portal .breadBoxBottom{display:none}
.postedStat .views,.postedStat .likes,.postedStat .comments{float:left;padding-right:25px;padding-top:3px}
.postedStat .views span{background:transparent url(/images/icon.png) no-repeat -135px -7px;float:left;font-size:13px;height:15px;padding-right:10px;width:19px}
.postedStat .likes span{background:transparent url(/images/icon.png) no-repeat -174px -67px;float:left;font-size:13px;height:15px;padding-right:0;width:19px}
.postedStat{padding-bottom:10px;padding-left:10px;padding-top:10px}
.recentNews .messageContent .comments span{background:transparent url(/images/icon.png) no-repeat -173px -7px;float:left;font-size:13px;height:15px;padding-right:5px;width:19px}
.recentNews .messageContent .comments a{color:#3A3A3A!important;font-weight:400!important}
.LeftMenuFix{margin:0 auto;width:1000px}
.LeftMenu_wrp{background:#fff;float:left;margin-left:0;margin-right:10px;margin-top:15px;width:130px}
/* .item_lmn{border:#d9d9d9 solid 1px;border-top:none;color:#3870a0;display:block;font-size:14px;padding:8px 10px;text-align:center}
.item_lmn:hover{background:#f1f1f1}
.title_lmn1 .item_lmn{background:#0093cc;color:#fff}
.title_lmn2 .item_lmn{background:#e75218;color:#fff}
.LeftMenuFixed{margin-left:-140px;margin-top:-3px;position:absolute;width:135px!important}*/
.clearFix{clear:both}
.HotBlock{float:left;margin-top:0;width:100%}
.HotBlock_wrp{background:none repeat scroll 0 0 #FFF;border:1px solid #CCC;margin-top:15px;padding-top:30px}
.HotBlock_ct{padding:20px 0 0}
.header_hb .title_rc{background:#444}
.HotBlock_items{float:left;height:100px;overflow:hidden;padding-bottom:20px;padding-left:20px;width:320px}
.img_items{display:block;float:left;height:95px;overflow:hidden;padding-right:10px;width:95px}
.img_items img{min-height:95px;width:95px}
.ct_items{float:left;width:205px}
.title_items{color:#444!important;display:block;font-size:15px;font-weight:700;max-height:58px;overflow:hidden;text-align:justify;width:205px}
.info_items{color:#666!important;font-size:12px;width:190px}
.lmn_bock02 .fb-like,.lmn_bock02 .plusone{border:#d9d9d9 solid 1px;border-top:none;color:#3870a0;display:block;font-size:14px;margin:0!important;padding:8px 10px;text-align:center}
.thread_view .HotBlock{margin-bottom:10px;margin-right:310px;margin-top:-10px;width:auto}
.EWRporta_Portal .PageNav{padding-top:10px}
.titleBar h1{margin-top:10px}
.cms_congnghe_img{float:left;height:170px;overflow:hidden;width:270px}
.right_ct{margin-left:280px}

.bbCodeQuote{margin-right:10px!important}
.subHeadingportal{-webkit-border-radius:5px 5px 0 0; -moz-border-radius:5px 5px 0 0; -khtml-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0;font-weight:700;margin:0 0 5px;overflow:hidden;padding-bottom:2px;text-align:left}
.subHeadingportal .newsTitle{color:#444;font-family:Tahoma, Geneva, sans-serif;font-size:16px;line-height:24px}
.recentNews .leftDate .newsText{font-size:13px;margin-left:0!important;text-align:justify}
.recentNews .leftDate .newsText iframe{max-width:550px;width:auto}
.cn_message{padding-bottom:0!important}
.cn_message .fb-comments{margin:0 auto}
.cnfacebookLike{padding:15px 10px 10px}
.sectionFooterportal{color:#65a5d1;font-size:11px;line-height:16px;padding:4px 10px}
.sectionFooterportal a{color:#65a5d1}
.primaryContentportal{background-color:#FFFFF;padding:10px}
.primaryContentportal a{color:#176093}
.sectionMainportal {
    background: none repeat scroll 0% 0% #FFF;
    border-bottom: 1px solid #D9D9D9;
    float: left;
    margin: 0px !important;
    padding: 20px;
    -webkit-box-shadow: 0px 0px 10px -7px rgba(0,0,0,0.76);
    -moz-box-shadow: 0px 0px 10px -7px rgba(0,0,0,0.76);
    box-shadow: 0px 0px 10px -7px rgba(0,0,0,0.76);
}
.widget-container .secondaryContent a,.widget-container .userTitle a{font-weight:400}
.cms_congnghe_img a:hover img {
    margin-left: -5%;
    width: 110%;
}
.cms_congnghe_img a img {
    transition: all 0.2s ease 0s;
    width: 100%;
}
.recentNews .subHeading { margin: -10px -10px 10px; }
.recentNews .subHeading a { color: #444444 !important; }
.recentNews .subHeading h2 { font-size: 1.5em; }
.recentNews .messageUserBlock { float: right; margin-left: 10px; }

.recentNews .newsDate { float: left; margin: 0px 10px 10px 0px; padding: 0px 10px 5px; width: 35px; font-weight: bold; text-align: center; }
.recentNews .newsDate .newsMonth { padding: 10px 0px 5px !important; margin: 0px -10px 5px !important; text-transform: uppercase; }
.recentNews .newsDate .newsDay { font-size: 26px; }

.recentNews .leftDate .newsDate { margin-left: -45px; }
.recentNews .leftDate .newsText { margin-left: 25px; }

.recentNews .messageContent { font-size: 13px; }
.recentNews .messageContent .postedBy a{color:#666;}
.recentNews .messageContent .postedBy { font-size: 12px; padding-bottom: 5px;padding-top: 0px; }
.recentNews .messageContent .username { font-weight: bold; color:#0093cb !important;}
.recentNews .messageContent .comments { float: left; font-weight: bold; }
.recentNews .messageContent .clearFix { clear: right; }

.recentNews .iconKey div
{
    background: transparent url('styles/baisik/xenforo/xenforo-ui-sprite.png') no-repeat 10000px 0;
    width: 16px;
    height: 16px;
    float: left;
    margin-right: 4px;
}
.recentNews .iconKey .sticky    { background-position:   0px -16px; }
.recentNews .iconKey .redirect  { background-position: -48px -16px; }
.recentNews .iconKey .new       { background-position: -64px -16px; }

.recentNews .sectionFooter { margin: 10px -10px -10px; text-align: right; position: relative; }
.recentNews .sectionFooter .continue { padding-top: 5px; font-size: 12px; }
.recentNews .sectionFooter .continue .redirect { margin: 3px 4px 0px 0px; }

.recentNews .sectionFooter .categories { padding-top: 5px; float: left; }
.recentNews .sectionFooter .categories li { display: inline; }

.recentNews .sectionFooter .sharePage { position: absolute; }
.recentNews .sectionFooter .shareControl { margin-top: 6px !important; }

Demo thì dưới chữ ký nhé

Còn cái hotnews của http://blackberryvietnam.net/ nữa, hôm qua bạn nào nói cần đó mà hok thấy trả lời nên bạn nào cần thì share luôn.

Click to expand...

Mình đới . đợi lâu rồi mà chưa thấy bạn share . Tự động cập nhật như các Hotnew khác đc k b

vbt.dongnguyen · 29/8/14

Captain said: ↑

Mình đới . đợi lâu rồi mà chưa thấy bạn share . Tự động cập nhật như các Hotnew khác đc k b
Click to expand...

Đây của bạn đây nhé:
Share nhầm, đã share lại xem tại đây nhé. http://vxf.vn/threads/share-block-hotnews-dang-slide-dung-css3-cho-xenforo.20556/page-2#post-143723

sharpe · 29/8/14

đẹp lắm bác. share luôn cái trang bạn kia yêu cầu càng tốt hjhj

Share block Hotnews dạng slide dùng CSS3 cho xenforo.

vbt.dongnguyen Member

Captain New Member

vbt.dongnguyen Member

Minh Bảo Verified User

vbt.dongnguyen Member

bibiduy Member

vbt.dongnguyen Member

bibiduy Member

vbt.dongnguyen Member

bibiduy Member

vbt.dongnguyen Member

vbt.dongnguyen Member

AC_Khanh01 Member

vbt.dongnguyen Member

loc1388 Member

Xenfo New Member

vbt.dongnguyen Member

Captain New Member

vbt.dongnguyen Member

sharpe New Member

Chia sẻ trang này

Text Links

Textlink

Thông báo mới nhất