Hướng dẫn tạo Xenporta tin tức giống Genk

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,828
Được Like
12,687
Hướng dẫn tạo Xenporta tin tức giống Genk

Xenporta-tin-tuc-giong-Genk.jpg

Copy đoạn code dưới thay toàn bộ vào EWRblock_RecentNews :
Mã:
<xen:require css="message_user_info.css" />
<xen:require css="bb_code.css" />
<xen:require css="EWRblock_RecentNews.css" />


<div class="newsother mt10">

    <ul id="tabhot"><li id="tab_all" class="first titleactive"><a>Tin mới</a></li><li id="tab_hot" class=""><a>Tin hot</a></li></ul>
</div>
<div class="w690 block1 clearfix">

    <xen:foreach loop="$RecentNews" value="$news" i="$i">
      <xen:if is="{$i}%2!==0">

    <div class="list-news fl pt10 ">
        <div class="list-news-img fl mr30 mt10">
      <xen:if is="{$news.promote_icon} != 'disabled'">
      <xen:if hascontent="true">
        <xen:contentcheck>
        <xen:if is="{$news.attach}">
          <a title="{$news.title}" href="{xen:link threads, $news}"><img src="http://res.cloudinary.com/tint/image/fetch/w_230,h_180,c_thumb/http://vnxf.vn/{$news.attach.thumbnailUrl}" title="{$news.title}" alt="{$news.title}" width="230" height="180"/></a>
        <xen:elseif is="{$news.medio}" />
          <div style="background: url('{xen:helper medio, $news.medio}') no-repeat; width:345px; height:300px;">
            <a href="{xen:link 'full: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 title="{$news.title}" href="{xen:link threads, $news}"><img src="http://res.cloudinary.com/tint/image/fetch/w_230,h_180,c_thumb/{$news.image}" title="{$news.title}" alt="{$news.title}" width="230" height="180"/></a>
        <xen:else />
          <a title="{$news.title}" href="{xen:link threads, $news}"><img src="http://res.cloudinary.com/tint/image/fetch/w_230,h_180,c_thumb/http://www.fitmindsandbodies.com/wp-content/uploads/2012/06/newsletter.jpg" title="{$news.title}" alt="{$news.title}" width="230" height="180"/></a>
        </xen:if>
        </xen:contentcheck>
      </xen:if>
    </xen:if>
                        <h3><a href="{xen:link forums, $news}" title="{$news.node_title}" >{xen:helper snippet, {$news.node_title}, 13}</a></h3></div>
                                                <div class="list-news-status pt5 pr10"><span class="display"><a href="{xen:link forums, $news}" title="{$news.node_title}" >{$news.node_title}</a></span><h2><a href="{xen:link threads, $news}" title="{$news.title}">{$news.title}</a></h2><p class="list-news-status-p"><a href="{xen:link members, $news}" title="{$news.username}" class="username">{$news.username}</a> | <a href="{xen:link threads, $news}">{xen:time $news.post_date, 'absolute'}</a> | <a href="{xen:link threads/unread, $news}" class="iconcomment" rel="h{xen:link threads/unread, $news}">{xen:number $news.reply_count}</a></p><p>{xen:helper snippet, $news.message, 160}</p>
                                                    <div class="list-news-relation nodisplay">
                                                    <ul></ul></div>
                                                </div>
                                            </div>
           <xen:else/>
   
                                            <div class="list-news fl pt10 alternative">
                                                <div class="list-news-img fl mr30 mt10">
                                                      <xen:if is="{$news.promote_icon} != 'disabled'">
      <xen:if hascontent="true">
        <xen:contentcheck>
        <xen:if is="{$news.attach}">
          <a title="{$news.title}" href="{xen:link threads, $news}"><img src="http://res.cloudinary.com/tint/image/fetch/w_230,h_180,c_thumb/http://vnxf.vn/{$news.attach.thumbnailUrl}" title="{$news.title}" alt="{$news.title}" width="230" height="180"/></a>
        <xen:elseif is="{$news.medio}" />
          <div style="background: url('{xen:helper medio, $news.medio}') no-repeat; width:345px; height:300px;">
            <a href="{xen:link 'full: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 title="{$news.title}" href="{xen:link threads, $news}"><img src="http://res.cloudinary.com/tint/image/fetch/w_230,h_180,c_thumb/{$news.image}" title="{$news.title}" alt="{$news.title}" width="230" height="180"/></a>
        <xen:else />
          <a title="{$news.title}" href="{xen:link threads, $news}"><img src="http://res.cloudinary.com/tint/image/fetch/w_230,h_180,c_thumb/http://www.fitmindsandbodies.com/wp-content/uploads/2012/06/newsletter.jpg" title="{$news.title}" alt="{$news.title}" width="230" height="180"/></a>
        </xen:if>
        </xen:contentcheck>
      </xen:if>
    </xen:if>
                                                </a><h3><a href="{xen:link forums, $news}" title="{$news.node_title}" >{xen:helper snippet, {$news.node_title}, 13}</a></h3></div>
                                                <div class="list-news-status pt5 pr10"><span class="display"><a href="{xen:link forums, $news}" title="{$news.node_title}" >{$news.node_title}</a></span><h2><a href="{xen:link threads, $news}" title="{$news.title}">{$news.title}</a></h2><p class="list-news-status-p"><a href="{xen:link members, $news}" title="{$news.username}" class="username">{$news.username}</a> | <a href="{xen:link threads, $news}">{xen:time $news.post_date, 'absolute'}</a> | <a href="{xen:link threads/unread, $news}" class="iconcomment" rel="{xen:link threads/unread, $news}">{xen:number $news.reply_count}</a></p><p>{xen:helper snippet, $news.message, 160}</p>
                                                    <div class="list-news-relation nodisplay">
                                                    <ul></ul></div>
                                                </div>
                                            </div>
           </xen:if>                         
    </xen:foreach>
