Trang chủ
Loading...
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.Để 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&alt=json-in-script&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ơnCá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&alt=json-in-script&callback=recent&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ẻ!
Loading...
0 nhận xét:
Đăng một bình luận