Tiện ích Recent Posts theo Label dạng list cho Blogspot

Với giao diện mặc định và những giao diện phổ thông của Blogspot thì phần chính trang Blog của bạn sẽ chỉ có 1 thành phần là Khung bài viết mà thôi. Điều này tạo cảm giác không linh hoạt cho những cư dân Multiply di dân qua Blogspot như mình. Vì thế, tùy biến giao diện Blogspot sao cho gần giống với Multiply nhất để tiện quản lý và thao tác là 1 trong những nhu cầu của cộng đồng tị nạn Multi. Hôm nay mình sẽ hướng dẫn các bạn 1 thủ thuật, để đem khung Notes trở lại Homepage blogspot giống Multi.

Cách làm là dùng 1 tiện ích Recent Posts cho Label "Notes" để hiển thị tiêu đề các bài đăng dạng quick note (chỉ có phần tiêu đề, không có nội dung) giống như các Note bên Multiply.

- Trước hết, tất cả những bài viết nào thuộc dạng này, chúng ta cần đặt chung nó vào Label " Notes" hết.
- Sau đó tiến hành thủ thuật:

   1- Đăng nhập vào Blog
   2- Vào thiết kế
   3- Chọn Phần tử trang (bố cục)
   4-Chọn thêm tiện ích (Add Widget) - thêm 1 tiện ích HTML/Javascript và dán đoạn code bên dưới vào.

<style type="text/css"> .mota{ position: relative; z-index: 0; text-decoration:none; } .mota:hover{ background-color: transparent; z-index: 50; } .mota span{ position: absolute; background-color: #ffffff; padding: 5px; left: -1000px; border: 1px solid #000; visibility: hidden; color: black; text-decoration: none; } .mota span img{ border-width: 0; padding: 2px; } .mota:hover span{ padding:5px; visibility: visible; top: 20px; left:50px; width:250px; background:#ccc; text-align: justify; } </style> <script language="JavaScript"> imgr = new Array(); imgr[0] = "https://lh3.googleusercontent.com/-_Fv9pINaLTc/UHvEhtj2_aI/AAAAAAAAEnI/tzRrE_naY_0/s225/MG-4278-Blogspot.jpg"; showRandomImg = true; tablewidth = 200; cellspacing = 1; borderColor = "#30a1db"; bgTD = "#fff"; imgwidth = 60; // Chiều rộng của ảnh thumbnail imgheight = 60; // Chiều cao của ảnh thumbnail fntsize = 16; acolor = "#E67C15"; aBold = true; icon = " » "; text = "no"; showPostDate = true; summaryPost = "no"; summaryFontsize = 14; summaryColor = "#000"; icon2 = " » "; numposts = 5; label = "Notes"; home_page = "http://bongnguoilangle.blogspot.com/"; </script> <script src="http://bongnguoilangle.googlecode.com/files/s2-label.js" type="text/javascript"></script> 

- Nhấn  Lưu  để hoàn thành tiện ích.

Trong đó:
- Đoạn code màu hồng dùng để mở khung mô tả bài viết gồm thumnail và 1 đoạn summary ngắn. Vì những bài viết dạng "Note" này không có phần nội dung nên ta xóa bỏ đoạn code này đi.
- Thay home_page = "http://bongnguoilangle.blogspot.com/"; thành địa chỉ Blogspot của bạn.
- numposts = 5; là số bài viết trong label "Notes" sẽ hiển thị trên tiện ích.
- imgr[0] = "https://lh3.googleusercontent.com/-_Fv9pINaLTc/UHvEhtj2_aI/AAAAAAAAEnI/tzRrE_naY_0/s225/MG-4278-Blogspot.jpg"; là ảnh thay thế khi bài viết không có ảnh (chỉ dùng khi các bài viết có phần nội dung - do đó ở đây chúng ta không cần quan tâm).
- label = "Notes"; tên label, thay Notes thành tên label tương ứng mà bạn đặt.
- showPostDate = true; hiển thị ngày đăng bài, tắt bằng cách đổi true thành false.

Lưu ý:
- Đoạn code nguyên vẹn bên trên (không bỏ phần màu hồng) sẽ đem đến cho bạn tiện ích Recent Posts theo Label dạng list có mô tả ngắn gọn với ảnh thumnail và 1 đoạn summary khi rê chuột vào tiêu đề bài viết. Có thể bạn sẽ cần dùng nó cho các nhãn khác của mình. Vì lí do đó mà mình không bỏ đi các code dư thừa cũng như không thay đổi đoạn Javascript.

Chúc các bạn thành công!
Nguồn:http://bongnguoilangle.blogspot.com/2012/10/tien-ich-recent-posts-theo-label-dang.html