trang chủ
Thứ Sáu, 30 tháng 11, 2012
Đối với những bạn lướt web nhiều chắc hẳn bạn đã từng vào trang tin247.com đọc tin và cũng đã thấy cách hiển thị bài viết trên trang đó. Trang web đó hiển thị bài đăng cho từng nhãn riêng và mỗi nhãn sẽ hiển thị một bài (dạng tóm tắt) và có thêm tiện ích bài viết liên quan trong cùng nhãn đó. Việc hiển thị bài viết như vậy chúng ta có thể ứng dụng nó vào trong blogspot. Mình xin chia sẽ cách để thực hiện thủ thuật này. DEMO
 |
| Ảnh minh họa |
>>>Bắt đầu thủ thuật.
Bước 1: Đăng nhập vào blog
Bước 2: Đi tới danh sách bài đăng (Nếu bạn đang quản lý từ 2 trang trở lên)
Bước 3: Chọn Bố Cục
Bước 4: Chọn thêm tiện ích => thêm HTML/Javacript, sau đó đoạn code dưới đây vào
<style> .mota{ position: relative; z-index: 0; text-decoration:none; } .mota a { color:#ff0000; } .mota:hover{ color:#ff0000; background-color: transparent; z-index: 50; } .mota span{ position: absolute; background: #eee; padding: 5px; left: -1000px; border: 1px solid #ccc; visibility: hidden; color:#000; text-decoration: none; } .mota span img{ border-width: 0; padding: 2px; } .mota:hover span{ padding:5px; visibility: visible; top: 20px; left:100px; width:250px; background:#ccc; text-align: justify; } .summerypost a { color:#ff0000; font-weight:bold; } .summerypost a:hover { color:#000066;} .summerypost { color:#000; font-family:arial;} .readm a{ color:#ff0000;} .readm a:hover{ color:#006633;} .repost{ color:#3366ff; font-family:arial;} .repost a{ color:#0066cc;} .repost a:hover{ color:#ff0000;} </style> <script language="JavaScript"> imgr = new Array(); imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif"; showRandomImg = true; tablewidth = 245; cellspacing = 1; borderColor = "#ff0000"; bgTD = ""; imgw = 130; // độ rộng của ảnh thumb imgh = 100; // chiều cao của ảnh thumb imgwidth = 60; imgheight = 60; fntsize = 12; //Cỡ chữ của các link bài viết liên quan trong cùng nhãn đó fontsize = 14; // Cỡ chữ của tiêu đề bài viết hiển thị dạng tóm tắt fontsizecm = 11; // Cỡ chữ của ngày đăng bài acolor = ""; titlecolor = ""; aBold = false; icon = ""; text = "Nhận xét"; showPostDate = true; //Nếu không muốn hiển thị ngày đăng bài bạn thay TRUE thành FALSE poston = "Ngày đăng :"; minisummaryPost= 200; // số kí tự bạn muốn hiển thị cho phần tóm tắt bài viết summaryPost = 350; // số kí tự hiển thị ở phần mô tả summaryFontsize = 12; //Cỡ chữ bài viết tóm tắt summaryColor = "#000"; icon2 = ""; numposts = 8; //số bài viết hiển thị trong phần bài viết liên quan label = "Advanced blogger"; // Thay thành tên nhãn bài bạn muốn hiển thị home_page = "http://www.traidatmui.com/"; //Thay thành địa chỉ blog của bạn </script> <script src="http://data-traidatmui.appspot.com/scripts/tin247_post.js" type="text/javascript"></script> <script src="http://data-traidatmui.appspot.com/scripts/tin247_related_post.js" type="text/javascript"></script>Cuối cùng bấm Lưu lại là xong.
Các bạn thấy ở thủ thuật trên có một nhược điểm đó là bài viết bị lặp lại, bài viết đầu tiên sẽ lặp lại ở phần link bài viết liệt kê bên dưới và một nhược điểm khác là sử dụng 2 file JS. Điều này sẽ phần nào ảnh hưởng tới độ load của trang blog của bạn. Để khắc phục 2 nhược điểm trên mình xin chia sẻ file JS của thủ thuật này để bạn sử dụng. File dưới đây đã khắc phục được lỗi trên tránh tình trạng lặp lại bài viết. Bạn chỉ việc thay 2 file JS ở trên thành code bên dưới là xong.
Code 1:
<script src="http://data-traidatmui.appspot.com/scripts/tin247post_fixed.js" type="text/javascript"></script>
Ngoài ra bạn muốn cho nó hiển thị toàn blog thì thay đoạn code 1 thành đoạn code 2 dưới đây:
Code 2
<script src="http://data-traidatmui.appspot.com/scripts/tin247allpost_fixed.js" type="text/javascript"></script>
Chúc bạn thành công!!!
