Description: HTML Sitemap Page Widget for Blogger compatible with all Blogger Theme. This HTML Sitemap is Responsive.
Should you create a HTML sitemap into your Blogger? Every blog should have at-least one page by which you can navigate to all of your blog posts. Therefore, yes you must create a HTML sitemap into your Blogger. In this post, I will share a cool method to create a responsive sitemap page for your blogger with cool design features. HTML sitemap doesn't only help your visitors to look over your blog at a glance it can help to crawl and index your blog pages faster. Adding Sitemap page in WordPress is so easier than Blogger with the help of tons of plugins, in Blogger, you need to manually add the sitemap widget. Adding this sitemap widget to your blogger is also easier. Just you have to copy the following code, and paste it to your Blogger page and done! Therefore, here is a simple guide to create a HTML responsive sitemap to Blogger.
Live Demo: Blogger Sitemap
More Blogger Tips:
Live Demo: Blogger Sitemap
- How to Open External Links in New Tab
- Don't Enable HTTPS in Blogger, Read Why?
- Make Blogger Post Title SEO Friendly
- How to Add Different Meta Description for Each Post
- How to Add Favicon in Blogger
Create a Responsive HTML Sitemap Blogger Page
If you want to create your own hyperlink text URL for your sitemap page, read this post (change blogger static page URLs) before proceeding the current post.- Go to 'Blogger Dashboard', and select your Blog.
- Click on 'Pages' -> 'New Page'. Now, Choose 'HTML' part (near to 'Compose').
- Now copy the following code.
<script src="https://googledrive.com/host/0BynUyePIYUATTzJMS0dfRGtNQkU" type="text/javascript"></script>
<script src="http://www.bloggertipsseotricks.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; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .50s ease-in-out; -moz-transition:all .50s ease-in-out; -o-transition:all .50s ease-in-out; transition:all .50s ease-in-out;text-decoration: none; }
.ct-columns-3 p a:hover { background: #fff; color: #555;text-decoration: underline; }
@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>
Don't forget to replace 'www.bloggertipsseotricks.com' with your blog link. - Finally, click on 'Publish' button.
- You have created a HTML sitemap for your Blogger blog.
