"Hiển thị bài viết giống trang news.zing.vn"

(Traidatmui.com) - Mình đã tham khảo thủ thuật từ Blog Fandung thấy thủ thuật khá hay nên mình xin chia sẽ cùng các bạn. Đó là thủ thuật hiẻn thị bài viết giống như trang news.zing.vn. Thủ thuật này sẽ hiển thị dạng 3 cột khác nhau. Cột đầu tiên sẽ hiển thị bài viết mới nhất dạng tóm tắt ở một bên có ảnh thumb ở phía trên; cột kế tiếp hiển thị ảnh thumb và tiêu đề bài viết trước đó và cuối cùng là tiện ích các bài viết khác có liên quan (nằm bên phải). Để hiểu và thấy rỏ hơn thủ thuật này bạn hãy xem hình ảnh bên dưới.

Hình ảnh minh họa ( news.zing.vn)
☼ Sau đây là các bước tiến hành

1. Đăng nhập vào tài khoản Blogspot
2. Vào bố cục thêm phần tử HTML/Javascript
3. Thêm code bên dưới vào phần tử trên
<style type="text/css">
*{ padding: 0;
margin: 0;
font-family: Arial;
font-size: 12px;
}

#index_news{
width: 525px;
margin: 5px;
}

#main_content{
width: 525px;
float: left;
overflow: hidden;
}

#main_content .top_news{
width: 525px;
margin-bottom: 10px;
}
#main_content .top1_news{
width: 234px; /*Độ rộng cột đầu tiên*/
float: left;
margin-top: 8px;
}
#main_content .top1_news .top1_news_image img{
border: 1px solid #CCC;
padding: 1px;
width:230px; /*độ rộng của ảnh ở cột đầu tiên*/
height:155px; /*Chiều cao của ảnh ở cột đầu tiên*/
}
#main_content .top1_news .top1_news_title{
padding: 8px 0;
text-align: justify;
}
#main_content .top1_news .top1_news_title a{
font-size: 16px;
color: #002392; /*Màu tiêu đề của bài viết có nội dung tóm tắt*/
text-decoration: none;
}
#main_content .top1_news .top1_news_title a:hover{
text-decoration: underline;
color: #0066ff; /*Màu tiêu đề của bài viết có nội dung tóm tắt khi rê chuột*/
}
#main_content .top1_news p{
text-align: justify;
}
#main_content .top1_news p a{
padding-left: 4px;
}
#main_content .top1_news p img, #main_content .top2_news img{
vertical-align: bottom;
}
#main_content .top2_news{
width: 95px; /*Độ rộng cột thứ 2*/
float: left;
margin-left: 8px;
margin-top: 12px;
padding-right: 6px;
}
#main_content .top2_news .top2_news_image{
background: url(http://farm3.static.flickr.com/2509/3847739522_6980c393a3_o.gif) no-repeat;
width: 90px; /*độ rộng của ảnh ở cột 2*/
height: 65px; /*chiều cao của ảnh ở cột 2*/
padding: 4px;
}
.top2_news_image img {
width:90px; /*độ rộng của ảnh ở cột 2*/
height:65px; /*chiều cao của ảnh ở cột 2*/
}

#main_content .top2_news h2{
padding-top: 2px;
}
#main_content .top2_news h2 a{
color: #000033;
text-decoration: none;
}
#main_content .top2_news h2 a:hover{
text-decoration: underline;
color: #ff0000;}

#main_content .top2_news .dot3x1{
background: url(http://farm4.static.flickr.com/3574/3847739556_d334d7aa61_o.gif) repeat-x center
center;
margin: 10px 0;
height: 1px;
font-size: 1px;
}
#main_content .topo_news{
width: 174px; /*Độ rộng cột thứ 3*/
float: right;
background: url(http://farm4.static.flickr.com/3508/3846949497_b0f76c94df_o.gif) no-repeat;
padding: 5px 1px 0 1px;

}
#main_content .topo_news .topo_news_title{
background: url(http://farm3.static.flickr.com/2598/3846949449_4c4b03d2fa_o.gif) no-repeat;
width: 160px;
height: 22px;
color: #FFF;
padding: 4px 0 0 14px;
font-weight: bold;
font-size: 11px;
}
#main_content .topo_news ul li{
background: url(http://farm3.static.flickr.com/2532/3847739582_8f41366c2f_o.gif) no-repeat 8px 10px;
padding: 2px 2px 2px 20px;
list-style: none;
}
#main_content .topo_news ul li a{
color: #002392;
font-weight: bold;
font-size: 11px;
line-height: 1.5em;
text-decoration:none;
}
#main_content .topo_news ul li a:hover {
color: #ff0033;
text-decoration: underline;}
</style>

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
imgnew = "http://farm4.static.flickr.com/3438/3847739416_077831a5c5_o.gif";

showRandomImg = true;

aBold = false;
summaryPost = 147; // Số kí tự hiển thị cho phần tóm tắt bài viết
numposts = 10; // số bài viết sẽ hiển thị (Gồm tất cả bài viết ở 3 cột)
topoTitle = "Bài viết khác";
label = "Advanced blogger"; // Nhãn bài viết hiển thị (nếu hiển thị tất cả bài viết thì không cần gõ nhãn)
home_page = "http://www.traidatmui.com/"; //thay đổi thành địa chỉ URL blog của bạn

