Today we are going to tell you how to install ajax based timeline sitemap widget for blogger static .page.Sitemap is a must have web page for each weblog, it may assist to enhance your weblog navigation and likewise to cut back the weblog's bounce price.The sitemap widget we will add right now exhibits an inventory of articles on the most recent revealed order underneath every classes.
How to add a timeline style sitemap widget in blogger template
Installation Steps:
Step 1. First go to Blogger Dashboard > Template > Edit HTML
Step 2. Click inside the HTML Editor, Press CTRL+F
Step 3. Now search for </head>
Step 4. Above </head> place the below code.
<style type='text/css'>
.bsd-sitemap { border-bottom: 3px solid #415471; }.bsd-toc-wrap { display: inline-block; font-family:'Roboto Condensed',Helvetica; width: 100%; }.bsd-toc-wrap .bsd-cat { background: #415471; border-radius: 3px; color: #fff; font-size: 14px; font-weight: bold; padding: 5px 10px; text-transform: uppercase; }.bsd-cat:before{font-family:FontAwesome;content:'\F0A4';color:#fff;margin:0 3px;}.bsd-toc::before { background: #768187; bottom: 0; content: ""; left: 20%; margin-left: -10px; position: absolute; top: 0; width: 4px; }.bsd-toc { margin: 0; padding: 30px 20px; position: relative; }.bsd-toc li { list-style: none; margin: 0; padding: 0; position: relative; }.bsd-toc > li .toc-date { color: #768187; display: block; font-size: 13px; font-weight: bold; position: absolute; text-transform: uppercase; top: 25px; width: 15%; }.bsd-toc > li .bsd-icon { background: #fff; border-radius: 50%; box-shadow: 0 0 0 4px #768187; color: #fff; font-size: 1.4em; font-style: normal; font-variant: normal; font-weight: normal; height: 10px; left: 20%; line-height: 10px; margin: 0 0 0 -25px; position: absolute; text-align: center; text-transform: uppercase; top: 30px; width: 10px; }.bsd-toc > li .bsd-post::after { border-color: transparent #fefefe transparent transparent; border-style: solid; border-width: 10px; content: " "; height: 0; pointer-events: none; position: absolute; right: 100%; top: auto; width: 0; }.bsd-toc > li .bsd-post { background: #eeeeee; border-radius: 4px; display: block; font-size: 14px; line-height: 14px; margin: 0 0 10px 23%; padding: 20px 30px; position: relative; }.bsd-toc > li .bsd-post a { color: #768187; font-weight: bold; }.bsd-toc > li .bsd-post a:hover { color: #415471; }</style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == "static_page"'>
<script src='https://cdn.rawgit.com/ishekharsingh/bloggersstand/master/sitemap.js' type='text/javascript'/>
</b:if>
Customization:
If you already using jquery script then remove the above highlighted script from the code.Step 5. Now Save your template.
Step 6. Now Go to Pages > New page
Step 7. Now write [sitemap] in html mode.
Step 7. Look below in example for adding sitemap widget
Step 9. Now Publish your page and you are done.