Create A Sitemap For Visitors On Blogger Site

A sitemap is a most important part of a Blogger Site. Sitemap ensures navigation both for visitors and search engines. There are two types of Sitemap

1. XML sitemap [for search engines]

1. HTML sitemap [for visitors]

In few days ago we learn the XML sitemap. Today I am going to share about HTML sitemap [for visitors].
HTML sitemap are visitors friendly. It shows all post by one click. This is is also affective to increase page view, keep visitors engaged. This is minimally styled in with your site design. Look at my HTML sitemap [see screen shot]

You can make this sitemap easily just follow the steps.

1. First time log in your Blogger account.
2. Go to pages>>new page>>in your compose area click on HTML 
3. Page title write Sitemap [see screen shot]

         

   4. And copy paste bellow code in your HTML selection page

<style type="text/css">

    #toc{
    width:99%;
    margin:5px auto;
    border:1px solid #2D96DF;
    -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:#FF5F00;
    font-weight:bold;
    margin:0 -5px;
    padding:1px 0 2px 11px;
    background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
    background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
    border:1px solid #2D96DF;
    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:#fff;
    }
    .labl:first-letter{t
    ext-transform:uppercase;
    }
    .new{
    color:#FF5F00;
    font-weight:bold;
    font-style:italic;
    }
    .postname{
    font-weight:normal;
    background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
    background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
    }
    .postname li{
    border-bottom: #ddd 1px dotted;
    margin-right:5px
    }
    </style>
    <div id="toc">
    <script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
    <script src="http://www.techshoutme.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
    </script></div>

[NOTE- www.techshoutme.com change by your domain name]

   5. Sitemap are ready now publish your sitemap page.

{If this post is helpful, so do not forget to share. }