Tạo sitemap (sơ đồ) cho blogspot theo phong cách chuyên nghiệp

Tạo sitemap (sơ đồ) cho blogspot


Sitemap (sơ đồ)  một từ ngữ không quá xa lạ. Nhưng các bạn phải phân biết cho rõ nhé Sitemap mà các bạn gửi lên Google webmasters hay Bing webmaster … Các Sơ đồ đó có nhiệm vụ "khai báo" với các công cụ tìm kiếm những thông tin chứa trong đó. Như vậy, sẽ giúp cho blog SEO (tối ưu tìm kiếm) tốt hơn. Khi các công cụ tìm kiếm "quét" qua Blog, tiêu điểm sẽ là sơ đồ blog. <Bộ máy tìm kiếm>

Còn Sitemap (sơ đồ) mà mình hướng ngày sau đây nó giúp cho người đọc có một cái nhìn tổng thểvề trang Blog đang truy cập... Nhờ có sơ đồ, người đọc dễ dàng tìm đến các chuyên mục và bài viết chứa những thông tin cần tìm kiếm. <Tăng trải nghiệm người dùng>

Đọc thêm:




Tóm tại Sitemap (sơ đồ) là một tiện vô cùng quan trọng là một giải pháp vời của một Blogger … Nó không khác gì một cuốn sách có MỤC LỤC, MỤC LỤC sẽ nói lên toàn bộ nội dùng của cuốn sách đó, người sẽ quyết định có ĐỌC hay là KHÔNG ĐỌC.

Vậy việc tạo 1 Sitemap (sơ đồ) chuyện nghiệp là một điều vô cùng quan trọng và hôm nay Windows2it sẽ giúp bạn là đều đó @! Ở bài viết này Windows2it sẽ đưa ra 2 phong cách cho các bạn lựa chọn.

☼ Cách tiến hành:

Đầu tiên bạn vào Blog => Trang => Trang mới => Chọn HTML và dán đoạn mã code dưới đây vào và chọn Xuất bản.

Code theo phong cách 1:

<style>
/* Skin
for Blogger Tabbed Layout TOC */
#tabbed-toc {
margin:
0 auto;
background-color:
#FFFFFF;
border:
4px dashed rgb(48, 167, 229);
-webkit-box-shadow:
0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow:
0 1px 3px rgba(0,0,0,.4);
box-shadow:
0px 1px 10px rgba(0, 0, 0, 0.55);
overflow: hidden;
position: relative;
color:
#333;
}
#tabbed-toc .loading {
display:block;
padding:
5px 10px;
font:normal bold
10px/normal Helmet,Freesans,Sans-Serif;
color:white;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
margin:
0 0;
padding:
0 0;
list-style:none;
}
#tabbed-toc .toc-tabs {
width:
20%;
float:left;
}
#tabbed-toc .toc-tabs li a {
display:block;
font:normal bold
10px/28px Helmet,Freesans,Sans-Serif;
height:
28px;
overflow:hidden;
text-overflow:ellipsis;
color:
#434B50;
text-transform:uppercase;
text-decoration:none;
padding:
0 12px;
cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
background-color:rgba(
110, 193, 255, 0.68);
color:white;
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color:
#6EC1FF;
color:white;
-webkit-box-shadow:-
2px 2px 2px rgba(0,0,0,.5);
-moz-box-shadow:-
2px 2px 2px rgba(0,0,0,.5);
box-shadow:-
2px 2px 2px rgba(0,0,0,.5);
position:relative;
z-index:
5;
margin:
0 -1px 0 0;
/* cursor:text; */
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
width:
80%;
float: right;
background-color: white;
border-left:
2px dotted #30A7E5;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#tabbed-toc .divider-layer {
float:none;
display:block;
position:absolute;
top:
0;
right:
0;
bottom:
0;
-webkit-box-shadow:
0 0 7px rgba(0,0,0,.7);
-moz-box-shadow:
0 0 7px rgba(0,0,0,.7);
box-shadow:
0 0 7px rgba(0,0,0,.7);
}
#tabbed-toc .panel {
position:relative;
z-index:
5;
font:normal normal
10px/normal Helmet,Freesans,Sans-Serif;
}
#tabbed-toc .panel li a {
display: block;
position: relative;
font-weight: bold;
font-size:
14px;
color:
#434B50;
line-height:
40px;
height:
35px;
padding:
0 12px;
text-decoration: none;
outline: none;
overflow: hidden;
}
#tabbed-toc .panel li time {
display:block;
font-style:italic;
font-weight:normal;
font-size:
10px;
color:
#666;
float:right;
}
#tabbed-toc .panel li .summary {
display:block;
padding:
10px 12px 10px;
font-style:italic;
border-bottom:
4px solid #275827;
overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
float:left;
display:block;
margin:
0 8px 0 0;
padding:
4px 4px;
width:
72px;
height:
72px;
border:
1px solid #dcdcdc;
background-color:
#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
background-color:
#CAE6F2;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
background-color:
#333;
color:white;
outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
background-color:
#222;
}
@media (max-width:700px) {
#tabbed-toc {
border:
2px solid #333;
}
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
overflow:hidden;
width:auto;
float:none;
display:block;
}
#tabbed-toc .toc-tabs li {
display:inline;
float:left;
}
#tabbed-toc .toc-tabs li a,
#tabbed-toc .toc-tabs li a.active-tab {
background-color:
#224C19;
-webkit-box-shadow:
2px 0 7px rgba(0,0,0,.4);
-moz-box-shadow:
2px 0 7px rgba(0,0,0,.4);
box-shadow:
2px 0 7px rgba(0,0,0,.4);
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color:white;
color:
#333;
}
#tabbed-toc .toc-content {
border:none;
}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
display:none;
}
}
</style>

