How To Make A Cool Site Map

Descriptions :

A site map (or sitemap) is a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for Web design, or a Web page that lists the pages on a Web site, typically organized in hierarchical fashion. - Wikipedia

Steps :

1. Open Blogger and Log In to your account.

2. Click Layout and add gadget HTML/Javascript or make a new post using a HTML mode.

3. Copy and Paste this JavaScript code.

<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
#dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXdFuWp6M1DLTPLso77qccoGAOSUmBqYlJmzaJpGOvIc4YnCVdhqWo-OZv_BeuvJ2W5e2DFAfSCNu_1Qv6Iwjz-5RIp5rFhuKNnnfGrbcVKuHhW5rfKUcyKyi6VPVASfiBZ-Wt-5Hv9WA/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJUcwo7OAgD2CPeYgB8qFr-P8uniWjfJA3fDn6gFZOevrLkD1idxklbVAYRiy8VLRRr5yd3YW2vbIq6uESkHD3P1CGUV59C6zNNRoI7QKdQwD_pQaO9yAHdfCL6oyLjTOXXpFRYx0MaKQ/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 1px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd6uTYJoFpYwddq1Jal3hCMcznYvqfYsXNwZuqejiufuZmISz0K9LDB_GUI2gLYlX3veKKcvTUDrpib3LEIoc4hn8NhZPri6Fr4-WnUBlrRt2a1NcJehKckdJJFmXCP0Yc_VRc6qd9MrE/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background: #7BC4DF; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
</style>
<script src="https://farhanshare-blogspot-com.googlecode.com/files/sitemap%20%281%29.js" type="text/javascript"></script><script src="http:// YOUR BLOG LINK /feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</div>

4. Replace YOUR BLOG LINK with your site.
5. Click Save/Publish.

Demo