How To Add Cool Responsive Sitemap Table Widget To All Blogger Blogs

How To Add Cool Responsive Sitemap Table Widget To All Blogger Blogs

Thank GOD for yet another day, for HIS guidance and HIS protection. For the fact that we are Alive is one thing to thank GOD about. 

Today we are going to share with you something that has been in the system for some time now, may be you don't know about it but it is not new. It is called a Sitemap, this is basically not that king of sitemap that should be submitted to Google or all other search engines that demands it, but this sitemap is merely just a table of content including all your post from time memorial under it's respective labels or categories.

As you can see in the image above. Someone might ask what is the essence or usefulness of this widget ? It is a good question with a simple answer. Just as you are able to navigate through a book and find what you are looking for same way you reader would have to search and find what he or she is looking as simple as that.

It helps your readers to easily navigate through your blog and helps reduce bounce rate. Readers spend more time on your blog finding interesting topics to read. 
This widget was made possible by this two gentle pro bloggers +Chandeep J and +Ankit Kumar Singla who have worked on the Sitemap widget to make it more attractive. all credits goes to them. 

How To Add Sitemap Widget To Your Blog

*   Log in your blogger Dashboard and select the blog in question. 
*   You would to create a page for the sitemap. 
*  Navigate to Pages  and click on new Page, then select HTML section 
*   Copy and Paste the following code inside it and save/publish your page

<script src="" type='text/javascript'></script>
<script src="PUT YOUR BLOG SITE LINK HERE/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<style type="text/css">
.post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; }
.post-archive h4 { border-bottom: 2px solid #EEEEEE; color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; }
.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}
.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }
.ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #FFFFFF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; }
.ct-columns-3 p a:hover { background: #555; color: #fff; }
@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } }

Remember to do this 

Click on the options at the top  right sidebar and select Don't allow, hide existing  Reader comments. Now after that, Click publish and See your new page.

Please subscribe to our email updates list and stay updated of our new post, have any question concerning this widget please leave us a comment, and if the widget worked for you please again leave us a comment..Happy blogging

0 default, disqus:

Post a Comment