How To Add Timeline Style Sitemap Widget In Blogger

0 /

Also Read

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='' type='text/javascript'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<script src='' type='text/javascript'/>


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.



Post a comment Blogger Disqus

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

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.
Team Bloggersstand