How To Add Timeline Style Sitemap Widget In Blogger

0
How To Add Timeline Style Sitemap Widget In Blogger
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: &quot;&quot;; 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 &gt; li .toc-date { color: #768187; display: block; font-size: 13px; font-weight: bold; position: absolute; text-transform: uppercase; top: 25px; width: 15%; }.bsd-toc &gt; 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 &gt; li .bsd-post::after { border-color: transparent #fefefe transparent transparent; border-style: solid; border-width: 10px; content: &quot; &quot;; height: 0; pointer-events: none; position: absolute; right: 100%; top: auto; width: 0; }.bsd-toc &gt; 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 &gt; li .bsd-post a { color: #768187; font-weight: bold; }.bsd-toc &gt; 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 == &quot;static_page&quot;'>
<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
create static sitemap in blogger

Step 9. Now Publish your page and you are done.
trick to install ajax based timeline style unique static sitemap widget gadget for blogger static pages.display labels and category in responsive sitemap for custom theme.
Today we are going to tell you how to install ajax based timeline sitemap widget for blogger s...
SUMMARY

trick to install ajax based timeline style unique static sitemap widget gadget for blogger static pages.display labels and category in responsive sitemap for custom theme.

You Might Also Like:

We hope this article helped you to learn How To Add Timeline Style Sitemap Widget In Blogger. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "How To Add Timeline Style Sitemap Widget In Blogger" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand