Create Stylish Sitemap Page In Blogger Blog

In my previous post I shared about "How To Make A Sitemap For Blogger Blogs" & submit to Google Webmaster Tool. This post is totally different from that. It is all about creating a sitemap page in your blog which contains the links of all the post titles in your blog.Blogger does not have such a official sitemap page.Instead it has the Blog Archives in the sidebar.You can add this stylish widget with Table Of Content.

So, blog readers can check each post according to categories.You can easily get this for your blogger blog.I will guide you step by step, follow the given below steps:

Live Demo

You May Like To Read:

• Random Post Widget For Your Blogger Blog
• Customize Blogger's Official Popular Posts Widget

How to Create Stylish Sitemap Page In Blogger Blog

• Go to Blogger Dashboard > Template 
• Backup Your Template > Edit HTML > Proceed
• Press Ctrl+F & Search For

]]></b:skin>

• Paste Below Code Before ]]></b:skin>

.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');
}

• Now Click Pages On Left Sidebar 
• Click On New Page > Blank Page
• Paste Below Code In HTML Area

<script src="http://blogsdaddy.googlecode.com/files/daftarisiv2-pack.js">
</script>
<script src="http://www.BlogsDaddy.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://blogsdaddy.googlecode.com/files/accordion-pack.js" type="text/javascript">
</script>

• Replace BlogsDaddy With Your Own Blog Name
• Now Click On Publish & Its Done

You can add this page link in menu bar, footer, sidebar or where ever you want.If you need any help regarding this widget,Ask me without any hesitation.Happy Blogging & Stay Blessed. :)

Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.