3 February 2014

Fancy Sitemap Widget for Blogger

Adding a  sitemap widget into your blog is a nice thing always.This will make blog easy to navigate actually.It'll show your visitor all the posts you have into your blog.Sitemap also referred as table of content widget too.Adding a sitemap will definitely increase your number of blog reader and also your blog bounce rate too.So you may already have seen these sitemap widgets on various blog and you may also liked it.So here today we're going to provide such a sitemap widget in a simple way for your blogger blog..You can also get the live demo here below.

Live Demo

 Must Read : Add Marquee on Your Blog

Add Sitemap Page On Blogger

  • Log onto Blogger >> Dashboard >> Pages 
  • Create New Page >> Blank Page

  • Insert Page Title of your choice.
  • Go to HTML tab

  • Copy the Code below and paste there in the HTML tab.

<div dir="ltr" style="text-align: left;" trbidi="on"> <script src=" https://googledrive.com/host/0B6ZMa_AKw94_dnBrQ2hfVTZmMm8"></script> <br /> <script src="http://www.techtrickhome.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script> <br /> <script type="text/javascript"> var accToc=true; </script> <br /> <script src="https://googledrive.com/host/0B6ZMa_AKw94_SWRpSTZoUXRwdm8" type="text/javascript"></script><br /> <style>#blog-pager{display:none} .judul-label{ background-color:#E5ECF9; font-weight:bold; line-height:1.4em; margin-bottom:5px; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 1px 1px 4px #AAAAAA; box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #e9e9e9; border: 2px solid white !important; background: #6e6e6e; background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757)); background: -moz-linear-gradient(top, #888, #575757); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757'); } .data-list{ line-height:1.5em; margin-left:5px; margin-right:5px; padding-left:15px; padding-right:5px; white-space:nowrap; text-align:left; font-family:"Arial",sans-serif; font-size:12px; } .list-ganjil{ background-color:#F6F6F6; } .headactive{ color: #fef4e9; border: 2px solid white !important; background: #1C8DFF; background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2)); background: -moz-linear-gradient(top, #9dc2e7, #438cd2); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2'); } </style></div> <!--INFOLINKS_ON--></div>

  • Now publish the page and you're done.


Replace http://www.techtrickhome.com with your blog url address.

Now take a look into your new sitemap widget.Hope you'd like it.If you're having any problem regarding this ask through your comment.To stay connected with us like our social networking fan pages.You can also subscribe to our rss feed as well.
Articles You May Like

16 comments: Leave Your Comments

  1. Sitemap is very important . Putting sitemap on our website is also good from seo . Sitemap make navigation easy . Thanks for this widget ...

  2. I know thissss.. And I agree! This is very important for blogs especially if you a lot of pages :)

  3. I want to try this but I'm afraid that I'll be screwing my blog. Thank you and will bookmark this for future reference.

  4. Just concerned... wouldn't this widget slow down the loading of a blog's web page? How would this affect it?

  5. That is an ingenious way of customizing your blog and I will definitely try it!

  6. I've been looking how to make this and I end up letting someone do this. I'm crazy it so easy to do. Meh thanks for sharing!

  7. The site map that you bring to our attention is a really necessary tool for improving search engine visibility and rankings.

  8. Oh thank you for elaborating on this essential must-have for every successful blogger. Thus our blogs will be easy to navigate!!!

  9. site maps are very useful for big sites with a lot of infos :) this is really cool!!

  10. i want to try this hope i could get it right :) thanks for sharing

  11. thanks for this one - have to try it on my blog.

  12. this is very useful for bloggers using Blogger! Makes me want to go back there =) Thanks for sharing!


  13. I also use blogger and it's weird that they don't have a sitemap page.

  14. The ease of navigation with this sitemap can really help you promote your other posts within the site.

  15. This is really a helpful post to those who use the blogger platform.