</div>


<div class="w690 block2 clearfix">

    <xen:foreach loop="$RecentNews" value="$news" i="$i">
    <xen:if is="{$i}>10">
      <xen:if is="{$i}%2!==0">
    <div class="list-news fl pt10 ">
        <div class="list-news-img fl mr30 mt10">
      <xen:if is="{$news.promote_icon} != 'disabled'">
      <xen:if hascontent="true">
        <xen:contentcheck>
        <xen:if is="{$news.attach}">
          <a title="{$news.title}" href="{xen:link threads, $news}"><img src="http://res.cloudinary.com/tint/image/fetch/w_230,h_180,c_thumb/http://vnxf.vn/{$news.attach.thumbnailUrl}" title="{$news.title}" alt="{$news.title}" width="230" height="180"/></a>
        <xen:elseif is="{$news.medio}" />
          <div style="background: url('{xen:helper medio, $news.medio}') no-repeat; width:345px; height:300px;">
            <a href="{xen:link 'full: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 title="{$news.title}" href="{xen:link threads, $news}"><img src="http://res.cloudinary.com/tint/image/fetch/w_230,h_180,c_thumb/{$news.image}" title="{$news.title}" alt="{$news.title}" width="230" height="180"/></a>
        <xen:else />
          <a title="{$news.title}" href="{xen:link threads, $news}"><img src="http://res.cloudinary.com/tint/image/fetch/w_230,h_180,c_thumb/http://www.fitmindsandbodies.com/wp-content/uploads/2012/06/newsletter.jpg" title="{$news.title}" alt="{$news.title}" width="230" height="180"/></a>
        </xen:if>
        </xen:contentcheck>
      </xen:if>
    </xen:if>
                 <h3><a href="{xen:link forums, $news}" title="{$news.node_title}" >{xen:helper snippet, {$news.node_title}, 13}</a></h3></div>
                                                <div class="list-news-status pt5 pr10"><span class="display"><a href="{xen:link forums, $news}" title="{$news.node_title}" >{$news.node_title}</a></span><h2><a href="{xen:link threads, $news}" title="{$news.title}">{$news.title}</a></h2><p class="list-news-status-p"><a href="{xen:link members, $news}" title="{$news.username}" class="username">{$news.username}</a> | <a href="{xen:link threads, $news}">{xen:time $news.post_date, 'absolute'}</a> | <a href="{xen:link threads/unread, $news}" class="iconcomment" rel="h{xen:link threads/unread, $news}">{xen:number $news.reply_count}</a></p><p>{xen:helper snippet, $news.message, 160}</p>
                                                    <div class="list-news-relation nodisplay">
                                                    <ul></ul></div>
                                                </div>
                                            </div>
           <xen:else/>
   
                                            <div class="list-news fl pt10 alternative">
                                                <div class="list-news-img fl mr30 mt10">
                                                      <xen:if is="{$news.promote_icon} != 'disabled'">
      <xen:if hascontent="true">
        <xen:contentcheck>
        <xen:if is="{$news.attach}">
          <a title="{$news.title}" href="{xen:link threads, $news}"><img src="http://res.cloudinary.com/tint/image/fetch/w_230,h_180,c_thumb/http://vnxf.vn/{$news.attach.thumbnailUrl}" title="{$news.title}" alt="{$news.title}" width="230" height="180"/></a>
        <xen:elseif is="{$news.medio}" />
          <div style="background: url('{xen:helper medio, $news.medio}') no-repeat; width:345px; height:300px;">
            <a href="{xen:link 'full: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 title="{$news.title}" href="{xen:link threads, $news}"><img src="http://res.cloudinary.com/tint/image/fetch/w_230,h_180,c_thumb/{$news.image}" title="{$news.title}" alt="{$news.title}" width="230" height="180"/></a>
        <xen:else />
          <a title="{$news.title}" href="{xen:link threads, $news}"><img src="http://res.cloudinary.com/tint/image/fetch/w_230,h_180,c_thumb/http://www.fitmindsandbodies.com/wp-content/uploads/2012/06/newsletter.jpg" title="{$news.title}" alt="{$news.title}" width="230" height="180"/></a>
        </xen:if>
        </xen:contentcheck>
      </xen:if>
    </xen:if>
                                                </a><h3><a href="{xen:link forums, $news}" title="{$news.node_title}" >{xen:helper snippet, {$news.node_title}, 13}</a></h3></div>
                                                <div class="list-news-status pt5 pr10"><span class="display"><a href="{xen:link forums, $news}" title="{$news.node_title}" >{$news.node_title}</a></span><h2><a href="{xen:link threads, $news}" title="{$news.title}">{$news.title}</a></h2><p class="list-news-status-p"><a href="{xen:link members, $news}" title="{$news.username}" class="username">{$news.username}</a> | <a href="{xen:link threads, $news}">{xen:time $news.post_date, 'absolute'}</a> | <a href="{xen:link threads/unread, $news}" class="iconcomment" rel="{xen:link threads/unread, $news}">{xen:number $news.reply_count}</a></p><p>{xen:helper snippet, $news.message, 160}</p>
                                                    <div class="list-news-relation nodisplay">
                                                    <ul></ul></div>
                                                </div>
                                            </div>
                  </xen:if>
           </xen:if>                         
    </xen:foreach>
