Responsive and Stylish HTML sitemap

responsive and stylish html sitemap for blogspot or website  at top 10 tentoppest

In that tutorial, we will learn to add a responsive and stylish HTML sitemap on Blogspot. Adding an HTML sitemap helps the users to discover all the contents present on our website through a single page where we use that sitemap widget. That is the basic SEO factor as well.

How to add responsive and Stylish HTML sitemap in Blogspot

Following are the steps to add and HTML sitemap to Blogspot or any other website.

Step # 1:

Login to your Blogspot account >> click on Pages >> create New page

Step # 2:

Copy the code below, open HTML mode and paste the code there.

<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #6cbe42;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#6cbe42;
font-weight:normal;
margin:0 -5px;
padding:1px 0 2px 15px;
background:-moz-linear-gradient(right,#6cbe42 0%,#6cbe42 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#6cbe42),color-stop(1,#6cbe42));
border:1px solid #6cbe42;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#000000;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#ff2626;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#6cbe42 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#6cbe42));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>
<br />
<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://www.Your Blog Address.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>

Step # 4:

  • Enter your own blog's address.
  • Set the title as "Sitemap".
  • Disable the comments and publish the page. It's done!

Conclusion

The sitemap is stylish and responsive as well. Hope that, it's enough to fulfill the need of a responsive and HTML sitemap for your blog or website.
If any problem occurs there, feel free to Contact us.
About Author Subscribe
Previous
Next Post »