Tạo portal HotNews - TopStories giống Tinh Tế

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
Tạo portal HotNews - TopStories giống Tinh Tế

Đầu tiên các bạn tạo 1 templates có tên EWRblock_RecentFeatures và copy code bên dưới vào
Mã:
<xen:require css="EWRblock_RecentFeatures.css" />
<xen:require js="js/brivium/jquery.resizecrop.js" />
<script type="text/javascript">
    $(document).ready(function(){
    $('.block_img_1').resizecrop({
      width:420,
      height:150,
      vertical:"top"
    });
$('.block_img_2').resizecrop({
      width:319,
      height:150,
      vertical:"top"
    });
$('.block_img_3').resizecrop({
      width:247,
      height:150,
      vertical:"top"
    });
$('.block_img_4').resizecrop({
      width:247,
      height:150,
      vertical:"top"
    });
$('.block_img_5').resizecrop({
      width:246,
      height:150,
      vertical:"top"
    });
  });
</script>


<div class="section" style="margin: 0;">
    <div id="recentSlider">
        <div class="topstories" id="topstories">
            <div class="grid_holder">
 
        <xen:foreach loop="$RecentFeatures" value="$news" i="$i">
            <a class="a_block_first a_block a_block_{$i}" href="{xen:link threads, $news}"> <img src="{xen:link attachments, $news}" class="block_img_{$i}" />
                    <div class="txt_holder">
                        <p> <span class="txts">{xen:helper wordtrim, $news.title, {$option.trimtitle}}</span> <span class="bg"></span> </p>
                        <div class="timestamp"> <span class="txts">{xen:datetime $news.promote_date}</span> <span class="bg"></span> </div>
                    </div>
            </a>                              
        </xen:foreach>
            </div>
        </div>
    </div>
</div>

Tiếp theo tạo 1 Templates có tên EWRblock_RecentFeatures.css và copy phần css bên dưới vào nhé.
Mã:
.topstories {
   width: 743px;
   padding-bottom: 20px;
   min-width: 300px;
   height: 300px;
}

.topstories div, p {
   margin: 0;
   padding: 0;
}

.topstories .a_block_1 {
   width: 420px;
   height: 150px;
}

.topstories .a_block_2 {
   width: 319px;
   height: 150px;
}

.topstories .a_block_3 {
   width: 247px;
   height: 150px;
}

.topstories .a_block_4 {
   width: 247px;
   height: 150px;
}

.topstories .a_block_5 {
   width: 246px;
   height: 150px;
}


.topstories .a_block_first {
   margin-left: 0px;
}

.topstories .a_block {
   float: left;
   display: inline;
   position: relative;
   margin-left: 1px;
   margin-bottom: 1px;
   text-decoration: none;
}

.topstories .a_block img {
   float: left;
   display: inline;
}

.topstories .a_block .txt_holder {
   position: absolute;
   bottom: 0;
   left: 0;
   cursor: pointer;
   -background: #100502;
}

.topstories .a_block .txt_holder p {
   font-family: Arial,Helvetica,sans-serif;
   font-size: 15px;
   line-height: 16px;
   text-decoration: none;
   color: white;
   padding: 8px 10px;
   position: relative;
}

.topstories .a_block .txt_holder p .txts {
   position: relative;
   z-index: 10;
}

.topstories .a_block .txt_holder p .bg {
   position: absolute;
   width: 100%;
   height: 100%;
   bottom: 0;
   left: 0;
   background: #003350;
   filter: alpha(opacity=60);
   -moz-opacity: 0.6;
   opacity: 0.6;
   -display: none;
   border: 0;
}

.topstories .a_block .txt_holder .timestamp, .topstories .a_block .txt_holder .badge {
   position: absolute;
   top: -20px;
   -background: #49853e;
   color: #DDD;
   font-size: 10px;
   line-height: 20px;
   padding: 0 10px;
   text-transform: uppercase;
   border: 0;
}

.topstories .a_block .txt_holder .timestamp .txts, .topstories .a_block .txt_holder .badge .txts {
   position: relative;
   z-index: 10;
   font-family: georgia,serif;
}

Inherited from div.timestamp
   .topstories .a_block .txt_holder .timestamp, .topstories .a_block .txt_holder .badge {
   color: #DDD;
   font-size: 10px;
   line-height: 20px;
   text-transform: uppercase;
}

Inherited from div.txt_holder
   .topstories .a_block .txt_holder {
   cursor: pointer;
}

.topstories .a_block .txt_holder .timestamp .bg {
   position: absolute;
   width: 100%;
   height: 100%;
   bottom: 0;
   left: 0;
   background: #49853E;
   filter: alpha(opacity=60);
   -moz-opacity: 0.60;
   opacity: 0.60;
   -display: none;
   border: 0;
}

Sau đó tải file blocks bên dưới file đính kèm về mày rùi vào phần blocks của Xenportal import file đó lên. Tiếp theo file RecentFeatures.php upload lên hosting của bạn theo đường dẫn
Mã:
/library/EWRporta/Block

Và vào phần cài đặt blocks phần Slide Limit đặt là 5 nhé còn những phần kia các bạn đặt các ký tự sao cho phù hợp với style của mình thì thôi.

demo.png

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


Nguồn: mamcongnghe.com​
 
AD thử test block này chưa? Hiển thị tốt chứ?
Thấy trong code có phần
<xen:require js="js/brivium/jquery.resizecrop.js" />
File này hình như cần dùng brivium nữa mới có nhỉ?
 
lúc leech về mình không có cài portal nên không test được @@, với lại do nguồn cũng tin cậy nên mình không test luôn ^^
 
Back
Top