Thư viện

Trải nghiệm

Thứ Sáu, tháng 4 12, 2013

Sitemap dạng bảng (Table TOC) cho blogspot v2

sitemap dạng bảng (Tabbed) 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

Chia sẻ:
Sitemap Table TOC input for blogspot ves 2
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.
Sitemap Table TOC input for blogspot ves 2
+ Dạng nâng cao: sau khi kích hoạt đầy đủ mô tả, ngày tháng đăng bài, ảnh thumbnail...
Sitemap Table TOC input for blogspot ves 2 full

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.

28 nhận xét:

  1. 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óa
    Trả lời
    1. Hiệ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óa
  2. Anh 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óa
    Trả lời
    1. Em 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

      http://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ị.

      Xóa
    2. 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
    3. ý em là giờ mình làm sao chĩnh code để hiện ảnh thumbnail dễ hơn á

      Xóa
    4. - NÓi thế này em sẽ dễ hình dung được nha,
      - 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

      Xóa
    5. 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óa
  3. Namkna ơ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.
    Hiệ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.

    Trả lờiXóa
  4. Anh 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óa
  5. ví 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óa
    Trả lời
    1. 1- Em xem bài này: Sửa lỗi ảnh tràn ra ngoài khung bài viết trong Blogger

      2- Đó 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.

      Xóa
  6. sua chua van phong
    Chúng tôi chuyên các hạng mục về nội thất nhà ở và văn phòng như:
    Sơn mới,sửa chữa văn phòng
    Tư vấn,hướng dẫn thiết kế văn phòng
    Dán tường văn phòng,trải thảm văn phòng
    Lắp cửa nhôm,cửa lùa,cửa kính cường lực.
    Chống ẩm,mốc tường lâu ngày…
    Sơn dầu cửa cuốn,sơn PU…
    Làm vách ngăn vp,vách thạch cao,nhôm kính
    Thiết kế logo,bảng hiệu công ty bằng mica,alu…
    Đổ sàn giả,tấm cemboard,đục gạch,lát gạch mới.
    Quý khách,quý công ty có nhu cầu xin quý khách liên hệ
    http://suachuavanphong.net/

    Trả lờiXóa
    Trả lời
    1. Bạn không nên spamlink. Mình sẽ xóa khi đăng nhập dưới quyền Admin :??

      Xóa
  7. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  8. bạ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?
    hynlsblog.blogspot.com
    email: darkangelcd@gmail.com

    Trả lờiXóa
    Trả lời
    1. 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óa
  9. Nhượ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:
    1/ 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á

    Trả lờiXóa
  10. Anh ơi làm sao để lấy FEED của nhãn giống như trong sitemap của anh ấy
    FEED: trong sitemap có tác dụng gì không anh

    Trả lờiXóa
  11. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  12. Chào nam, mình có một vấn đề muốn nhờ Nam giúp
    Mì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!

    Trả lờiXóa
  13. Bà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óa
  14. cho mình hỏi chỉnh sữa font size cho mô tả dc ko bạn

    Trả lờiXóa