How to add responsive sitemap page in blogger blog.?
Sitemap:
Sitemap is a map marked with the address of every page on your blog to lead search engine crawlers as well as visitors to where and what they are looking for.
By placing all the URLs on your blog at one place, the visitor can quickly find specific content he wants to read and search engine crawlers can easily index all the pages in your blog.
Today I will show you how to add responsive sitemap page into your blogger blog. Here i selected two sitemap pages of different styles. you can install of your choice.
1-Responsive sitemap page with label tabs:
 |
| Screen shot |
1-Create a new page your blog:
- Sign in to Blogger. Select the blog to update. In the left menu, Pages.
- Click New Page and Editing menu for new page will appear.
- Please make sure on page setting as same as show in above picture.
2-Adding codes:
Copy below CSS,HTML and JavaScript code and past in html editor.
<div id="tabbed-toc"> <span class="loading">Loading, please wait for a moment...</span></div> <script type="text/javascript"> var tabbedTOC = { blogUrl: "http://wikiblogism.blogspot.com", // 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 #ffb700; 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:35px; 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: #ffb700; 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 ##ffb700; -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 13px Roboto,Sans-Serif; } #tabbed-toc .panel li a { display: block; position: relative; font-weight: bold; font-size: 11px; color: #222; line-height: 2.8em; height: 35px; 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:12px; 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>
Customization:
- To change the text when sitemap is loading,replace this "Loading, please wait for a moment..." with your text.
- Replace the http://wikiblogism.blogspot.com with your website url.
- To change the color theme to match with your template,replace FF3333 with your hex color value.
I hope you liked Responsive Sitemap Page. Please don't forget to share with your friends. Thanks
0 comments