Want More Tutorials ? Request!

How To Add New Tab Look Sitemap for Blogger

Hello Guys and welcome to SR7Themes In Our Tutorial today is about How To Add New Tab Look Sitemap for Blogger
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
How To Add New Tab Look Sitemap for Blogger

Hello Guys and welcome to SR7Themes Our Tutorial today is about How To Add New Tab Look Sitemap for Blogger

Benefits :-

  1. New Design For Sitemap with the tab design!
  2. Get Rid of the old look of the sitemaps
Let's Start
Demo

How To Add New Tab Look Sitemap for Blogger :-

Step 1 :- Go to Blogger's dashboard and click theme.
Step 2 :- Click the arrow down icon next to the 'customize' button.
Step 3 :- Click Edit Html.
Step 4 :- Click on any word then Press CTRL+ F and type in the search form ]]></b:skin>.
Step 5 :- Copy the provided below code and paste it just before ]]></b:skin>.

<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:hover, .tabbed-toc-tab.active{background:var(--transB)}   .tabbed-toc-tab:hover::after, .tabbed-toc-tab.active::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; /*position:relative;width:calc(100% + 40px);left:-20px;right:-20px;padding:0 20px*/}     .tabbed-toc nav::-webkit-scrollbar{width:0;height:0}     .tabbed-toc nav::-webkit-scrollbar-track{background:transparent}     .tabbed-toc nav::-webkit-scrollbar-thumb{background:transparent;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 :- Replace all the blue background marked parts according to your theme.

Step 6 :- Add this Html code to use the button in your posts or pages

<script>!function(e,t){window.q2o=function(e,t){function r(e){return decodeURIComponent(e)}function n(e){return void 0!==e}function a(e){return"string"==typeof e}function i(e){if(a(e)){if("true"===e)return!0;if("false"===e)return!1;if("null"===e)return null;if("'"===e.slice(0,1)&&"'"===e.slice(-1))return e.slice(1,-1);if(/^-?(\d*\.)?\d+$/.test(e))return+e;if(function(e){return!(!a(e)||""===e.trim())&&('""'===e||"[]"===e||"{}"===e||'"'===e[0]&&'"'===e.slice(-1)||"["===e[0]&&"]"===e.slice(-1)||"{"===e[0]&&"}"===e.slice(-1))}(e))try{return JSON.parse(e)}catch(e){}}return e}var s={},l=e.replace(/^.*?\?/,"");return""===l?s:(l.split(/&(?:amp;)?/).forEach(function(e){var a=e.split("="),l=r(a[0]),o=!n(a[1])||r(a[1]);o=!n(t)||t?i(o):o,"]"===l.slice(-1)?function(e,t,r){for(var n,a=t.split("["),i=0,s=a.length;s-1>i;++i)e=e[n=a[i].replace(/\]$/,"")]||(e[n]={});e[a[i].replace(/\]$/,"")]=r}(s,l,o):s[l]=o}),s)}}(),function(e,t){function r(e){return encodeURIComponent(e)}function n(e){return void 0!==e}function a(e){return"string"==typeof e}function i(e){return"number"==typeof e||/^-?(\d*\.)?\d+$/.test(e)}function s(e){return null!==e&&"object"==typeof e}function l(e,t){for(var r in t=t||{},e)n(t[r])?s(e[r])&&s(t[r])&&(t[r]=l(e[r],t[r])):t[r]=e[r];return t}function o(e,t,r){e.addEventListener(t,r,!1)}function c(e,r,a){if(e=t.createElement(e),n(r)&&""!==r&&(e.innerHTML=r),s(a))for(var i in a)!1!==a[i]&&e.setAttribute(i,a[i]);return e}function d(e,t){var r;for(t=t.split(/\s+/);r=t.shift();)e.classList.add(r)}function u(e,t){var r;for(t=t.split(/\s+/);r=t.shift();)e.classList.remove(r)}function f(e,t,r){t&&e.insertBefore(t,r)}var p=e.q2o,h=t.currentScript,m=e.location,g=e.localStorage,y={},v=[],b={},x=Date.now(),$={i:x,direction:"ltr",url:m.protocol+"//"+m.host,name:"tabbed-toc",css:1,sort:1,ad:!0,active:0,container:0,date:"%M~% %D%, %Y% %h%:%m% %N%",excerpt:0,image:0,target:0,load:0,recent:7,hide:[],text:{title:"Table of Content",loading:"Loading&hellip;",noon:["AM","PM"],months:["January","February","March","April","May","June","July","August","September","October","November","December"],days:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],recent:" <sup>New!</sup>"},query:{alt:"json",orderby:"published","max-results":9999,"start-index":1}},w=t.head,N=l($,p(h.src));function M(e,t){var n,a=[];for(n in e)a.push(r(n)+"="+r(e[n]));return"?"+a.join(t||"&")}function k(e,t){return e=(e+"").split(/[?&#]/)[0].replace(/\/+$/,""),n(t)&&(e=e.replace(/\.[\w-]+$/,t?"."+t:"")),e}function S(e){return i(e)?("file:"===m.protocol?"https:":"")+"//www.blogger.com/feeds/"+e+"/posts/summary":k(e)+"/feeds/posts/summary"}function C(e,t,r){var n=/\.css$/i.test(k(e)),a=c(n?"link":"script","",l(n?{href:e,rel:"stylesheet"}:{src:e},r));return a.readyState?a.onreadystatechange=function(){"loaded"!==a.readyState&&"complete"!==a.readyState||(a.onreadystatechange=null,t&&t(a))}:t&&o(a,"load",t),f(w,a,w.firstChild),a}var T,j,q=N.i,D=N.id||k(N.url),L=N.name,_=N.ad,I=N.text,E=N.e,A=c("div",'<h3 class="'+L+'-title">'+I.title+"</h3>",{class:L+" "+N.direction,id:L+":"+q}),J=c("p",I.loading,{class:L+"-loading"});function O(e,t,r){(r=r||[]).unshift(t),"function"==typeof E&&E.apply(e,r)}E=E&&e[E],!0===_&&(_=3);var R=p(m.search);function B(){h.id||(h.id=L+"-js"),d(h,L+"-js");var e=N.container,r=N.css;r&&!t.getElementById(L+"-css")&&C(a(r)?r:k(h.src,"css"),function(){O(this,"load.asset",[this.href])},{class:L+"-css",id:L+"-css"}),C(S(D)+M(l(N.query,{callback:"_"+x,"max-results":0})),function(){e?((e=t.querySelector(e))&&(e.innerHTML=""),f(e,A)):f(h.parentNode,A,h),u(A.parentNode,L+"-loading"),O(this,"load.asset",[this.src]);var r=N.active;i(r)&&(r=v[r]),y[r]&&y[r].click()})}n(R[q])&&(delete R[q].url,N=l(N,R[q])),e["_"+x]=function(n){n=n.feed||{};var s,p=N.sort,h=n.entry||[],m=n.category||[],g=(h.length,m.length);function $(e){var t=this.id.split(":")[1],n=this.title,a=A.parentNode,i=y[n],o=b[n];for(s in y)s!==n&&u(y[s],"active");for(s in b)s!==n&&(u(b[s],"active"),b[s].style.display="none",b[s].previousSibling.style.display="none");o.$||(d(i,"loading"),d(o,"loading"),f(A.children[2],J),d(a,L+"-loading"),C(S(D)+"/-/"+r(n)+M(l(N.query,{callback:"_"+(x+1)})),function(){var e;u(a,L+"-loading"),u(i,"loading"),u(o,"loading"),(e=J).parentNode&&e.parentNode.removeChild(e)},{class:L+"-js",id:L+"-js:"+t})),d(i,"active"),d(o,"active"),o.style.display="",o.previousSibling.style.display="",O(this,"click",[{},y,b]),O(A,"change",[{},i,o]),e.preventDefault()}i(p)?(p=+p,m=m.sort(function(e,t){return e.term.localeCompare(t.term)}),-1===p&&(m=m.reverse())):a(p)&&(p=e[p],m=m.sort(p));var w,T=c("nav","",{class:L+"-tabs p"});f(A,T),f(A,c("section","",{class:L+"-panels p"}));var j=Object.values(N.hide);for(s=0;s<g;++s){var _=m[s].term;j.indexOf(_)>-1||(w=c("a",_,{class:L+"-tab "+L+"-tab:"+s,href:k(N.url)+"/search/label/"+r(_),id:L+"-tab:"+q+"."+s,title:_}),v.push(_),y[_]=w,o(w,"click",$),f(T,w),s<g-1&&f(T,t.createTextNode(" ")),f(A.children[2],c("h4",_,{class:L+"-title"})),f(A.children[2],b[_]=c("ol","",{class:L+"-panel "+L+"-panel:"+s,id:L+"-panel:"+q+"."+s})))}O(A,"load",[n,y,b])},e["_"+(x+1)]=function(t){t=t.feed||{};var n,s,p,h=N.sort,m=(p=(t.link.find(function(e){return"alternate"===e.rel})||{}).href||"",decodeURIComponent(p)).split("/").pop(),v=t.entry||[],$=v.length;for(T=b[m],$&&!function(e,t){return e.classList.contains(t)}(T,"active")&&y[m].click(),n=0;n<$;++n){var w=n<N.recent?I.recent:"";v[n].$=!!w,v[n].title.$t+=w}i(h)?(h=+h,v=v.sort(function(e,t){return e.title.$t.localeCompare(t.title.$t)}),-1===h&&(v=v.reverse())):a(h)&&(h=e[h],v=v.sort(h));var k=N.target,q=N.image,D=N.excerpt,E="has-title has-url";for(N.date&&(E+=" has-time"),q&&(E+=" has-image"),D&&(E+=" has-excerpt"),d(A,E),j=function(e){if(e){var t=e.published.$t,r=(e.link.find(function(e){return"alternate"===e.rel})||{}).href,n="";if(r){if(q){var a,s,l,o="media$thumbnail"in e;!0===q&&(q=80),i(q)?(a=s=q+"px",q="s"+q+"-c"):(l=/^s(\d+)(\-[cp])?$/.exec(q))?(a=l[1]+"px",s=l[2]?l[1]+"px":"auto"):(l=/^w(\d+)\-h(\d+)(\-[cp])?$/.exec(q))&&(a=l[1]+"px",s=l[2]+"px"),n+='<p class="'+L+"-image "+(o?"loading":"no-image")+'">',n+=o?'<img alt="" src="'+e.media$thumbnail.url.replace(/\/s\d+(\-c)?\//g,"/"+q+"/")+'" style="display:block;width:'+a+";height:"+s+';">':'<span class="img" style="display:block;width:'+a+";height:"+s+';">',n+="</p>"}if(n+='<h5 class="'+L+'-title"><a href="'+r+'"'+(k?' target="'+k+'"':"")+">"+e.title.$t+"</a></h5>",N.date&&(n+='<p class="'+L+'-time"><time datetime="'+t+'">'+function(e,t){var r,n=e.split("T"),a=n[0].split("-"),i=n[1].split("+")[0].split(":"),s=+i[0],l=s%12||12,o={"M~":I.months[+a[1]-1],"D~":I.days[new Date(e).getDay()],"h~":s+"",Y:a[0],M:a[1],D:a[2],h:l+"",m:i[1],s:Math.floor(+i[2])+"",N:I.noon[l<12||24===l?0:1]};for(r in o)t=t.replace(/\\%/g,"&#37;").replace(new RegExp("%"+r+"%","g"),o[r]);return t}(t,N.date)+"</time></p>"),D){var d=e.summary.$t.replace(/<.*?>/g,"").replace(/[<>]/g,"").trim(),u=d.length;!0===D&&(D=200),n+='<p class="'+L+"-excerpt"+(u?"":" no-excerpt")+'">'+d.slice(0,D)+(u>D?"&hellip;":"")+"</p>"}return c("li",n,{class:!!e.$&&"recent"})}}},n=0;n<$;++n)f(T,j(v[n]));if(q){var J=T.getElementsByTagName("img"),R=function(){d(this.parentNode,"error"),O(this,"error.asset",[this.src])},B=function(){u(this.parentNode,"loading"),O(this,"load.asset",[this.src])};for(n=0,s=J.length;n<s;++n)o(J[n],"error",R),o(J[n],"load",B)}(function(){if(!1!==_){var e=+(g.getItem(L)||-1);if(e>_)return g.setItem(L,0),!0;g.setItem(L,++e)}return!1})()&&C(S("298900102869691923")+M(l(N.query,{callback:"_"+x+"_","max-results":21,orderby:"updated"}))+"&q="+r(m.toLowerCase())),b[m].$=!0,O(b[m],"load",[{},y,b])},e["_"+x+"_"]=function(e){var t=(e=e.feed||{}).entry||[];t=t[Math.floor(Math.random()*t.length)],(t=j(t))&&(d(t,"ad"),f(T,t,T.firstChild)),O(t,"load.ad",[e,y,b])},i(N.load)?e.setTimeout(B,+N.load):!0===N.load?o(e,"load",B):B(),O(A,"ready",[N,y,b])}(window,document);</script>
Step 7 :- Copy the provided below code and paste it just before </head>.

All the images and post credit goes to wolvthemes. If you have any problem regarded to this post then pls contact us throught our contact page .

Conclusion

That's all about "How To Add New Tab Look Sitemap for Blogger" hope you like the post. If you have any doubt or quire related to post feel free to comment.

Source:
http://www.sr7themes.eu.org/2022/06/how-to-add-new-tab-look-sitemap-for.html

About the Author

Hey there! My name is Saim Rahmani aka Saim, a professional Web Designer, Graphic Designer, UI / Blogger as well as Content Creator. I love to Code

Buy Me A Coffee

2 comments

  1. Thanks ❤️ for this code. I was waiting for it for very long
    1. Welcome
Leave a comment according to the topic of the article, tick Notify me to get a notification via email when your comment is replied to.
Enter Image URL or Piece Code, or Quote, then click the button you want to parse. Copy the parse result and paste it into the comments field.


image quote pre code

Please don't share any sensitive or personal details here.

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.