How To Make A Stylish HTML Sitemap On Blogger

How to make a stylish HTML sitemap on blogger

A Blog webpage become well known by their novel substance. Furthermore, on the off chance that your website has progressively novel substance, at that point your Blog will be increasingly mainstream. Then again, guests love to see colossal substance in a site in this manner they get everything from one site. So Blogger should cover a wide range of point in this manner guests don't leave your website in the wake of arriving inside 1 or 2 minutes. There are many site those are structured terribly. Since site isn't easy to use. Also, to make a site easy to use, your site must contain simple route and search choices. However, Blog guests don't regularly prefer to look through the substance since certain clients hasn't any state-of-the-art thought regarding most recent discharge. So for this situation in the event that they visit whole Blog webpage, at that point they will get a thought regarding the substance. Be that as it may, this isn't workable for all clients. So to explain this issue Sitemap or Table of Content works like enchantment. since a guest can see all substance on any Blog at once and they can look through their favored substance.

For the most part a Sitemap or Table of Content showcase the all out number of posts in a site accordingly guests can undoubtedly explore to the wanted substance. There are many Blog guests the individuals who don't prefer to see each post part by part and they feel enthusiasm by perusing the Content features as it were. So Sitemap or Table of Content gadget is perfect for those sorts of perusers. Moreover, this sitemap has a few advantages. For example, follows-

• Visitors can see all posts at a glance.
• Visitors can easily navigate in any post.
• Not any extra loading time required.
• Your site will look like a professional

How To Make A Stylish HTML Sitemap On Blogger

PREVIEW
In this article I am going to share a beautiful Sitemap or Table of Content which is really professional. And it will load instantly. However don't worry about loading time because it will load instantly. Generally ideal place for sitemap is Blogger page. For this reason, I will show you about adding Sitemap or Table of Content in a Blogger page. So to add this Sitemap or Table of Content widget please follow the below steps-

1. Sign in to your Blogger account and go to Dashboard
2. From the Dashboard, click New page from Pages tab.
3. After that now switch Compose view to HTML view and paste the below code.
   

   

   HTML TAB

   <style scoped="" type="text/css">
   #bp_toc {background:#008CDB;color:#666;margin:0 auto;padding:5px;}
   span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#FAFAFA;font-family:'Trebuchet MS';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
   .toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
   .toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
   .toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
   .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
   text-decoration:none;color:#aaa;font-family:'Trebuchet MS';font-weight:700;letter-spacing: 0.5px;}
   .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
   text-decoration:none;}
   .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
   .toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
   .toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
   #bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
   .toc-entry-col1 {counter-increment:rowNumber;}
   #bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
   td.toc-entry-col2 {background:#fafafa;}
   #comments {display:none;}
   </style>
   
   <br />
   <div id="bp_toc" style="max-height: 1200px; overflow-x: auto; overflow: scroll;">
   </div>
   <script src="https://sites.google.com/site/sayemmiaji/home/sayemmiaji/sitemap.js?attredirects=0&amp;d=1" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

   
   
4. Customization
   *To adjust the page height please alter max-height:1200px with greater or lesser pixel number.
*To change the table header and border-color please change the background:#008CDB;. you can get the color code from our Color Picker.

And now simply click on the Publish button from the top right corner. 

Now check your Sitemap or Table of the Content page and see this will show all the post's headline, Post date and label of your Blog.