Đăng Ký


avatar
Admin
Quản Trị Viên
Bài Viết : 45
on 18.11.16 21:39
Admin - Quản Trị Viên
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

Coppy vui lòng nhớ ghi nguồn Zone-FM nhé

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

avatar
Thànhkent
Quản Trị Viên
Bài Viết : 92
on 20.11.16 15:30
Thànhkent - Quản Trị Viên
Đẹp

0
avatar
cloudy
Thành Viên
Bài Viết : 1
on 20.11.16 16:40
cloudy - Thành Viên
Ad nói rõ hơn phần này được không? mình k biết làm sao
Lưu ý : ở trong Code có đoạn 

Code:Chọn Nội Dung
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é .

0
avatar
Thànhkent
Quản Trị Viên
Bài Viết : 92
on 20.11.16 20:34
Thànhkent - Quản Trị Viên
@cloudy đã viết:Ad nói rõ hơn phần này được không? mình k biết làm sao
Lưu ý : ở trong Code có đoạn 

Code:Chọn Nội Dung
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é .
Là ở trong Viewtopic_body của bạn đấy - phần nội dung tin nhắn được nằm trong thẻ nào thì thay class phần tử trong thẻ đấy cho trùng với code.
Nếu bạn không hiểu thì send code Viewtopic_body của bạn lên đây còn nếu dùng Punbb thì khả năng là sẽ không cần thay

0

Sponsored content
Sponsored content -


Hãy Đăng Nhập Để Gửi Bình Luận - Nếu Chưa Có Tài Khoản Đăng Ký - Click Tại Đây


 

© 2016 Spiderum Themes Cover Forumotion By @Thànhkent