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 : https://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
Lưu ý : ở trong Code có đoạn
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
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 : https://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