Slide TopStory giống Tinh Tế có responsive

[PVS]

Slide TopStory giống Tinh Tế có responsive

Share cho các bạn slide bài hot của Tinh Tế có thể responsive auto cập nhật hoặc tự chọn bài viết đều được.

Sau khi responsive
​

Hướng dẫn:
Vào template: EWRblock_RecentNews thay thế toàn bộ bằng code sau

<xen:require css="EWRblock_RecentNews.css" />
<div class="topstories UTPTopNews responsive" style="display: block;">
<div class="grid_holder">
<xen:foreach loop="$RecentNews" value="$news">
<a title="{$news.title}" class="a_block" href="{xen:link threads, $news}">
                            <xen:if is="{$news.attach}">
                                <img class="block_img" src="{$news.attach.thumbnailUrl}" alt="{$news.attach.filename}" />
                            <xen:elseif is="{$news.medio}" />
                                <img class="block_img" src="styles/8wayrun/EWRmedio_play.png" alt="{$news.title}" />
                            <xen:elseif is="{$news.image}" />
                                                                <img class="block_img" src="{$news.image}" alt="{$news.title}" />
                            <xen:else />
                                                                <img class="block_img" src="http://images.puella-magi.net/2/27/No_Image_Wide.svg" alt="{$news.title}" />
                            </xen:if>
<div class="txt_holder">
<p>
<span class="txts">{$news.title}</span>
<span class="bg"></span>
</p>
<div class="timestamp">
<span class="txts">
</span>
<span class="bg"></span>
</div>
</div>
</a>
</xen:foreach>
</div>
<div class="clear"></div>
</div>

Thay thế toàn bộ EWRblock_RecentNews.css bằng code sau:

.topstories{min-width:300px;padding-bottom:20px;width:100%;padding: 0 10px;}.topstories
.a_block{display:inline;float:left;margin-bottom:1px;margin-left:1px;position:relative;text-decoration:none;height:150px;overflow:hidden}.topstories
.a_block_first{margin-left:0}.topstories .a_block
img{display:inline;float:left}.topstories .a_block
.txt_holder{bottom:0;cursor:pointer;left:0;position:absolute;width:100%}.topstories .a_block .txt_holder
p{color:#FFF;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:16px;padding:8px
10px;position:relative;text-decoration:none}.topstories .a_block .txt_holder p:hover{color:#AAA}.topstories .a_block_hover .txt_holder
p{color:#00BDF6}.topstories .a_block .txt_holder p
.txts{position:relative;z-index:10}.topstories .a_block .txt_holder p
.bg{background:none repeat scroll 0 0 #003350;border:0
none;bottom:0;height:100%;left:0;opacity:0.6;position:absolute;width:100%}.topstories .a_block .txt_holder .timestamp, .topstories .a_block .txt_holder
.badge{border:0
none;color:#DDD;font-size:10px;line-height:20px;padding:0
10px;position:absolute;text-transform:uppercase;top: -20px}.topstories .a_block .txt_holder .timestamp .txts, .topstories .a_block .txt_holder .badge
.txts{font-family:georgia,serif;position:relative;z-index:10}.topstories .a_block .txt_holder .timestamp .txts .smaller, .topstories .a_block .txt_holder .badge .txts
.smaller{font-size:9px}.topstories .a_block .txt_holder .timestamp
.bg{background:none repeat scroll 0 0 #49853E;border:0
none;bottom:0;height:100%;left:0;opacity:0.6;position:absolute;width:100%}.topstories
.a_block_lg{height:150px;width:400px}.topstories .a_block_lg
p{width:380px}.topstories
.a_block_md{height:150px;width:280px}.topstories .a_block_md
p{width:260px}.topstories
.a_block_sm{height:150px;width:226px}.topstories .a_block_sm
p{width:206px}.topstories
.a_block_more{height:80px;width:226px}.topstories .a_block_sm
p{width:206px}

.topstories .a_block:first-child,.topstories .a_block:nth-child(2) {
width: 49.2%;
float:left;
}
.topstories .a_block:first-child img,
.topstories .a_block:nth-child(2) img,.topstories .a_block:nth-child(3) img,
.topstories .a_block:nth-child(4) img,.topstories .a_block:nth-child(5) img
{
width: 100%;
}
.topstories .a_block:nth-child(3),
.topstories .a_block:nth-child(4),
.topstories .a_block:nth-child(5)
{
width: 32.8%;
float:left;
}

@media (max-width:410px)
{
.Responsive .topstories .a_block:nth-child(3),
.topstories .a_block:nth-child(4),
.topstories .a_block:nth-child(5)
{
    width: 100%;
    float: left;
}
}

Save lại là ok.

Nguồn: SXF​

 

[hoangmai1119]

Code này bị lỗi là không lấy được bài viết mới nhất để hiện trên slide bạn ơi

 

[TD2308]

có code slide cho porta 2 không bác?