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

[PVS]

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

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

.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

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

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

Nguồn: mamcongnghe.com​

 

[lenamem1]

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

 

[lenamem1]

@PVS AD hỗ trợ đoạn này giúp mình với. :3

 

[PVS]

cái này mình leech về nên cũng không rõ lắm @@

 

[lenamem1]

Phần này khi leech về Ad test thử chạy được chứ?

 

[PVS]

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

 

[lenamem1]

tks Ad nhé

 

[lilocrazy]

Mình dùng EWRporta2 có xài được không

 

[PVS]

không bạn

 

[hayatuan]

bó tay ad luôn

 

[PVS]

???