Oct 6, 2015

How To Create Table Of Content or Sitemap in Blogger

data:blog.title
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.

How To Create Table Of Content or Sitemap in Blogger

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="http://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!

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.