How To Create Table Of Content or Sitemap in Blogger

Today I’m here with a new widget for your Blogger Blog. This is also great widget for you blog. Because Every table of content what categorize, showing here with links. So, your visitors can check every post according to categories.Try to add it to your blog. Hope You will like this sitemap generator widget or we can also say table of content widget for your blogger blog.
So if you want to add manually sitemap in your blogger blog or if you want to show your table of content of your blogger blog to your readers then this widget can help you a lot for creating sitemap or table of content.

Steps for Create Table Of Content or Sitemap in Blogger

  • Go to Blogger Dashboard.
  • Click on Template >> Edit HTML
  • By pressing CTRL+F Search for ]]></b:skin> tag.
  • Now Copy Below Code and Paste it just above of ]]></b:skin> tag.

.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 Save Template. 
  • Now Go To Pages.
  • Paste Below Code in HTML Area.

<script src=”http://nurulimaminfo.googlecode.com/files/daftarisiv2-pack.js”>
</script>
<script src=”https://www.mybloggerguides.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://deroc.googlecode.com/files/accordion-pack.js” type=”text/javascript”>
</script>

  • Now Change www.mybloggerguides.com in to your’s.
  • Now Click On Publish.
  • That’s it. You have successfully added this widget in your blogger blog.

Our Recommended Blogger Widgets

  1. WordPress Like Floating Social Sharing Widget for Blogger with Counter.
  2. AllInOne Admin Box Widget with Social buttons and Subscription Box.
  3. Add Sticky Notification Bar To Blogger with Show/Hide Button.
  4. Stylish Contact Form For Blogger! Add to Static Page, Responsive & Pro Version.
  5. Cute & Stylish Email Popup Subscription Widget.

 

    Conclusion:

    So above guide is about How To Create Table Of Content or Sitemap in Blogger Blog and i hope by using this widget you can increase page views of your blogger blog. Hope you will like this post and if you have any query related to this article then drop a comment below. Do Share On Blogging Communities and also with your Blogger friends.
    Thank You! Stay Blessed!
    Paramjot Singh
     

    Hey, How you all are? Myself Paramjot Singh, A young (Not Old :P) addicted Blogger from Lucknow, India who want to learn Aha to Shit of the Blogging. I’m blogging since 2 years, and here on My Blogger Guides, I’m sharing my little mind knowledge which I learned in these past two years. :)

    Click Here to Leave a Comment Below 0 comments

    Leave a Reply:

    0 Shares
    +1
    Pin
    Tweet
    Stumble
    Share
    Share