Responsive sitemap widget for blogger





This sitemap help readers to navigate to our blog easily and it also helps our blog by decreasing its bounce rate


This is a very responsive sitemap widget for blogger, you can choose one with Thumbnail or just a simple one to install


To add this Sitemap widget in your blog just follow the below instructions.


Go to Blog Title → Page → New Page → Blank Page → HTML and paste the below-given code in the post editor.



<script src="http://files.allbloggertricks.com/Scripts/sitemap.js" type='text/javascript'></script> <script src="http://www.yoururlhere.com/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; } } </style> 


After adding change the URL in bold with your blog URL. After that Publish the page and you would be able to see this elegant sitemap on your blog


Sitemap with Thumbnail for Blogger






<script src='https://bloggertipstricks.googlecode.com/files/bloggertipstricks.com-sitemap.js'> </script> <script style='text/javascript'> var numposts = 999; var showpostthumbnails = true; var displayseparator = true; </script> <script src="http://www.yoururlhere.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=recent&amp;max-results=999"></script> .sitemap-container {width: 100%; height: 105px; border-top: 2px solid #eee;} .sitemap-container:hover {background-color:#fafafa;} .thumbnail {width: 60px; height: 90px; float: left; top:0px;} .posttitle {height: 90px; float: left; line-height: 90px; margin-left:25px; display:block; width:80%; white-space:nowrap;} #postimg {margin-top: 10px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width: 60px; border: 2px solid #eee;} #list{list-style-type: none; padding-left: 0px; margin-left: 0px;} </style> 


you are done, now you can choose any and install. 
I hope this helps, feel free to drop a comment if you encounter any issue and I will respond with a solution.

Share:

0 comments