How To Add Cool Responsive Sitemap Widget in Blogger Blogs | Lite Blogger Hub

Most of the bloggers who has a blog on blogspot want to make a cool sitemap like WordPress. So, Today we're going to see how to add an stylish three column blogger sitemap with responsive design. This widget is easy to add and it has a cool look when compared to other sitemap widgets.

OK, you can see a live demo of this widget in our blog for better understanding.

Follow the Steps...

1. In the blogger Dashboard, Select your blog
2. Go to Pages >> New Page, then choose HTML tab
3. Paste the following code inside it.

<div dir="ltr" style="text-align: left;" trbidi="on"> <link href="http://dte-project.googlecode.com/svn/trunk/tabbed-toc-skin.css" media="screen" rel="stylesheet" type="text/css"></link> <br /> <div id="tabbed-toc"> <span class="loading">Loading...</span></div> <script type="text/javascript"> var tabbedTOC = { blogUrl: "http://litebloggerhub.blogspot.com/", containerId: "tabbed-toc", // Container ID activeTab: 1, // The default active tab index (default: the first tab) showDates: false, // `true` to show the post date showSummaries: false, // `true` to show the posts summaries numChars: 200, // Number of summary chars showThumbnails: false, // `true` to show the posts thumbnails (Not recommended) thumbSize: 40, // Thumbnail size noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL monthNames: [ // Array of month names "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ], newTabLink: true, // Open link in new window? maxResults: 99999, // Maximum post results preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload") sortAlphabetically: true, // `false` to sort posts by published date showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text }; </script> <script src="http://dte-project.googlecode.com/svn/trunk/tabbed-toc.js" type="text/javascript"></script></div>

After Adding the above code. Replace http://litebloggerhub.blogspot.com/ with your blog link

Then Click on the options on the right sidebar and select Don't allow, hide existing for Reader comments
Now, Click publish and See the page.
That's all, We are done.


I Hope you all like this widget Kindly Let me know your thoughts about the widget and don't forget to share it...

Happy Blogging :)

Want to get updates from LiteBloggerHub?

Subcribe our Email Service to get updates via email. Keep Visiting.... Thanku!