Sitemap widget – Sơ đồ Blog cho Blogger 9/10/11

Sơ đồ Blog - Sitemap hay còn gọi là Table of Contents là một bảng phụ lục liệt kê tất cả các bài viết trên Blog theo từng trương mục (Labels ) hoặc theo thời gian (Archived ) một cách tự động.

Cùng với các tiện ích như Numbered Page Navigation, Related Posts hay Breadcrumb, góp phần tạo nên sự điều hướng dễ dàng và thuận tiện cho độc giả, giúp gia tăng Pageview và giữ chân độc giả ở lại Blog bạn lâu hơn.

Ý tưởng bắt nguồn từ Amanda - một Blogger tên tuổi, sau đó được Abu-Farhan cải tiến giúp tiện ích trở nên đơn giản và bắt mắt hơn.

Chính vì những lợi ích rất thiết thực mà tiện ích mang lại, hôm nay iTechPlus xin giới thiệu đến các bạn 3 style của tiện ích này nhằm giúp các bạn có nhiều sự lựa chọn phù hợp cho Blog của mình.

DEMO

Style 1 : Table of Contents by Label

DEMO

1. Vào Chỉnh sửa Bài đăng > Chỉnh sửa Trang > Trang mới để đặt tiện ích trên một Static Page

2. Chuyển qua chế độ Chỉnh sửa HTML và dán vào đoạn code bên dưới

<script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="http://www.phuchungca.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

3. Thay đoạn code in đậm bằng địa chỉ blog bạn rồi nhấn Xuất bản trang là OK.

* Vì là một trang Page nên bạn có thể đặt đâu tùy ý, hoặc get link và tạo một liên kết trên thanh menu giống iTechPlus chẳng hạn.

Style 2 : Table of Contents by Date ( Archived )

DEMO

Thực hiện các bước tương tự Style 1, chỉ thay nội dung bằng đoạn code sau :

<script style="text/javascript" src="http://abu-farhan.com/script/daftarisibloggerarchive/tocbyarchivemin.js"></script>
<script src="http://www.phuchungca.blogspot.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc"></script>

Style 3 : Table of contents and Accordion

DEMO

Thực hiện các bước tương tự Style 1, chỉ thay nội dung bằng đoạn code sau :

<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://www.phuchungca.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>

Lưu ý!

các bạn nên download các file .js và .css về lưu trữ hoặc upload lên host riêng đề phòng trường hợp host trên die..

• Thay thế link www.phuchungca.blogspot.com thành link blog của ban.
• CHÚC THÀNH CÔNG.