Tiện ích RECENT POSTS đẹp dạng ZingNews
Wednesday, 30 December 2009
Tiện ích mới – style mới về RECENT POSTS của 
[FD's BlOg] - theo phong cách giống trang news.zing.vn . Trong bài viết này anh3ngơ giới thiệu với các bạn cách thực hiện theo hướng dẫn của [FD's BlOg] để hiển thị tabnews trên blogspot.
Anh3ngơ giới thiệu bài khác cùng chủ đề:
>> Tạo “Recent Post” từng Label cho HomePage
>> Update “Recent Post” Label cho HomePage
>> Tạo Tab News chuyên nghiệp giống VNEXPRESS
Hình ảnh minh họa :
- Ở style này có thêm 1 điểm khác với các style cũ, là mình có chèn phần
"Mô tả bài viết (summaryPost)" vào các link ở cột
topo_news dưới dạng title. Các bạn có thể xem hình bên dưới :
☼ Các bước thực hiện thủ thuật :
1. Vào
bố cục
2. Vào
chỉnh sửa code HTML
3. Chèn đoạn
code CSS bên dưới vào trước thẻ đóng
</head> (hoặc có thể chèn thẳng vào widget HTML/javascript chung với code chính của thủ thuật)
<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; float: left; margin-top: 8px; } #main_content .top1_news .top1_news_image img { border: 1px solid #CCC; padding: 1px; width:230px; height:165px; } #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; text-decoration: none; } #main_content .top1_news .top1_news_title a:hover { text-decoration: underline; } #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; float: left; margin-left: 8px; margin-top: 14px; 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; height: 65px; padding: 4px; } .top2_news_image img { width:90px; height:65px } #main_content .top2_news h2 { padding-top: 2px; } #main_content .top2_news h2 a { color: #002dbe; text-decoration: none; } #main_content .top2_news h2 a:hover { text-decoration: underline; } #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; 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 {text-decoration: underline;} </style>
-
Code màu cam : là độ rộng của ảnh lớn nhất -
Code màu đỏ : là độ rộng của 2 ảnh nhỏ hơn -
Code màu xanh : là độ rộng của các cột của tiện ích (gồm 3 cột :
top1_news,
top2_news,
topo_news) - Xem hình minh họa bên dưới :
-
Lưu ý : thay đổi lại độ rộng của các cột để hiển thị tốt nhất trên blog của mình
(kể cả các ảnh nền). Code trên chỉ là code mẫu để các bạn tham khảo. Ở code mẫu này mình cũng đã resize lại tương đối phù hợp rồi (độ rộng
525px;)
4. Save template.
5. Tạo widget
HTML/javascript và dán code bên dưới vào :
<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;
// Phần summary post sẽ hiển thị numposts =
12;
// số bài viết sẽ hiển thị topoTitle = "BÀI VIẾT KHÁC"; label = "
Thu thuat";
// Nhãn cần hiển thị bài viết (nếu muốn hiển thị bài viết của cả blog thì không cần quan tâm dòng này) home_page =
http://www.vnpressnet.com/;
//thay đổi thành địa chỉ URL blog của bạn </script> <script src=
http://fandung.110mb.com/JS-files/z-recentposts/z-recent-label.js type="text/javascript"></script>
- 2 dòng
code màu đỏ bạn có thể thay đổi tùy thích
(xem hình minh họa bên dưới) 
☼ Để hiển thị các bài viết mới cho cả blog thì các bạn thay code bên dưới :
<script src="http://fandung.110mb.com/JS-files/z-recentposts/z-recent-label.js" type="text/javascript"></script>
thành code bên dưới:
<script src="http://fandung.110mb.com/JS-files/z-recentposts/z-recent-post.js" type="text/javascript"></script>
Chúc các bạn thành công.
Bản sao lưu file .JS nhằm giải quyết vấn đề nếu host 110mb bị lỗi bạn có thể post chúng lên 1 host free khác để sử dụng, để thực hiện bạn tham khảo bài viết
Upload file .js lên host free. File (1)
z-recent-label.js download tại đây (2)
z-recent-post.js download tại đây
Tags:
Breakingnews,
Khoi tao Blog,
Layout
[FD's BlOg] - theo phong cách giống trang news.zing.vn . Trong bài viết này anh3ngơ giới thiệu với các bạn cách thực hiện theo hướng dẫn của [FD's BlOg] để hiển thị tabnews trên blogspot.
☼ Để hiển thị các bài viết mới cho cả blog thì các bạn thay code bên dưới : 
Ý kiến bạn đọc [ 3 ]
Anh ơi, sao em làm y chang mà nó không hiện lên vậy @_@?
Up JS lên host rồi, chỉnh sửa xong xuôi hết luôn rồi... ra trang chính trắng bóc =="
trước khi làm mình có cần chia blog thành 3 cột khộng vậy bạn?
bác ơi mình làm đâu có được chắc là lỗi gì rồi ak
Ý kiến của bạn