2 tiện ích Sitemap tuyệt vời cho Blogger

Thêm sitemap hoặc mục lục trong một blog là điều rất cần thiết kể cả blog đó là mới hay cũ. Những sitemap giúp bạn đọc blog của ITViet360 di chuyển dễ dàng hơn và nó cũng giúp trang web của chúng tôi giảm tỷ lệ người thoát nhanh. Cũng đã có một số bài viết trước đây ITViet360 có giới thiệu với bạn đọc về 1 số tiện ích sơ đồ trang này, tuy nhiên trong bài viết hôm nay thì xin giới thiệu với bạn 2 tiện ích sitemap mới. Được thiết kế nhiều hơn và cẩn thận rơi.
Lúc đầu, chúng tôi nghĩ là tách nội dung bài viết này thành 2 bài viết hướng dẫn,, tuy nhiên hướng dẫn khá đơn giản và ngắn gọn nên chúng tôi sẽ trình bày 2 cách đó ở một bài viết dưới đây:

• 1. Tiện ích Sitemap reponsive cho blogger
• 2. Sitemap với hình ảnh trong blogger

Tiện ích Sitemap reponsive cho blogger

Tiện ích này được phát triển nhằm phục vụ nâng cao với khả năng phù hợp với tất cả các giao diện của Blogger. Không gặp bất kỳ trở ngại nào và có một thiết kế rất là bắt bắt. Bạn sẽ được xem chi tiết ở link demo bên dưới.

DEMO TẠI ĐÂY

Để thêm sitemap này các bạn vào bảng điều khiển Blogger -> Trang (Page) -> Trang mới (New page) -> soạn thảo ở chế độ HTML và dán code dưới đây vào nó

<script src="http://files.allbloggertricks.com/Scripts/sitemap.js" type='text/javascript'></script>
<script src="http://www.itviet360.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<style type="text/css">
.post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; }
.post-archive h4 { border-bottom: 2px solid #EEEEEE; color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; }
.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}
.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }
.ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #FFFFFF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; }
.ct-columns-3 p a:hover { background: #555; color: #fff; }
@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } }
</style>

Thay thế www.itviet360.com bằng URL blog của bạn và xuất bản trang đó. Xem kết quả.

Sitemap với hình ảnh trong blogger

Với hình ảnh được thu nhỏ và bo tròn lại tạo cảm giác khá lạ mắt cho tiện ích này. Tiện tích sitemap này có vẻ gọn gàng, sạch sẽ và thanh lịch. Bạn xem demo trực tiếp dưới đây sẽ thấy rõ được điều này hơn

DEMO TẠI ĐÂY

Cách tạo sitemap này cũng tương tự như ở trên. Bạn dán code dưới đây vào trang mới vừa tạo:
<script src='https://itviet360-com.googlecode.com/svn/trunk/sitemap.js'>
</script>
<script style='text/javascript'>
var numposts = 999;
var showpostthumbnails = true;
var displayseparator = true;
</script>
<script src="http://www.itviet360.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=recent&amp;max-results=999"></script>
<p style="display:none;"><a href="http://www.allbloggertricks.com/">All Blogger Trick</a></p>
<style type="text/css">
.sitemap-container {width: 100%; height: 105px; border-top: 2px solid #eee;}
.sitemap-container:hover {background-color:#fafafa;}
.thumbnail {width: 60px; height: 90px; float: left; top:0px;}
.posttitle {height: 90px; float: left; line-height: 90px; margin-left:25px; display:block; width:80%; white-space:nowrap;}
#postimg {margin-top: 10px;  -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width: 60px; border: 2px solid #eee;}
#list{list-style-type: none; padding-left: 0px; margin-left: 0px;}
</style>
Như vậy là bạn đã thực hiện xong. Hãy sử dụng 1 sitemap cho blogger của bạn, bởi nó sẽ rất có lợi ích cho SEO
Chúc bạn vui vẻ! Chuyên mục: Thu thuat, Thu thuat blogspot, thu-thuat, thu-thuat-blogger