Create Awesome Responsive CSS Sitemap Page in Blogger

In this post I will try to create an awesome CSS sitemap page in a blogger.

 

                                                                 VIEW DEMO

How to Add Widgets Sitemap in Blogger

1. Login to your blogger account

2. Go to create new page >> blank page. Write sitemap in the title

3. Paste the below code in HTML tab and publish the page.

<div id="tabbed-toc">

<span class="loading">Loading, please wait for a moment...</span></div>

<br />

<script type="text/javascript">

var tabbedTOC = {

    blogUrl: "http://shmhack.blogspot.in/", // Enter your blog URL

    containerId: "tabbed-toc", // Container ID

    activeTab: 1, // The default active tab index (default: the first tab)

    showDates: false, // `true` to show the post date

    showSummaries: false, // `true` to show the posts summaries

    numChars: 200, // Number of summary chars

    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)

    thumbSize: 40, // Default thumbnail size

    noThumb: "", // A "no thumbnail" URL

    monthNames: [ // Array of month names

        "January",

        "February",

        "March",

        "April",

        "May",

        "June",

        "July",

        "August",

        "September",

        "October",

        "November",

        "December"

    ],

    newTabLink: true, // Open link in new window. `false` to open in same window

    maxResults: 99999, // Maximum post results

    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")

    sortAlphabetically: true, // `false` to sort posts by published date

    showNew: 7, // `false` to hide the "New!" mark in most recent posts or

 //define how many recent posts are to be marked by changing the number

    newText: " - <em style='color: white;padding: 1px 5px;border-radius: 20px;background-color: #F00;'>New!</em>" // HTML/CSS for

//the "New!" text

};

</script>

<script src="https://googledrive.com/host/0B_PLgWpOK_wTazVMekZ3TTBiY2M/" type="text/javascript"></script>

<style>

/*Sitemap  */

#tabbed-toc {

 width: 99%;

 margin: 0 auto;

 overflow: hidden !important;

 position: relative;

 color: #222;

 border: 0;

 border-top: 5px solid #FC0204;

 background-color: #1D1D1D;

 -webkit-transition: all 0.4s ease-in-out;

}

#tabbed-toc .loading {

 display:block;

 padding:5px 15px;

 font:normal bold 11px Arial,Sans-Serif;

 color:#FFF;

}

#tabbed-toc ul,

#tabbed-toc ol,

#tabbed-toc li {

 margin:0;

 padding:0;

 list-style:none;

 }

#tabbed-toc .toc-tabs {

 width: 24.8%;

 float: left !important;

}

#tabbed-toc .toc-tabs li a {

 display:block;

 font:normal bold 10px/28px Arial,Sans-Serif;

 height:28px;

 overflow:hidden;

 text-overflow:ellipsis;

 color:#ccc;

 text-transform:uppercase;

 text-decoration:none;

 padding:0 12px;

 cursor:pointer;

  -webkit-transition: all 0.3s ease-in-out;

}

#tabbed-toc .toc-tabs li a:hover {

 background-color: #515050;

 color: #FFF;

 }

#tabbed-toc .toc-tabs li a.active-tab {

 background-color: #00ccff;

 color: #222;

 position: relative;

 z-index: 5;

 margin: 0 -2px 0 0;

}

#tabbed-toc .toc-content,

#tabbed-toc .divider-layer {

 width: 75%;

 float: right !important;

 background-color: #F5F5F5;

 border-left: 5px solid #00ccff;

 -webkit-box-sizing: border-box;

 -moz-box-sizing: border-box;

 box-sizing: border-box;

 -webkit-transition: all 0.3s ease-in-out;

}

#tabbed-toc .divider-layer {

 float:none;

 display:block;

 position:absolute;

 top:0; right:0; bottom:0;

}

#tabbed-toc .panel {

 position:relative;

 z-index:5;

 font:normal normal 10px Arial,Sans-Serif;

}

#tabbed-toc .panel li a {

 display: block;

 position: relative;

 font-weight: bold;

 font-size: 11px;

 color: #222;

 line-height: 2.8em;

 height: 30px;

 padding: 0 10px;

 text-decoration: none;

 outline: none;

 overflow: hidden;

 -webkit-transition: all 0.3s ease-in-out;

}

#tabbed-toc .panel li time {

 display:block;

 font-style:italic;

 font-weight:400;

 font-size:10px;

 color:#666;

 float:right;

}

#tabbed-toc .panel li .summary {

 display:block;

 padding:10px 12px;

 font-style:italic;

 border-bottom:4px solid #275827;

 overflow:hidden;

}

#tabbed-toc .panel li .summary img.thumbnail {

 float:left;

 display:block;

 margin:0 8px 0 0;

 padding:4px;

 width:72px;

 height:72px;

 border:1px solid #dcdcdc;

 background-color:#fafafa;

}

#tabbed-toc .panel li:nth-child(even) {

 background-color: #DBDBDB;

 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:#222;

 color:#FFF;

 outline:none;

 -webkit-transition: all 0.3s ease-in-out;

}

#tabbed-toc .panel li.bold a:hover,

#tabbed-toc .panel li.bold a:hover time {

 background-color:#222;

}

@media (max-width:700px) {

#tabbed-toc {

 background-color:#fff;

 border:0 solid #888;

}

#tabbed-toc .toc-tabs,

#tabbed-toc .toc-content {

 overflow:hidden;

 width:auto;

 float:none !important;

 display:block;

}

#tabbed-toc .toc-tabs li {

 display:inline;

 float:left !important;

}

#tabbed-toc .toc-tabs li a,

#tabbed-toc .toc-tabs li a.active-tab {

 background-color:#222;

 color:#ccc;

}

#tabbed-toc .toc-tabs li a.active-tab {

 color:#000;

}

#tabbed-toc .toc-content {

 border:none;

}

#tabbed-toc .divider-layer,

#tabbed-toc .panel li time {

 display:none;

}

}

</style></div>

So friends you learned how to create a beautiful sitemap page with help CSS in blogger blog. Well, I am waiting your feedback in the comment section below.