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.
- In the blogger Dashboard, Select your blog
- Go to
Pages
>New Page
, then chooseHTML
Part - 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&alt=json-in-script&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
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
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
ReplyDeleteRemove 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.
DeleteYour website is so good, i like it...very much
ReplyDeleteThanks a lot buddy, I am happy to know, you have liked it.
DeleteDoes anyone know which is the best service among those listed on this site? https://vancouverseo.net/seo-for-small-business/
ReplyDelete