</script>
<script src="http://data-traidatmui.appspot.com/scripts/Z_recent_label.js" type="text/javascript"></script>

Chỉnh code: Bạn hãy dựa vào phần chú thích trong code để chỉnh sửa lại cho phù hợp với blog mình rồi save lại.

Nếu muốn hiển thị tất cả bài viết trên blog tức không theo từng nhãn riêng, nghĩa là các bài viết sẽ hiển thị theo thứ tự thời gian không phân biệt nhãn, hiển thị từ bài mới nhất trở về sau cho đến khi đủ bài viết mà bạn giới hạn trong code. Để hiển thị như vừa nêu trên thì bạn hãy thay link Javascript (http://data-traidatmui.appspot.com/scripts/Z_recent_label.js) ở trên thành code bên dưới.
http://data-traidatmui.appspot.com/scripts/Z_recent_post.js

Chúc bạn thành công
Tham khảo từ fandung.com

Xem khác cùng chủ đề

8 nhận xét | Viết lời bình

8/22/2010 09:52:00 SA Trả lời

Thủ thuật JS thì quá tuyệt, mà xung đột chiều quá Đinh ơi .có online ghé qua cái blog của mình chỉnh giúp cho mình lỗi font hiển thị ở thủ thuật này nha, Cám ơn Đinh
http://blogiphoneusa.blogspot.com

Admin
8/23/2010 02:14:00 SA Trả lời

Mình có ghé sang thăm blog của bạn nhưng mình không hiểu rỏ bạn muốn nói lỗi font chữ là như thế nào. Mình thấy nó hoạt động tốt đấy chứ. nếu có lỗi thì bạn hãy nói rỏ là lỗi gì để mình xem nhé.

Thân chào

9/23/2010 07:21:00 SA Trả lời

Mình post y nguyên code của bạn vào thì ok. Nhưng sao khi thay địa chỉ URL của web mình vào thì lại ko hiện lên gì cả? Địa chỉ URL của mình là "http://www.hoangquynhvu.tk/blog". Web của mình làm trên Dmon.com

Admin
9/23/2010 08:21:00 SA Trả lời

do blog của bạn thiết kế trên nền Dmon.com nên cấu trúc trang khác với blogger. vì vậy file script không phân tích được nên không hiển thị bài viết của bạn được bạn ah.

Thân chào!

11/28/2011 01:20:00 SA Trả lời

Chào bạn;
Trước hết cám ơn bạn đã chia sẻ thủ thuật hay.
Bạn cho mình hỏi bây giờ mình chỉ cần 2 cột thôi bỏ cột ở giữa đi thì vào đâu chỉnh sửa. Bạn giúp mình nhé.
Cám ơn bạn

11/28/2011 02:02:00 SA Trả lời

Chào bạn.
Mình làm giống như bạn hướng dân nhưng sao không hiển thị ảnh ở cột nào cả? Và hình bên cột 3 "các bài viết khác" nó không hết được phần chữ. Bạn xem chỉnh lại giúp mình nhé.
Blog của mình:http://sangnguyenms821087.blogspot.com
Cảm ơn bạn.

Admin
11/28/2011 03:27:00 SA Trả lời

@ sangnguyenMS: Em xin trả lời câu thứ nhất là nếu anh muốn bỏ đi cột ảnh thumb ở giữa thì anh cần chỉnh sửa file JS lại, tức là Z_recent_label.js, sau đó mở file lên và xóa đi dòng code bên dưới
[code]i==1) {
var trtd = '<div class="top2_news"><div class="top2_news_image"><img src="'+img[i]+'"></div><h2><a title="'+posttitle+'" href="'+posturl+'">'+posttitle+' </a></h2><div class="dot3x1"></div>';

document.write(trtd);
}

if (i==2) {
var trtd = '<div class="top2_news_image"><img src="'+img[i]+'"></div><h2><a title="'+posttitle+'" href="'+posturl+'"> '+posttitle+'</a></h2></div>';

document.write(trtd);
}[/code]
Chú ý: sau khi xóa code trên thì cần phải đánh số lại ở phần điều kiện if (i==0), (i==1), (i==2)... theo thứ tự.

Câu thứ 2 là em đã xem qua ảnh thumb vẫn hiển thị bình thường, anh có thể chỉnh sửa độ rộng và chiều cao của ảnh theo chú thích trong CSS ở trên. Việc tiêu đề của cột thứ 3 không ngắt dòng được có thể do template của anh thiếu thuộc tính word-wrap: break-word; anh có thể thêm nó vào phần #main hoặc phần chứa tiện ích.

11/30/2011 09:19:00 CH Trả lời

anh ơi ko biêt sao trên trình duyetj fifox thủ thuật này tự nhiên k hiển thị nữa, chỉ hiển thị trên goole chrmone và IE, anh xem khắc phục thế nào giúp em với: http://www.luubuttuoixanh.com/

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang