Ａｉｎｇ Ｔｏｏｌ

Share On Google+Add This To DeliciousTweet/ReTweet ThisShare on FacebookStumbleUpon ThisDigg This

Table of Content means a list which includes our all posts with sorted by lables and also sorted by alphabets and this plugin is specially made by javascript and many times if we want to add this widget then we have to add many codes and after that we have to replace them by minding the symbols and if a newbie is doing this task for own blog then many times symbol's mistake does by newbie so you can add it direct in your blog without replacing any code OR any blog name. You will gonna add this widget thought widget Generators. So, Hope you gonna like this.

Step Ist- Create List of All Post in Your Blog

• Login to Blogger > Dashborad
• Click on Drop Down Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML
• Press Ctrl + F and search the code shown below.

]]></b:skin>

• Paste below code just before ]]></b:skin>

/*-------Widget By www.widgetgenerators.com-----*/
.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');
}

• Save Your Template.

Step 2nd- Create a New Page named with Sitemap

• Login to Blogger > Dashborad
• Click on Drop Down Menu and select Page
• Create a New Page and Give name Sitemap (Recommended)
• Now Add your blog link in below Generator
  

• Now Paste Generated code in New Page's HTML Format
• Finally Click on Publish button
• You are Done

 Credit of Codes:- blogstable.com

Final Words

This widget is very important from the blogging prospective be'coz many times visitors like our content then he/she try to see all content of blog so that person doesn't open every single post, he/she just see the content and if any post heading he/she like then they post that particular link. Hope you like this.