Tiện ích RECENT POSTS đẹp dạng ZingNews

( 24ahz.com) - 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

Xem demo : LIVE DEMO

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 

anh3ngơ thực hiện và cóp nhặt từ Fandung.com

Nguồn : vnblognet

Nếu bạn gặp khó khăn về ngoại ngữ hãy coppy tên try cập ( link ) của trang hoặc đoạn văn bản cần dịch dán vào trang Google dich . Xin cảm ơn các bạn đã ủng hộ chúng tôi !