Add Responsive Sitemap To Blogger Blog

Posted by | 5 comments
Many bloggers who are blogging on blogger.com want a sitemap that they can create for their readers like wordpress. But, blogger has not such facility. And the sitemap/table of content is not enough to compete with wordpress. Now, I am going to give you tutorial to make an awesome responsive sitemap just like wordpress. Click here to See Demo.


Add Sitemap Widget To Your Blog.

  1. In the blogger Dashboard, Select your blog
  2. Go to Pages > New Page, then choose HTML Part
  3. Paste the following code inside it. 
<script src="https://dl.dropboxusercontent.com/u/36169749/scripts/widgets/btnt-sitemap.js" type='text/javascript'></script>
<script src="http://www.mybloggertipsandtricks.blogspot.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 pasting the code, replace mybloggertipsandtricks.blogspot.com with your website link. 
  • Now, Click publish and done, your blog has sitemap like wordpress. 
Must Read: Get The Logo Creator V 6 Free, Legal And Full Version

If you want to change something that you doesn't like then comment below. I will help you. Credit goes to http://www.blogtipsntricks.com

5 comments:

  1. It wont let me copy and past the code...when i copy it this is what i get - See more at: http://www.theproblogging.com/2013/05/add-responsive-sitemap-to-blogger-blog.html#sthash.DUo9Q3Tf.dpuf then nothing happens to my page can you please help

    ReplyDelete
    Replies
    1. Remove this: http://www.theproblogging.com/2013/05/add-responsive-sitemap-to-blogger-blog.html#sthash.VQobHtql.dpuf and then try. If you get any error then give me your link where you have put the code.

      Delete
  2. Your website is so good, i like it...very much

    ReplyDelete
    Replies
    1. Thanks a lot buddy, I am happy to know, you have liked it.

      Delete
  3. Does anyone know which is the best service among those listed on this site? https://vancouverseo.net/seo-for-small-business/

    ReplyDelete

Alexa Rank!

Recent Comments

Contact Form

Name

Email *

Message *