[Blogspot] – Phân trang cho trang chủ



Như các bạn đã biết, hiện tại có 1 vài tiện ích phân trang cho blogspot, nhưng các tiện ích này có 1 nhược điểm là dễ bị mất bài viết. Hôm nay mình sẽ giới thiệu cho các bạn 1 cách phân trang khác. Phân trang này khác hòan tòan với bản cũ, đó là mình dùng feed để hiển thị và phân trang. Với cách này bạn có thể tự do tùy chỉnh giao diện hiển thị các bài viết ngòai trang chủ. Cách này cũng có thể thay thế cho các trang nhãn có sẵn của blog.

Và đây là các bước cho các bạn dễ hình dung:
a – đầu tiên ta sẽ ẩn bài viết ngòai trang chủ.
b – sau đó tạo 1 widget recent posts và cho nó hiển thị vào chỗ mà bài viết đã bị ẩn.
c – và cuối cùng là tùy chỉnh cho widget chỉ hiển thị ở trang chủ.
- như vậy tòan bộ các trang được phân sẽ chỉ hiển thị trên 1 trang, và nội dung hiển thị sẽ thay đổi tùy vào link liên kết.
- thủ thuật này xây dựng nên từ thủ thuật mà mình đã giới thiệu nhưng chưa post bài hướng dẫn cho mọi người.

Các bạn có thể xem demo ở đây, feed của trang demo được lấy từ blogtruyen.com

Xem DEMO trên Blogspot : fandung.com

* Sau đây là các bước thực hiện :
1. đầu tiên các bạn sẽ ẩn bài viết ở trang chủ :
- nếu các bạn dùng CSS để ẩn widget chứa bài viết (Blog1) thì nó chỉ ẩn và sẽ vẫn load bài viết, vì thế mình sẽ dùng kết hợp 2 cách, ẩn widget Blog1 và ẩn nội dung bài viết ở trang chủ.
- vào bố cục
- vào chỉnh sửa code HTML
- chọn mở rộng mẫu tiện ích
- đầu tiên sẽ là ẩn widget Blog1 ở trang chủ : các bạn chèn đọan code này vào trước thẻ đóng

 

- tiếp theo là ẩn nội dung bài viết : tìm đọan code như bên dưới :

... xuống bên dưới vài dòng ta sẽ thấy đọan code như bên dưới ...

- phần code này chính là nội dung của mỗi bài viết.
- và chèn thêm code như bên dưới :

... xuống bên dưới vài dòng ta sẽ thấy đọan code như bên dưới ...

- save template.
2. và bước 2 là tạo 1 widget HTML/javascript. vị trí của widget này sẽ nằm bên trên widget Blog1 hoặc ngay bên dưới.

home-navigation | mothuthuat.com

- và đây là code của thủ thuật :

    

- thay www.fandung.com thành tên miền của blog bạn, ví dụ blogA.blogspot.com
- thay link http://data.fandung.com/blog/demo/home-navi/index.html thành URL blog của bạn, ví dụ http://blogA.blogspot.com/
- muốn tùy chỉnh việc hiển thị số bài viết trên blog các bạn chỉ việc thay lại giá trị của biến numposts.

3. cuối cùng là set cho widget này chỉ được hiển thị ngòai trang chủ.
- đầu tiên vào phần phần tử trang , nhấp chọn vào nút edit widget mới tạo để xem ID của nó, như hình bên dưới :
home-navigation2 | mothuthuat.com
- ví dụ như trong hình ta có ID là HTML2, và bây giờ ta vào code template, nhớ chọn “Mở rộng mẫu tiện ích” và ta sẽ tìm đọan code như bên dưới :
home-navi3 | mothuthuat.com
- và thêm code như bên dưới (code highlight):
home-navi4 | mothuthuat.com
- cuối cùng là save template.

* Lưu ý : thủ thuật này không dành cho những bạn mới làm quen với blogspot.

Chúc các bạn thành công.



Responses

1 Respones to "[Blogspot] – Phân trang cho trang chủ"

Hậu Nguyễn nói...

code ko viết mà bạn đưa cái hình ? sao copy đây ?


lúc 13:38 7 tháng 10, 2011

Đăng nhận xét

Return to top of page Copyright © 2011
Login