Sitemap Creator and Generator for your blogspot blog

Static HTML Site Map for Blogger 

Site Map of a blog helps any search crawlers crawl your blog in a proper way and also for indexing . Here in this blog post I gonna explain you how to add static HTML site map page to blogger blogs . By adding this , you can giving your blog readers a clear view about your Blog and making them feel comfortable while browsing your blog .


If you make good Site Map to your blog can even increase your page ranking too .  Here in this tutorial you can get to know how to add a static HTML site map that contains all your blog index .

Let me go in ....

Creating  a HTML static Site Map for Blogger Blogs.

( Take a backup of your whole template before performing the below action for safety )


Go to your blogger dashboard

Blogger >> Template >> Edit Template >>

Click any where inside the template and search for   " ]]></b:skin> " by pressing Ctrl + F buttons .

Now past the below given code just above or before it .

<!-- site map page code by myblogstory.com -->
.judul-label{
background-color:#E5ECF9;
font-weight:bold;
line-height:1.4em;
margin-bottom:5px;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e9e9e9;
border: 2px solid white !important;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top, #888, #575757);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}
.list-ganjil{
background-color:#F6F6F6;
}
.headactive{
color: #fef4e9;
border: 2px solid white !important;
background: #1C8DFF;
background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));
background: -moz-linear-gradient(top, #9dc2e7, #438cd2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2');
}
<!-- end of site map code by myblogstory.com -->

Done with the first step and the last step is

Create a page to your blog . 

Blogger >>> Pages >>> Click on new page button

Give a title name as we give for a general posts and in the body section , click on HTML view tab and past the below code there

<div dir="ltr" style="text-align: left;" trbidi="on">
<script src="http://yourjavascript.com/4222313134/site-map1.js" type="text/javascript"></script>
<script src=" http://www.myblogstory.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript"> var accToc=true; </script>
<script src="http://yourjavascript.com/4221239320/site-map2.js" type="text/javascript">
</script></div>

Once after pasting the above code onto your new blogger page . Just replace the blue colored text alone with your blogger blog name or your custom domain name .

That's it and you are done .


You can check our  Site Map Page for Demo view . Please comment if you have any quires or issues regarding this article .

Thankq one and all for visiting our blog . Keep visiting :)

Get Free Blogging updates in your Email

About Author

KEERTHISH KODALI (Sunny) is the founder of www.MyBlogStory.com . He is very friendly guy ,who wants whole world to be united without any border. He is passionate about blogging. He is a DevOps engineer, Systems Engineer, Data Center Analyst , Professional Blogger and an addicted Web Designer. Ofcourse a Stock Traders and Crypto Investor ~~~ Read More