Add Responsive Sitemap To Blogger Blog

Posted by | 4 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

4 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

About The Author

My photo

Nothing Is Special About Me, But I Can Do Something Special. I Am A Young Blogger Blogging As Part Time And Completing My Education. Well ! I Don't Know Very Much About Myself.

Alexa Rank!

Recent Comments

Contact Form

Name

Email *

Message *