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

PVS

Super Moderator
Thành viên BQT
Code hoặc hướng dẫn này được sử dụng trên phiên bản Xenforo cũ đã quá hạn sử dụng. Bạn hãy click để tìm bản mới hơn
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​
 
cái gì cũng phải từ từ :)), trước có mấy cái rồi đó :)) haha
 
Back
Top