Share Trang Chủ Zone-FM Ver 2 Tự Cập Nhật

  Bài viết hay nhất1
Trang Chủ Zone-FM Ver 2 tự cập nhật bài viết dùng Feed để tải các bài viết mới có kèm ảnh theo bài viết .

Code thích hợp và khá đẹp cho các bạn làm Site Blog hay Post tin tức

Demo : http://zone-fm.forumvi.com/h1-page

Bước 1 : ACP -> Modules ->  HTML & JAVASCRIPT -> HTML pages management -> Create in advanced mode (HTML) Tạo 1 trang html mới .

Bước 2 : Tùy chọn .

- Title : Tùy thích
- Do you wish to use your forum header and footer ? : Có
- Use this page as homepage ? : Cái này là tùy các bạn nếu muốn chọn nó làm trang chủ thì chọn có còn nếu không muốn thì chọn không .

Bước 3 : Cho code bên dưới vào và lưu lại rồi tận hưởng kết quả nhé các bạn

Code:

<style>

.ssTime {
  margin-top:20px;
  color:#999;
  font-size:13px;
  font-weight:bold;
}

.ssTime span {
    margin-right: 10px;
    background: #f1f1f1;
    padding: 10px;
    border-radius: 3px;
    color: #999;
}

.ssTime a {
    background-color: #c0392b;
    padding: 9px;
    color: #fff !important;
    font-weight: bold;
    border-radius: 3px;
    float: right;
    margin-right: 10px;
    margin-top: -7px;
}

.ssTime a:hover {
  background-color:#333333;
}

.ssItem {
  height:140px;
  background:#fff;
  margin-bottom:20px;
  padding-top:10px;
}

.ssMoreinfo {
  margin-left:240px;
  margin-top:5px;
}

p.ssMota {
  line-height:1.2;
  font-size:15px;
  color:#999;
  overflow:hidden;
  margin-bottom:5px;
  height:55px;
}

p.ssMota img {display:none;}

.ssImage {
  float:left;
  margin-top:-35px;
}

.ssImage img {
  height:150px !important;
  width:230px !important;
  float:left;
  object-fit:cover;
}

.ssImage iframe {
display:none;
}

.ssCaption {
  margin-left:240px;
  overflow:hidden;
  font-size:20px;
  line-height:1.2;
  height:25px;
}

.ssCaption h2 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 99%;
    display: block;
    font-size: 20px;
    color: #5a5a5a;
}
</style>  <script>
  //<![CDATA[
$(function() {
  $.get("/feed/").done(function(a) {
    a = $(a);
    for (j = 0; j < a.find("item").length; j++) {
      var b = a.find("item:eq(" + j + ") guid").text(),
        c = a.find("item:eq(" + j + ") title").text(),
        d = a.find("item:eq(" + j + ") description").text(),
        e = a.find("item:eq(" + j + ") category").text(),
        f = a.find("item:eq(" + j + ") pubDate").text();
  $(".ssContent").append('<div class="ssItem" id="id' + j + '"><a href="' + b + '" title="' + c + '"><div class="ssCaption"><h2 class="post-title">' + c + '</h2></div><div class="ssImage"><img src="http://i.imgur.com/R54yVi3.jpg" alt=""></div></a><div class="ssMoreinfo"><p class="ssMota">' +
  d + '</p><p class="ssTime"><a href="' + b + '" title="' + c + '">Read More</a><span><i class="fa fa-folder-open"></i> ' + e + '</span><span><i class="fa fa-clock-o"></i> ' + f + "</span></p></div></div>");
      $("#id" + j + " .ssImage").load(b + ' .entry-content img:eq(0),.entry-content iframe:eq(0)')
    }
  })
}); //]]>
</script>
<div class="ssContent">
                                                                                      
 <div class="bang-tin">
                                                                                          
 <div class="grid_holder">
                                                                                                
 <div class="clear">
                                                                                      
 </div>
                                                                                          
 </div>
                                                                                      
 </div>
</div>

Lưu ý : ở trong Code có đoạn

Code:
' .entry-content img:eq(0),.entry-content iframe

Vác bạn thay entry-content cho trùng với phần tử ở Viewtopic_body hay Viewcomment_body của bạn để hiển thị được ảnh cho bài viết nhé.

Chúc các bạn thành công - Thànhkent - Nguồn Zone-FM
The author of this message was banned from the forum - See the message
  Bài viết hay nhất3

@an889 wrote:Trang chủ này chẳng có gì hay

không có gì hay là ý gì đây hở bạn, bạn làm được không mà lại nói thế còn thấy không hay chỗ nào thì góp ý cho @Thanhkent một tiếng để hoàn thiện hơn sản phẩm
  Bài viết hay nhất4

@an889 wrote:Trang chủ này chẳng có gì hay

Bạn thấy không hay thì bạn đừng dùng =]] tôi share cho ai thích thì dùng với lại củng có người xin tôi mới share nhé =]] tại sao lại ném đá ?
You cannot reply to topics in this forum