How to Add Widgets Sitemap Blog

How to Add Widgets Sitemap Blog - Actually tutorial how to add widgets sitemap or table of contents of blog posts that will I share this has been I made. However, the blog may rarely visited so will I bear back here. 


The advantage to this is added a sitemap widget for blogs appear more professional than before. In addition, visitors can also view and search all our blog articles with ease. Surely it will add a plus to a blog if a visitor came to certain articles in this sitemap widget. Ok just, how to implement them is very easy. Please follow the steps below: First, open Blogger> Pages> Create New Page> Apply the code below in the HTML tab




<Div id = "bp_toc"> </ Div> <Script src = "https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type = "text / javascript"> </ script> <script src = "/ feeds / posts / summary? alt = json-in-script & amp; max-results = 9999 & amp; callback = loadtoc "type =" text / javascript "> </ script> <Style scoped = "" type = "text / css"> #comments {display: none;} </ Style>






And then publish the page.  

Then click Template> Go to Edit Template>  Apply the code  below right before the   </style>




/ * CSS Full Sitemap * / #bp_toc {background: # ffaaa4; color: # 666; margin: 0 auto; padding: 5px;} span.toc-note {padding: 20px; margin: 0 auto; display: block; text-align: center; color: #ffcfcc; font-family: 'Open Sans'; 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: 'Open Sans'; 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;}



Specify the use of fonts and colors to suit your blog. Finally, save the template.  If your blog is already there are hundreds of articles, it is worth the high limit pages by adding style to the first code. For example like this:



<Div id = "bp_toc" style = "max-height: 1300px; overflow: scroll; overflow-x: auto;"> </ Div> <Script src = "https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type = "text / javascript"> </ script> <script src = "/ feeds / posts / summary? alt = json-in-script & amp; max-results = 9999 & amp; callback = loadtoc "type =" text / javascript "> </ script> <Style scoped = "" type = "text / css"> #comments {display: none;} </ Style>


Please specify the value of max-height on top as desired/.


                                                    RESULT