Làm thế nào để Thêm Widgets Sitemap Blog

Làm thế nào để tạo 1 sitemap ( sơ đồ ) đẹp và dễ dàng cho người tìm kiếm trên blog của bạn.
Tạo ra nhiều bài viết và để tìm kiếm nó thì chúng ta muốn dễ dàng thì chỉ có bằng cách tạo 1 sitemap ( sơ đồ) tổng quát tất cả các bài viết tại đó
sitemap cho blog


Cách tạo widget sitemap cho blogger

Sitemap cho blog, một blog chuyên nghiệp thì thường họ sẽ biết cách tạo 1 sơ đồ tổng quát lại tất cả các bài viết của họ để khi một ai đó tìm kiếm thì họ sẽ tìm được dễ dàng.
giải pháp ở đây cho các bloging là gì , các blogging nên tạo ra 1 sơ đồ ''sitemap'' cho blog

Các lợi thế khi tạo ra 1 widget sitemap blog ,blog của bạn sẽ chuyên nghiệp hơn, ngoài ra các khách truy cập blog sẽ cảm thấy dễ chịu khi tìm các bài viết của blog 1 cách dễ dàng . chắc chắn bài viết sau ''  tạo widget sitemap cho blog'' sẽ có lợi ích cho rất nhiều các blogging

Tạo sơ đồ sitemap cho blog

Đầu tiên các bạn vào blogger -->page --> tạo 1 page mới và chuyển sang chế độ html và thêm đoạn mã bên dưới vào

<div id="bp_toc">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

<style scoped="" type="text/css">
#comments {display:none;}
</style>

Sau đó các bạn lưu lại 
Tiếp theo các bạn mở blogger --> edit html --> tìm thẻ </style>
Mẹo tìm là : các bạn chỉ vào html và bấm tổ hợp phím ctrl + f 
Và thêm đoạn mã bên dưới vào trước thẻ </style>


/* CSS Full Sitemap */
#bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#aaa;font-family:'Open Sans';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}

Các bạn chỉnh sửa font chữ và kích cỡ chữ cho phù hợp
Và sau đó save html lại 

Trường hợp bạn có vài trăm bài viết hoặc vài nghìn bạn có thể sử dụng code bên dưới để hiển thị tốt hơn
Bạn vào blgoger --> mở page --> sau đó dán code bên dưới vào và save lại


<div id="bp_toc" style="max-height:1300px;overflow:scroll;overflow-x:auto;"> </div> <script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script> <style scoped="" type="text/css"> #comments {display:none;} </style>
Chúc các bạn thành công

Nhận xét&Bình luận

Kết nối&Chia sẻ:

Designed by www.kenhshare.net | Copyright © 2010 Template Design by Mr.Thành Công