Add Tabbed Style Sitemap Widget to Blogger

Hello Reader! hope you are everyone is well. After a long time working now I am come with an awesome blogger table of content/Sitemap widget for you. This sitemap widget is totally different form other older style sitemap. This sitemap is tabbed style and made with some new JavaScript codes, that�s make this widget is totally unique and look much attractive. This widget�s is tested on responsive template, and working very well. However now we will see that how to add this widget on your blog.

Live Demo

How to add Setup Sitemap to Blogger Blog?

Follow our instructions carefully to setup it on your blog perfectly.

1. First Go to Blogger > Pages

2. Now Click On New Page �Blank Page�

3. Now Select �HTML� page

4. Now Copy the Code Given Below and Paste it to Here

<style>
/*Sitemap
----------------------------------------------- */
#tabbed-toc{-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);background-color:#111;box-shadow:0 1px 3px rgba(0,0,0,.4);color:#333;margin:0 auto;overflow:hidden;position:relative;width:99%;}
#tabbed-toc .loading{color:#FFF;display:block;font:normal bold 10px Arial,Sans-Serif;padding:5px 10px;}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li{list-style:none;margin:0;padding:0;}
#tabbed-toc .toc-tabs{float:left;width:20%;}
#tabbed-toc .toc-tabs li a{color:#ccc;cursor:pointer;display:block;font:normal bold 10px/28px Arial,Sans-Serif;height:28px;overflow:hidden;padding:0 12px;text-decoration:none;text-overflow:ellipsis;text-transform:uppercase;}
#tabbed-toc .toc-tabs li a:hover{background-color:#444;color:#FFF;}
#tabbed-toc .toc-tabs li a.active-tab{-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);background-color:#e74c3c;box-shadow:-2px 2px 2px rgba(0,0,0,.5);color:#FFF;margin:0 -1px 0 0;position:relative;z-index:5;}
#tabbed-toc .toc-content,#tabbed-toc .divider-layer{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;background-color:#FFF;border-left:5px solid #e74c3c;box-sizing:border-box;float:right;width:80%;}
#tabbed-toc .divider-layer{-moz-box-shadow:0 0 7px rgba(0,0,0,.7);-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);bottom:0;box-shadow:0 0 7px rgba(0,0,0,.7);display:block;float:none;position:absolute;right:0;top:0;}
#tabbed-toc .panel{font:normal normal 10px Arial,Sans-Serif;position:relative;z-index:5;}
#tabbed-toc .panel li a{color:#333;display:block;font-size:11px;font-weight:700;height:30px;line-height:30px;outline:none;overflow:hidden;padding:0 12px;position:relative;text-decoration:none;}
#tabbed-toc .panel li time{color:#666;display:block;float:right;font-size:10px;font-style:italic;font-weight:400;}
#tabbed-toc .panel li .summary{border-bottom:4px solid #275827;display:block;font-style:italic;overflow:hidden;padding:10px 12px;}
#tabbed-toc .panel li .summary img.thumbnail{background-color:#fafafa;border:1px solid #dcdcdc;display:block;float:left;height:72px;margin:0 8px 0 0;padding:4px;width:72px;}
#tabbed-toc .panel li:nth-child(even){background-color:#f1f1f1;color:#fff;font-size:10px;}
#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover time,#tabbed-toc .panel li.bold a{background-color:#333;color:#FFF;outline:none;}
#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time{background-color:#222;}
@media max-width700px {
#tabbed-toc{background-color:#fff;border:0 solid #888;}
#tabbed-toc .toc-tabs,#tabbed-toc .toc-content{display:block;float:none;overflow:hidden;width:auto;}
#tabbed-toc .toc-tabs li{display:inline;float:left;}
#tabbed-toc .toc-tabs li a,#tabbed-toc .toc-tabs li a.active-tab{-moz-box-shadow:2px 0 7px rgba(0,0,0,.4);-webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);background-color:#111;box-shadow:2px 0 7px rgba(0,0,0,.4);color:#ccc;}
#tabbed-toc .toc-tabs li a.active-tab{background-color:#DF1010;color:#fff;}
#tabbed-toc .toc-content{border:none;}
#tabbed-toc .divider-layer,#tabbed-toc .panel li time{display:none;}
}
</style>
<div id="tabbed-toc">
<span class="loading">Loading...</span></div>
<br />
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "tips4tricx.blogspot.Com/",
containerId: "tabbed-toc",
activeTab: 1,
showDates: false,
showSummaries: false,
numChars: 200,
showThumbnails: false,
thumbSize: 40,
noThumb: "",
monthNames: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
newTabLink: true,
maxResults: 99999,
preload: 0,
showNew: 7,
newText: " - <em style='color:red;'>New!</em>"
};
</script>
<script type="text/javascript" src="http://yourjavascript.com/24184422821/tabbed-toc.js"></script>
<small><div style="font-size:50%; text-align:right;"><a href="https://tips4tricx.blogspot.com/2015/07/add-tabbed-style-sitemap-widget-to.html" target="_blank" title="Get This Widgets">Widget by tips4tricx.blogspot.Com</a></div></small>