</div>


<script type="text/javascript">
$(document).ready(function() {
    var tabActive = $.getCookie('tabActive');
    if(tabActive==null) { $.setCookie('tabActive', 'li#tab_all'); tabActive = 'li#tab_hot';}
    $(tabActive).addClass('titleactive');
    if(tabActive =='li#tab_all')
    {
        $('.block2').addClass('hide')
        $('.block1').removeClass('hide')
        $('li#tab_all').addClass('titleactive')
        $('li#tab_hot').removeClass('titleactive')
    }
    if(tabActive =='li#tab_hot')
    {
        $('.block2').removeClass('hide')
        $('.block1').addClass('hide')
        $('li#tab_hot').addClass('titleactive')
        $('li#tab_all').removeClass('titleactive')
        $.setCookie('tabActive', 'li#tab_hot');
    }

});
$('li#tab_all').click(function(){
    $('.block2').addClass('hide')
    $('.block1').removeClass('hide')
    $('li#tab_all').addClass('titleactive')
    $('li#tab_hot').removeClass('titleactive')
    $.setCookie('tabActive', 'li#tab_all');
});
$('li#tab_hot').click(function(){
    $('.block1').addClass('hide')
    $('.block2').removeClass('hide')
    $('li#tab_hot').addClass('titleactive')
    $('li#tab_all').removeClass('titleactive')
    $.setCookie('tabActive', 'li#tab_hot');
});
$('.tab3').click(function(){
    $('#Block3').removeClass('selected')
    $('#Block3').addClass('hide')
    $('#Block4').removeClass('selected')
    $('#Block5').addClass('selected')
    $('.tab3').addClass('active')
    $('.tab1').removeClass('active')
    $('.tab1 span').removeClass('active')
    $('.tab2').removeClass('active')
    $.setCookie('tabActive', '.tab3');

});
</script>

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

Đừng quên thay thành tên miền của bạn nhé!

và thay toàn bộ trong EWRblock_RecentNews.css :
Mã:
.hide {
display: none;
}
a:hover {
text-decoration: none !important;
}
#tabhot li a {
cursor: pointer;
}

.topRightBlocks .widget h3 {
display: none;
}

#hot-focus-2 .hot-topic-header-2 .hot-topic-title-header-2 h3, .product-focus .hot-topic-header-2 .hot-topic-title-header-2 h3 {
display: block !important;
}

Lưu ý: Các bạn phải vào cài cho RecenNews lấy ít nhất là 20 tin nhé!

Tải file css ở file đính kèm cho lên thư mục chính hosting và bỏ code sau vào giữa thẻ <head></head> trong PAGE_CONTAINER
Mã:
<link type="text/css" rel="stylesheet" href="genk.min.1.20.css">

Chúc các bạn thành công.


Nguồn: forumit24h.net​
 

Đính kèm

  • genk.min.1.20.zip
    14.7 KB · Lượt xem: 74

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,828
Được Like
12,687
cái gì cũng phải từ từ :)), trước có mấy cái rồi đó :)) haha
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,828
Được Like
12,687
lại nữa :)), cẩn thận cho ăn thẻ đấy :v
 

nghueyn

Private
Tham gia
17/10/2015
Bài viết
2
Được Like
0
cáy này dùng add gì đễ add vào vậy file gì vậy
 

tuannt

MasterCorporal
Tham gia
07/04/2015
Bài viết
251
Được Like
140
ý bác nói thay tên miền j trong đoạn code trên để nó chạy ak
 

tuannt

MasterCorporal
Tham gia
07/04/2015
Bài viết
251
Được Like
140
@PVS ok bác, còn tab tin hot bấm nó ko hiển thị nhỉ
 

lacluoc

Corporal
Tham gia
03/11/2015
Bài viết
146
Được Like
71
cái này đẹp quá mà không responsive, @PVS hướng dẫn mình làm với
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,828
Được Like
12,687
làm gì bác ^^
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,828
Được Like
12,687
mình chịu vụ responsive :))
 

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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom