How To Create Stylish Sitemap

Stylish Sitemap

Introduction

Today in this Topic we learn that how we can create A stylish Sitemap which is work both blogger and WordPress.

We just create the sitemap with some simple script. Just follow our simple steps to create a sitemap.

Demo

Here is the Demo Sitemap which we already use in our blogging platform so you can visit and watch the interface.

Set Up

  • Create new page
  • Convert HTML view
  • Copy following Code
  • paste that page and give tittle and save

<div class="tabbed-toc" id="tabbed-toc"></div>

<script>

var tabbedTOC={blogUrl:"https://www.minningtech.in",containerId:"tabbed-toc",activeTab:1,showDates:!0,showSummaries:!1,numChars:200,showThumbnails:!0,thumbSize:60,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:7,newText:' – <em style="color:red;">New</em>'};

</script>

<script src="https://cdn.jsdelivr.net/gh/Indzign/[email protected]/daftarisikeren.js"></script>

<style scoped="" type="text/css">

.tabbed-toc{margin:0 auto;position:relative;background:linear-gradient(-45deg,#EE7752,#E73C7E,#23A6D5,#23D5AB);background-size:400% 400%;animation:Gradient 15s ease infinite}

.tabbed-toc .loading{display:block;padding:2px 12px;color:#fff}

.tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li{margin:0;padding:0;list-style:none}

.tabbed-toc .toc-tabs{width:20%;float:left}

.tabbed-toc .toc-tabs li a{display:block;overflow:hidden;color:#fff;text-decoration:none;padding:12px;font-size:13px;transition:all .3s}

.tabbed-toc .toc-tabs li a:hover{background-color:rgba(0,0,0,0.05)}

.tabbed-toc .toc-tabs li a.active-tab{background:rgba(0,0,0,0.05);position:relative;z-index:5;margin:0 -1px 0 0}

.tabbed-toc .toc-content,.tabbed-toc .toc-line{width:80%;float:right;background-color:#fff;box-sizing:border-box}

.tabbed-toc .toc-line{float:none;display:block;position:absolute;top:0;right:0;bottom:0}

.tabbed-toc .panel{position:relative;z-index:5}

.tabbed-toc .panel li a{color:#1277cb;display:block;position:relative;font-weight:500;font-size:14px;padding:6px 12px;overflow:hidden}

.tabbed-toc .panel li time{display:block;font-weight:normal;font-size:11px;color:#666;float:right}

.tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-size:13px}

.tabbed-toc .panel li .summary img.thumbnail{float:left;display:block;margin:5px 8px 0 0;width:72px;height:72px;background-color:#fafafa}

.tabbed-toc .panel li{background-color:#f9f9f9;margin:0}

.tabbed-toc .panel li:nth-child(even){background-color:#fff}

.tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li.bold a{background-color:rgba(0,0,0,0.03);outline:none}

.tabbed-toc .panel li a em{background:#f39c12;color:#fff!important;font-style:initial;font-size:11px;margin:0 0 0 5px;padding:2px 10px;border-radius:22px}

.tabbed-toc .panel li:before{display:none}

.nightmode .tabbed-toc .toc-content,.nightmode .tabbed-toc .toc-line{background-color:rgba(0,0,0,0.1)}

.nightmode .tabbed-toc{background:rgba(0,0,0,0.1)}

.nightmode .tabbed-toc .panel li{background:rgba(255,255,255,.05)}

.nightmode .tabbed-toc .panel li:nth-child(even){background:rgba(255,255,255,.1)}

@-webkit-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

@-moz-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

@keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

@media (max-width:768px){.tabbed-toc .toc-tabs,.tabbed-toc .toc-content{overflow:hidden;width:auto;float:none;display:block}.tabbed-toc .toc-tabs li{display:inline;float:left}.tabbed-toc .toc-tabs li a.active-tab{background-color:rgba(64,64,64,0.1)}.tabbed-toc .toc-content{border:none}.tabbed-toc .toc-line,.tabbed-toc .panel li time{display:none}}

</style>

Note: You have to replace your Url Adress.

I Hope You will Now Create A Beautiful Sitemap. We regularly post content about Blogging Tutorials & Web Development Tutorials which be very helpful to others.