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

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

Xem demo: LIVE DEMO

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://tranphucminh.blogspot.com/"; //thay đổi thành địa chỉ URL blog của bạn

</script>
<script src="http://tranphucminh.110mb.com/Z_recent_post.js11.txt" type="text/javascript"></script>

Xin chào các bạn ghé thăm trang Trần Phúc Minh, mong các bạn có nhận xét góp ý cho trang này