Mục lục (Sitemap) là phần rất quan trong của blog. Nó giúp các độc giả có cài nhìn tổng quan về blog của bạn. Qua đó có thể theo dõi các bài viết của bạn theo từng chuyên mục. Style map hôm nay namkna giới thiệu sẽ cho các bạn sitemap dạng bảng (Tabbed) được thiết kế bởi DTE;] với nhiều tùy chọn hơn, về cơ bạn gần giống như một menu dọc xổ ngang ra các bài viết.
» Điểm nổi bật của Sitemap này!
- Tùy biến giao diện rất dễ dàng và đẹp mắt với dạng ảnh.
+ Dạng đơn giản.
+ Dạng nâng cao: sau khi kích hoạt đầy đủ mô tả, ngày tháng đăng bài, ảnh thumbnail...
Các bạn có thể xem demo: VIEW DEMO
» Cách thêm Sitemap style input ves 2 cho blogger.
1. Đăng nhập vào tài khoản Blogger
2. Vào Trang (Trang)
3. Chọn Trang mới (New page) => Trang trống (page blank)
4. Đặt tên cho trang như: Sitemap, mục lục,...
5. Tích chọn vào tab HTML của trang vè dán code bên dưới vào
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/66256041/Sitemap/namkna.blogspot.com/tabbed-toc-skin.css" type="text/css" media="screen" /> <div id="tabbed-toc"><span class="loading">Loadding...</span></div> <a style="display:block;text-align:right;font:normal bold 8px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="http://namkna.blogspot.com/2013/04/sitemap-table-toc-input-for-blogspot.html" title="Tabbed TOC">Namkna's Blog</a> <script type="text/javascript"> var tabbedTOC = { blogUrl: "http://namkna.blogspot.com/", containerId: "tabbed-toc", // Container ID activeTab: 1, // The default active tab index (default: the first tab) showDates: false, // `true` to show the post date showSummaries: false, // `true` to show the posts summaries numChars: 200, // Number of summary chars showThumbnails: false, // `true` to show the posts thumbnails (Not recommended) thumbSize: 40, // Thumbnail size noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL monthNames: [ // Array of month names "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ], newTabLink: true, // Open link in new window? maxResults: 99999, // Maximum post results preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload") sortAlphabetically: true, // `false` to sort posts by published date showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text }; </script> <script type="text/javascript" src="https://dl.dropboxusercontent.com/u/66256041/Sitemap/namkna.blogspot.com/tabbed-toc.js"></script>
» Tùy chỉnh code:
- Thay http://namkna.blogspot.com/ bằng URL blog của bạn.
- containerId: "tabbed-toc", Yếu tố ID sẽ được sử dụng như một container cho JSON đã được xử lý (bỏ qua nếu không cần thiết).
- Thay chữ Loadding... thành chữ bạn muốn ví dụ đang tải....
- Trong code trên tab hiển thị khi ta load trang là nhãn đầu tiên. Chọn nhãn hiển thị khi load trang bằng cách thay đổi activeTab: 1.
- showDates: false, quy định ngày tháng đăng bài. để hiển thị ngày tháng của bài đăng sửa false thành true.
- showSummaries: false, Để hiển thị phần mô tả cho từng bài viết hãy sửa false thành true.
- numChars: 200 Số ký tự mô tả hiển thị
- showThumbnails: false quy định ảnh thu nhỏ. Để hiển thị ảnh thu nhỏ cho các bài viết hãy sửa false thành true.thumbSize: 40, là kích thước ảnh. Trong ví dụ này chiều rộng và chiều cao đều là 40px
- monthNames là tên các tháng sẽ hiển thị
- newTabLink: true, là hiển thị bài viết trong tab mới khi click chuột vào tiêu đề. Để tắt chức năng hãy sửa True thành false.
- maxResults: 99999, là Số bài tối đã sẽ hiển thị trên site map. Hãy thay đổi giá trị 9999.
- preload: 0, tải trang sau 0 giây. Giời gian ở đây tính là mili giây (1s=1000mls). Hoặc đơn giản là viết "onload" để tiện ích này tải sau khi toàn bộ trang đã tải hoàn tất.
- sortAlphabetically: true, Là xắp xếp theo thứ tự bảng chữ cái aphabe. Nếu muốn hiển thị theo ngày đăng thì sửa false thành true.
- showNew: 7, số bài viết gần đây nhất sẽ được dán nhãn new.
- newText: " - <em style='color:red;'>New!</em>" là chũ sẽ hiển thị bạn có thể dùng mã HTML để tạo màu chữ. Có thể thay chữ new thành chữ bạn muốn.
Nhận xét
NamKha cho mình hỏi mình muốn dùng thủ thuật này chỉ cho 1 số nhãn nhất định trong khi blog mình có khá nhiều nhãn được không? tks
Trả lờiXóaHiện tại thì chỉ có thể gọi tất cả các nhãn, Trong ves tới mình sẽ thêm chức năng đó. :))
XóaAnh nam kha có thể cho em hỏi 1 số vấn đề về ảnh thumbnail hiện ở trang chủ không ạ ! . em lấy ví dụ nhé lúc trước em mua temp của 1 người bạn bán lại khi post bài ( sài google chorme ) e chỉ cần coppy hình ( sao chép hình) để ở chế độ viết và pase vào là có hình sau đó chuyển sang chế độ html để post code embed ( site phim ) . sau đó em có tìm trên mạng 1 temp blogger thấy ứng ý và thay vào nhưng ảnh thumbnail demo hiện ở trang chủ phải úp trực tiếp lên host của google nó mới hiện . anh có thể viết 1 thủ thuật hướng dẫn cho mọi người hoặc em cách làm sao chỉ cần coppy hình ảnh pase thôi như vậy sẽ tiết kiệm dc thời gian post bài vì úp lên host phải lưu hình về rồi úp ngược lên rất lâu ạ
Trả lờiXóaEm lưu ý điều này: Tất cả các thủ thuaatrj trên blogger đều lấy ảnh từ picasa, link ảnh có dạng
Xóahttp://3.bp.blogspot.com/...../name.jpeg
http://1.bp.blogspot.com/...../name.png
http://2.bp.blogspot.com/...../name.png
http://4.bp.blogspot.com/...../name.png
- Trường hợp em copy nếu dúng các hình ảnh có dạng link như vậy thì sẽ tự động lấy ảnh thumbnail ở trang trủ. nếu từ các host khác như photobuket,images,... thì sẽ không hiển thị.
nhưng lúc trước em sài tem chỉ cần coppy passe là ảnh đã hiện o73trang chủ , không cần úp lên host anh có cách nào chĩnh dc code vậy không a
Xóaý em là giờ mình làm sao chĩnh code để hiện ảnh thumbnail dễ hơn á
Xóa- NÓi thế này em sẽ dễ hình dung được nha,
Xóa- Các tiện cíh của blogger chỉ lấy ảnh từ album picasa của google. Chỉ cần ảnh đó từ các host của google hoặc youtobe thì tem có thể copy thỏa thích.
- Em có thể copy thử hình ảnh bất kỳ trong blog anh đều có ảnh thumbnail (vì anh dùng host picasa của blogger nên các blogger khác có thể dùng ảnh của anh). Nhưng nếu copy từ dân trí thì sẽ không có.
- Vấn đề hiển thị ảnh trên trang chủ em có thể lựa chọn một trong các bài viết ở đây:
auto readmore
Chác là liên quan tới vấn đề tự động tóm tắt bài viết ở trang chủ.Nếu dùng tiện ích tự động tóm tắt bài viết có sử dụng javascript của namkna thì ảnh nào cũng lên hết.Nếu xài loại ko dùng javascript thì bắt buộc ảnh phải up lên blog hoặc picasaweb
XóaSitemap này cũng đẹp lắm...
Trả lờiXóaCảm ơn lời khen của bạn. :))
XóaNamkna ơi, mình rất ấn tượng về kiến thức blogspot của bạn. Những chia sẻ của bạn rất bổ ích với những người mới chơi blog như mình.
Trả lờiXóaHiện tại, do bất cẩn, mình đã lỡ xoá nhấm một số code trong HTML nên blog đã bị lỗi. Mình không biết phải sửa lại thế nào, nên nhờ bạn giúp được không?
Mình xin email của bạn để trao đổi nhé!
Cảm ơn Nam trước.
Oke bạn. Email mình là: tavannam01@gmail.com
XóaAnh namkna cho e hỏi tiếp 1 vấn đề nửa nhé :) em bị lỗi là anh3trong blogger tràn ra ngoài khung bài viết demo : http://www.baodongtinh.com/2012/12/ang-sau-nu-cuoi-o-la-ca-1-noi-buon.html em đã tham khảo code rezise ảnh trên mạng nhưng vẫn không được , anh có cách nào chiem với
Trả lờiXóaví dụ thêm về ảnh thumbnail ở tem này nè anh namkna như thế này tem này em mua của 1 người bạn với giá 400k khi viết bài em chi cần coppy và pase thôi anh à ảnh thumbnail hiện ngoài trang chủ không cần úp truc tiếp lên host hoặc pisaca đó anh :) thế thì muốn áp dụng cái này cho blog khác thì phải làm sao , vì như vậy chúng ta sẽ đỡ mất thời gian pist bài hơn ạ
Trả lờiXóa1- Em xem bài này: Sửa lỗi ảnh tràn ra ngoài khung bài viết trong Blogger
Xóa2- Đó là tiện ích recent post. Nếu thích em có thể gửi template đó vào mail tavannam01@gmail.com anh sẽ lọc code đó cho em.
Nhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóabạn ơi cho mình hỏi cách tạo thanh điều hướng như của bên đây như thế nào?
Trả lờiXóahynlsblog.blogspot.com
email: darkangelcd@gmail.com
Hãy chụp ảnh phần đó lên đây nha. Mình vào trang đó không hề tahays thanh điều huywowngs đâu bạn ak.
XóaBạn không nên spamlink. Mình sẽ xóa khi đăng nhập dưới quyền Admin :??
Trả lờiXóaNhược điểm của thủ thuật này là không gọi được hết các bài viết trong nhãn được. Hy vọng bạn có thể nghiên cứu để hoàn thiện hơn với:
Trả lờiXóa1/ Chỉ hiển thị một số Label chỉ định
2/ Hiển thị được chính xác hơn số bài viết trong nhãn. Nếu có phần trang thì tốt quá
Oke mình sẽ cập nhật trong bản mới.
XóaAnh ơi làm sao để lấy FEED của nhãn giống như trong sitemap của anh ấy
Trả lờiXóaFEED: trong sitemap có tác dụng gì không anh
Nhận xét này đã bị tác giả xóa.
Trả lờiXóaChào nam, mình có một vấn đề muốn nhờ Nam giúp
Trả lờiXóaMình muốn bỏ cái liên kết phía dưới Sitemap table"Widget by Abu Farhan" thì làm thế nào vậy? http://phanmemvippro.blogspot.com/p/sitemap.html
thanks bạn nhiều!
Bạn xem bài viết này: Actions Sitemap for blogspot
XóaBài viết trong sitemap blog của mình nó hiển thị theo thứ tứ A, B,C.. giờ mình muốn nó hiển thị theo thứ tự ngày post thì sao hả ad?
Trả lờiXóacho mình hỏi chỉnh sữa font size cho mô tả dc ko bạn
Trả lờiXóa