How To Add Responsive Sitemap For Blogspot Blogs

1
912

Adding the table of content’s or sitemap in a blog is easy quite. These sitemaps help our readers to navigate our blog easily and it also helps our blog to gain huge visitors. Blogger who was running their own blog wants to make an elegant or responsive sitemap like WordPress. So today we are going to reveal how to create an awesome responsive sitemap for blog-spot blogs.

What Is Sitemap?

sitemap is a visual organized model of a Website content’s that allow users to navigate through the site to find the information. A site map is a kind of interactive table of content’s in which each site linked directly to its counterparts sections of websites.

Why Use Sitemap?

With the help of site map of a blog, the search crawler crawls the entire blog. Sitemaps help to index the blog contents quickly. It helps your blog readers to find you’re all of the content at one place. It can also increase your page rank.

Let’s see the live demo:-

How To Add Sitemap To Your Blog

#1 Go to Blogger Dashboard, select your blog
#2 Go to Pages > New page > and select Blank Page
#3 Click on HTML tab and paste the code below.

<script src=’https://googledrive.com/host/0Byw3i3rvhLeMSUNrT0FuWVBwWTQ’>
</script><script style=’text/javascript’>
(Value at Risk)var numposts = 999;
var showpostthumbnails = true;
var displayseparator = true;
</script><script src=”http://www.bloggerspedia.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.bloggerspedia.com/”>Bloggerspedia</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>

Customization

After adding the above code, replace “http://www.bloggerspedia.com” with your blog URL.

– to change the color of background then replace the value in blue.

#4 Click option on right side and select Don’t allow (hide existing) for reader comments.

#5 Click on publish and you are done.

That’s all
These Sitemaps will surely help your readers to navigate your all blog contents.

Final Words

I hope this guide will clear your thoughts about adding the site map to your blog and help you to make your own site map widget for blog-spot blogs. I have mentioned all steps for adding Site map widget. In future, we provide more quality tips and tricks.
Wish you a Success blogging 🙂

Do share your quick tips about the importance of adding the site map to Blogspot-blogs.

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here