If you are looking for how to add a New Tab Look Sitemap On Blogger website then this post is just for you.
I am Monish. I have been involved with coding for a long time. I will give you proper advice from long experience so let's start.
We only used then HTML, CSS and JS. Are you upset about your website speed? do not worry it doesn't affect your website speed.
Also do not worry about it this Accordion Section also has dark mode CSS that you just want to change the dark mode class that we gave with your theme dark mode class, you can fluently change it by following this tutorial precisely.
Benefits:-
- Benefits:- New Design for Sitemap with tab design!
- Get rip of the sitemaps' old look.
So without wasting important time let's check How to Create a New Tab Look Sitemap for Blogger?
You can see the demo here:-
How to Create a New Tab Look Sitemap for Blogger?
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click Pages and creat a new Page.
Step 3: Then if you are doing this in page then In post editor view, click icon at the bottom right of the title.Two options will appear: HTML view and Writing view, Select 'HTML View'.
Step 4: Now paste the following HTML code to that place
<!---[ Sitemap source by The Pro Project ]--->
<script src="//dte-project.github.io/blogger/tabbed-toc.min.js?active=0&load=true&ad=false&date=%25M~%25%20%25D%25%2C%20%25Y%25" defer="defer"></script>
<style>.tabbed-toc{border:0;font-size:15px}.tabbed-toc-tabs{width:10em;font-size:14px}.tabbed-toc-tab{padding:0 15px;border-radius:3px 0 0 3px;position:relative;transition:var(--trans-1);color:inherit}.tabbed-toc-tab::after{content:'';position:absolute;top:0;bottom:0;right:0;border-right:1px solid var(--linkC);opacity:0}.tabbed-toc-tab.active,.tabbed-toc-tab:hover{background:var(--transB)}.tabbed-toc-tab.active::after,.tabbed-toc-tab:hover::after{opacity:1}.tabbed-toc-tab.active{color:var(--linkC);opacity:.7}.ltr .tabbed-toc-panels{border-color:var(--contentL)}.ltr .tabbed-toc-time{position:relative;font-size:12px;opacity:.7}.tabbed-toc li{padding:5px 7.5px;line-height:1.6em;min-height:40px;display:flex;align-items:center;justify-content:space-between}.tabbed-toc li>*{padding:0 7.5px;margin:0}.tabbed-toc a{color:inherit}.tabbed-toc-title{font-size:16px}.tabbed-toc-title sup{font-weight:400;font-size:12px;color:var(--linkC)}.drkM .ltr .tabbed-toc-panels{border-color:rgba(255,255,255,.1)}.drkM .tabbed-toc-tab.active,.drkM .tabbed-toc-title sup{color:var(--darkL)}.drkM .tabbed-toc-tab::after{border-color:var(--darkL)}@media screen and (max-width:750px){.tabbed-toc nav{display:flex;overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}.tabbed-toc nav::-webkit-scrollbar{width:0;height:0}.tabbed-toc nav::-webkit-scrollbar-track{background:0 0}.tabbed-toc nav::-webkit-scrollbar-thumb{background:0 0;border:none}.tabbed-toc-tab{border-radius:3px 3px 0 0;white-space:nowrap;flex-shrink:0;scroll-snap-align:start}.tabbed-toc-tab::after{top:auto;left:0;border-right:0;border-bottom:1px solid var(--linkC)}.tabbed-toc ol{margin-top:15px;padding:0 15px;list-style:decimal}.tabbed-toc li{display:list-item;padding:5px 0;overflow:visible;list-style:inherit}.drkM .tabbed-toc-tab::after{border-color:var(--darkL)}}@media screen and (max-width:500px){.tabbed-toc-title{font-size:15px}}</style>
Step 5: Then Save or Publish.
Terms of Use
To appreciate our workshop, consider keeping the credits in canons.
We do not allow to rewrite this post in any manner. Do not copy this post, canons or any part from this composition without authorization, it's rigorously prohibited.However, Legal conduct will be taken, If you do so.
Conclusion
In this article I have made a tutorial on How to Create a New Tab Look Sitemap for Blogger. I Hope you have liked this article and please do share with your friends and follow up blog for more.
Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © The Pro Project | All Rights Reserved
© Copyright:
www.the-pro-project.blogspot.com