<br />
<div
id="tabbed-toc">
<span class=
"loading">Loading...</span></div>
<a href=
"http://www.windows2it.com/" style="display: block; font: normal bold 8px Arial,Sans-Serif; margin: 10px; text-align: right; text-decoration: none;" title="Tabbed TOC">Blogging Tips and Tricks</a>
<script
type="text/javascript">
var tabbedTOC = {
blogUrl:
"http://www.windows2it.com/", // Blog URL
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:
"https://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 src=
"https://cdn.rawgit.com/quangmen93/Javhay.org/master/sitemap.JS" type="text/javascript"></script>

Demo phía trên mình thực hiện trên một trang chuyên biệtCòn dưới đây là Demo mình thực hiện trực tiếp ở bài đăng cho các bạn tham khảo.





Code theo phong cách 2:

<style>
#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;}</style>

<div
id="bp_toc">
</div>
<script src=
"https://cdn.rawgit.com/quangmen93/Javhay.org/master/sitemap1.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>

Demo phía trên mình thực hiện trên một trang chuyên biệtCòn dưới đây là Demo mình thực hiện trực tiếp ở bài đăng cho các bạn tham khảo.

DISPLAYING ALL 85 POSTS
POST TITLEPOST DATELABELS
Top 10 diễn đàn đi Backlink tốt nhất hiện nay2017-11-10SEOthu-thuat-blogspot
Thông báo báo lỗi Video (Error Video) cho JW Player2017-11-06thu-thuat-blogspot
Template xem phim giống Phimmoi.net cho Blogspot - Năm 20172017-06-17template-blogspotthu-thuat-blogspot
Hướng dẫn tạo nút Download (Button Download) cho JW Player2016-07-23thu-thuat-blogspot
Hướng dẫn tạo nút HD (Button HD) cho JW Player2016-07-23thu-thuat-blogspot
Khắc phục lỗi không hiển thị ảnh trên Blogspot2016-06-11thu-thuat-blogspot
Tạo link bản quyền template cho Blogspot (Blogger)2016-06-02thu-thuat-blogspot
Tạo điểm nhấn riêng phân biệt nhận xét của tác giả2016-02-21thu-thuat-blogspot
Thêm tiện ích bài viết gần đây (Recent Posts) dạng trượt ngang cho Blogspot Version 12016-02-15thu-thuat-blogspot
Chèn Video từ Youtube vào Blogspot trong khung Laptop có chức năng Responsive2016-02-08thu-thuat-blogspot
Tạo hiệu ứng hoa mai rơi (tuyết rơi, lá rơi,...) cho Blogspot2016-02-01thu-thuat-blogspot
Tạo hiệu ứng xoay 360 độ cho trang Blogspot (Blogger)2016-01-25thu-thuat-blogspot
Hướng dẫn cách tạo Subdomain (Tên miền phụ) cho Blogspot2016-01-18thu-thuat-blogspot
Tự động tải lại trang (Auto Refresh Page) cho Blogspot2016-01-11thu-thuat-blogspot
Tạo hiệu ứng bắn pháo hoa cho Blogspot (Blogger)2016-01-04thu-thuat-blogspot
Hộp đăng ký nhận bài viết qua Email (Subscribe by email) cho Blogspot Version 22015-12-28thu-thuat-blogspot
Chèn quảng cáo Google Adsense tự động vào giữa bài viết2015-12-21kiem-tien-online
Tạo phân trang cho Blogspot (Blogger) Version 22015-12-14thu-thuat-blogspot
SlideShow trình chiếu ảnh tuyệt đẹp cho Blogspot (Blogger) phần 22015-12-07thu-thuat-blogspot
Tạo hiệu ứng tải (Loading) trang cho Blogspot2015-11-29thu-thuat-blogspot
Thế nào là một Blog/Website có chất lượng?2015-11-26thu-thuat-blogspot
Tự động thêm thuộc tính Nofollow và _blank cho liên kết ngoài (Link Out) trong Blogspot2015-11-23thu-thuat-blogspot
Ẩn liên kết trong Comment (Bình luận) Blogspot2015-11-20thu-thuat-blogspot
Chống Copy nội dung nhất định trong bài viết Blogspot2015-11-17thu-thuat-blogspot
Cài đặt phần trăm thanh cuộn (Scrollbar) cho Blogspot2015-11-14thu-thuat-blogspot
Tối ưu Robots.txt chuẩn nhất cho Blogspot (Blogger)2015-11-11thu-thuat-blogspot
Hộp đăng ký nhận bài viết qua Email (Subscribe by email) cho Blogspot Version 12015-11-08thu-thuat-blogspot
Thêm nút Share trực tiếp vào bài viết cho Blogspot Pro Version 22015-11-05thu-thuat-blogspot
Sự khác nhau giữa giao thức HTTPS và HTTP2015-11-02thu-thuat-blogspot
Chuyển hướng URL Blog cũ sang URL Blog mới cho Blogspot2015-10-30thu-thuat-blogspot
Chặn Blgspot chuyển hướng URL đến các nước cụ thể cải thiện SEO2015-10-27thu-thuat-blogspot
Thủ thuật Load ảnh trước dùng Javascript/CSS cho Blogspot2015-10-24thu-thuat-blogspot
Tạo chức năng Responsive Video chèn (nhúng) từ Youtube vào Blogspot2015-10-21thu-thuat-blogspot
Chèn Video từ Youtube vào Blogspot trong khung Tivi2015-10-18thu-thuat-blogspot
Tạo khung thông báo cho Blogspot (Blogger)2015-10-15thu-thuat-blogspot
Thêm nút share trượt dọc cho Blogspot Pro Version 22015-10-12thu-thuat-blogspot
Tạo bình luận mới nhất (Recent comments) cho Blogspot2015-10-09thu-thuat-blogspot
Hướng dẫn cách Bất/Tắt bức tường lửa (Firewall) trong máy tính2015-10-06khoa-hoc-may-tinh
Hẹn giờ tắt (Turn Off), khởi động (Restart) lại máy tính2015-10-03khoa-hoc-may-tinh
Tăng tốc độ Internet của máy tính lên 20% so với bình thường2015-09-30khoa-hoc-may-tinh
Ẩn/hiện một File hay một Folder trong Windows 7/82015-09-28khoa-hoc-may-tinh
Hướng dẫn sử dụng chức năng Disk Cleanup để dọn dẹp rác trong máy tính2015-09-27khoa-hoc-may-tinh
Chống phân mảnh ổ cứng với chức năng Disk Defragmenter2015-09-26khoa-hoc-may-tinh
Hướng dẫn cài đặt Google Webmaster Tool cho Blogspot mới nhất năm 20152015-09-26thu-thuat-blogspot
Hướng dẫn cài đặt Google Analytics (Phân tích) cho Blogspot mới nhất năm 20152015-09-24thu-thuat-blogspot
Hướng dẫn xóa backlink xấu (disavow links) từ Google Webmaster2015-09-23thu-thuat-blogspot
Chèn Widget Alexa Rank vào blogspot (blogger)2015-09-22thu-thuat-blogspot
Code quảng cáo góc bên phải hoặc bên trái cho Blogspot (Blogger)2015-09-21thu-thuat-blogspot
Tạo phân trang cho blogspot (Blogger) Version 12015-09-20thu-thuat-blogspot
Tiện ích bài đăng nhiều bình luận (comment) nhất cho Blogspot2015-09-18thu-thuat-blogspot
Thêm nút Share trực tiếp vào bài viết cho Blogspot Pro Version 12015-09-16thu-thuat-blogspot
Khắc phục lỗi không phân trang cho Blogspot (Blogger)2015-09-15thu-thuat-blogspot
Thêm Pop Out Chat Box (Cbox) cho blogspot (Blogger)2015-09-12thu-thuat-blogspot
Thêm nút share trượt dọc cho Blogspot Pro Version 12015-09-10thu-thuat-blogspot
Tạo nút Lên đầu trang (Back to top) cho Blogspot2015-09-09thu-thuat-blogspot
Thêm nút Share trượt dọc hai bên Blogspot (Blogger)2015-09-07thu-thuat-blogspot
Tạo nút Button hiệu ứng nhảy cho blogspot2015-09-02thu-thuat-blogspot
Tạo sitemap (sơ đồ) cho blogspot theo phong cách chuyên nghiệp2015-09-02thu-thuat-blogspot
Code chống click chuột phải và Ctrl + U cho blogspot (blogger)2015-08-30thu-thuat-blogspot
Thêm Pop Out Facebook, Google+, Twitter cho blogspot (Blogger)2015-08-29thu-thuat-blogspot
Thêm hộp tìm kiếm (search) cho blogspot2015-08-29thu-thuat-blogspot
Thêm tiện ích bài viết gần đây (Recent Posts) cho blogspot2015-08-25thu-thuat-blogspot
7 hiệu ứng bay sinh động của twitter cho blogspot2015-08-24thu-thuat-blogspot
Tạo hiệu ứng bài đăng phổ biến (Popular Posts) cho blogspot2015-08-23thu-thuat-blogspot
SlideShow trình chiếu ảnh tuyệt đẹp cho blogspot (blogger) phần 12015-08-22thu-thuat-blogspot
Hướng dẫn sử dụng Font Awesome cho Blogspot (blogger)2015-08-20thu-thuat-blogspot
Popup hiển thị likebox của Fanpage facebook trên Blogspot (blogger)2015-08-19thu-thuat-blogspot
Loại bỏ JavaScript và CSS chặn hiển thị của blogspot (blogger)2015-08-15thu-thuat-blogspot
Thêm nút mạng xã hội cho blogspot blogger rất chuyên nghiệp và hiện đại phần 22015-08-11thu-thuat-blogspot
Tạo trạng 404 đẹp thân thiện với SEO cho blogspot (blogger)2015-08-07thu-thuat-blogspot
Hướng dẫn trỏ tên miền miễn phí .TK cho blogspot blogger thành công 100%2015-07-17thu-thuat-blogspot
Hướng dẫn cách cài đặt ngôn ngữ tiếng Việt cho windows 7 và windows 82015-07-15khoa-hoc-may-tinh
Hướng dẫn đăng ký tên miền miễn phí .TK2015-07-15thu-thuat-blogspot
Thêm nút mạng xã hội cho blogspot blogger rất chuyên nghiệp và hiện đại phần 12015-07-13thu-thuat-blogspot
Tạo biểu mẫu liên hệ/ Contact Form cho Blogspot Blogger2015-07-09thu-thuat-blogspot
Hướng dẫn kiểm tra giao diện Mobile/Responsive cho website, wordpress hay blogger2015-07-05thu-thuat-blogspot
Hướng dẫn rút gọn links kiếm tiền với Adf.ly2015-07-02kiem-tien-online
Các ứng dụng chụp ảnh tốt nhất cho Android2015-07-01thu-thuat-smartphone
Hướng dẫn rút gọn links kiếm tiền với Ouo.io2015-06-28kiem-tien-online
Hướng dẫn chặn cuộc gọi trên Samsung Galaxy2015-06-27thu-thuat-smartphone
Hướng dẫn khắc phục lỗi 404 trong blogspot (blogger)2015-06-26thu-thuat-blogspot
Code chống copy trên blogspot (blogger)2015-06-25thu-thuat-blogspot
Hướng dẫn cài đặt Windows 10 Technical Preview song song với Windows 8.12015-06-24khoa-hoc-may-tinh
Hướng dẫn truy cập nhanh một thư mục ngẫu nhiên trong Windows 10 Technical Preview2015-06-23khoa-hoc-may-tinh
Làm thế nào để loại bỏ truy cập nhanh từ File Explorer trong Windows 10 ?2015-06-22khoa-hoc-may-tinh




☼ Tùy chỉnh

·        Thay Windows2it.com thành tên miền của bạn

·        max-results=9999 or maxResults: 99999 kết quả bạn muốn nó xuất hiện <ở đây là 9999 kết quả>

·        Còn mấy tùy chỉnh khác thì mình không cần nhắc tới <nó quá dễ đối với các bạn>

☼ Kết luận

·        Sử dụng 1 đoạn HTML, 1 đoạn CSS và 1 đoạn JS mở => khả năng tùy biến rất cao và linh hoạt.

·        2 phong cách trên mình đều để Demo trực tiếp trong bài cho các bạn tham khảo luôn

·        Ở 2 phong cách trên mình đã gộp cả 3 đoạn HTML, CSS và JS chỉ thực hiện trực tiếp trên 1 trạng chuyên biệt không cần phải chỉnh sửa template New!



Còn bạn nào muốn Support gì thì cứ để lại comment @!

hoangdinh

About hoangdinh

Author Description here.. Nulla sagittis convallis. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo.

Subscribe to this Blog via Email :