DEV Community

Cover image for How To Create HTML Sitemap Page In Blogger  (BlogSpot) Site 2021
Imam Uddin
Imam Uddin

Posted on

How To Create HTML Sitemap Page In Blogger (BlogSpot) Site 2021

How to Add Sitemap Page on Blogger:

Follow Below Steps To Add HTML Sitemap To your blogger/BlogSpot site in 2021

Step 1. Login to your Blogger account, then go to Pages > New page.
Step 2. Enter "Site Map" in Page title field.
Step 3. Switch to HTML mode.
Step 4. Enter following inside blank field.
Note: Clear any default code inside HTML field before pasting provided code.


<style type="text/css">

 #sitemap{width:100%;margin:3px auto;-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}
.labl{color:#ff0000;font-weight:bold;margin:0 -5px;padding:1px 0 2px 11px;background:-moz-linear-gradient(right,#c2eafe 0%,#4caf50 40%);background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#4caf50),color-stop(1,#000));border:1px solid #fff;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;box-shadow:3px 3px 1px #a0a0a0;-moz-box-shadow:3px 3px 1px #a0a0a0;-webkit-box-shadow:3px 3px 1px #a0a0a0;display:block;}
.labl a{color:#fff;font-size: 20px;}
.labl:first-letter{text-transform:uppercase;}
.new{color:#ff0000;font-weight:bold;font-style:italic;}
.postname{font-weight:normal;background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);background:-webkit-gradient(linear,left 80,right 10,color-stop(0.50,#fff),color-stop(1,#00000078));}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>

<br />

<div id="sitemap">

<script type="text/javascript">
  eval(function(p,a,c,k,e,d)
{e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};
if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('2 3=F K();2 v=F K();2 w=F K();2 q=F K();2 6=F K();2 y=F K();2 i="N";2 1d=1s;2 2T=2M;2 E="";2 1j=0;r 2J(a){r b(){4("A"1G a.1h){2 d=a.1h.A.u;1j=d;C=0;B(2 h=0;h<d;h++){2 n=a.1h.A[h];2 e=n.P.$t;2 m=n.1N.$t.1t(0,10);2 j;B(2 g=0;g<n.J.u;g++){4(n.J[g].Z=="25"){j=n.J[g].s;Q}}2 o="";B(2 g=0;g<n.J.u;g++){4(n.J[g].Z=="1Q"){o=n.J[g].s;Q}}2 c="";4("12"1G n){B(2 g=0;g<n.12.u;g++){c=n.12[g].26;2 f=c.1m(";");4(f!=-1){c=c.1t(0,f)}6[C]=c;3[C]=e;q[C]=m;v[C]=j;w[C]=o;4(h<10){y[C]=16}G{y[C]=1s}C=C+1}}}}}b();i="N";O(i);1i();1d=16;1H();9.x()}r 1Y(a){1y(0,0);E=a;H(E)}r 1x(){1i();E="";H(E)}r O(d){r c(e,g){2 f=3[e];3[e]=3[g];3[g]=f;2 f=q[e];q[e]=q[g];q[g]=f;2 f=v[e];v[e]=v[g];v[g]=f;2 f=6[e];6[e]=6[g];6[g]=f;2 f=w[e];w[e]=w[g];w[g]=f;2 f=y[e];y[e]=y[g];y[g]=f}B(2 b=0;b<3.u-1;b++){B(2 a=b+1;a<3.u;a++){4(d=="N"){4(3[b]>3[a]){c(b,a)}}4(d=="1b"){4(3[b]<3[a]){c(b,a)}}4(d=="1e"){4(q[b]>q[a]){c(b,a)}}4(d=="V"){4(q[b]<q[a]){c(b,a)}}4(d=="1o"){4(6[b]>6[a]){c(b,a)}}}}}r 1i(){i="1o";O(i);2 a=0;2 b=0;T(b<3.u){I=6[b];X=a;1C{a=a+1}T(6[a]==I);b=a;1f(X,a);4(b>3.u){Q}}}r 1f(d,c){r e(f,h){2 g=3[f];3[f]=3[h];3[h]=g;2 g=q[f];q[f]=q[h];q[h]=g;2 g=v[f];v[f]=v[h];v[h]=g;2 g=6[f];6[f]=6[h];6[h]=g;2 g=w[f];w[f]=w[h];w[h]=g;2 g=y[f];y[f]=y[h];y[h]=g}B(2 b=d;b<c-1;b++){B(2 a=b+1;a<c;a++){4(3[b]>3[a]){e(b,a)}}}}r H(a){2 l=0;2 h="";2 e="1Z 1k";2 m="14 13 1W 1V 1R";2 d="1S";2 k="14 13 1T 1U 20";2 c="21";2 j="";4(i=="N"){m+=" (28)";k+=" (18 S)"}4(i=="1b"){m+=" (15)";k+=" (18 S)"}4(i=="1e"){m+=" (15)";k+=" (18 S)"}4(i=="V"){m+=" (15)";k+=" (29 S)"}4(E!=""){j="14 13 2a 27"}h+="<1D>";h+="<L>";h+=\'<5 7="8-R-1c">\';h+=\'<a s="17:1w();" P="\'+m+\'">\'+e+"</a>";h+="</5>";h+=\'<5 7="8-R-19">\';h+=\'<a s="17:1u();" P="\'+k+\'">\'+d+"</a>";h+="</5>";h+=\'<5 7="8-R-1a">\';h+=\'<a s="17:1x();" P="\'+j+\'">\'+c+"</a>";h+="</5>";h+=\'<5 7="8-R-11">\';h+="U 24";h+="</5>";h+="</L>";B(2 g=0;g<3.u;g++){4(a==""){h+=\'<L><5 7="8-A-1c"><a s="\'+v[g]+\'">\'+3[g]+\'</a></5><5 7="8-A-19">\'+q[g]+\'</5><5 7="8-A-1a">\'+6[g]+\'</5><5 7="8-A-11"><a s="\'+w[g]+\'">U</a></5></L>\';l++}G{z=6[g].1m(a);4(z!=-1){h+=\'<L><5 7="8-A-1c"><a s="\'+v[g]+\'">\'+3[g]+\'</a></5><5 7="8-A-19">\'+q[g]+\'</5><5 7="8-A-1a">\'+6[g]+\'</5><5 7="8-A-11"><a s="\'+w[g]+\'">U</a></5></L>\';l++}}}h+="</1D>";4(l==3.u){2 f=\'<D 7="8-1E">1l 1O \'+3.u+" 1k<M/></D>"}G{2 f=\'<D 7="8-1E">1l \'+l+" 1M 1K 1L \'";f+=E+"\' 22 "+3.u+" 2k 1k<M/></D>"}2 b=9.W("8");b.1g=f+h}r 1H(){2 a=0;2 b=0;T(b<3.u){I=6[b];9.x("<p/>");9.x(\'<D 7="2K"><a s="/2L/2H/\'+I+\'">\'+I+"</a></D><1z 7=\'2G\'>");X=a;1C{9.x("<1p>");9.x(\'<a s="\'+v[a]+\'">\'+3[a]+"</a>");4(y[a]==16){9.x(\' - <D 7="F">2F!</D>\')}9.x("</1p>");a=a+1}T(6[a]==I);b=a;9.x("</1z>");1f(X,a);4(b>3.u){Q}}}r 1w(){4(i=="N"){i="1b"}G{i="N"}O(i);H(E)}r 1u(){4(i=="V"){i="1e"}G{i="V"}O(i);H(E)}r 1A(){4(1d){H(E);2 a=9.W("1F")}G{2R("2B 2A... 1q 2l 2m")}}r 2n(){2 a=9.W("8");a.1g="";2 b=9.W("1F");b.1g=\'<a s="#" 2e="1y(0,0); 1A(); 2d.2f(\\\'8-2h\\\',\\\'2o\\\');">?? 1l 2p 2w</a> <2x 2y="1r://2z.2v.1I/2u.2q"/>\'}r 2s(){B(2 a=0;a<1j;a++){9.x("<M>");9.x(\'2i 2E         : <a s="\'+v[a]+\'">\'+3[a]+"</a><M>");9.x(\'U 2I  : <a s="\'+w[a]+\'">\'+3[a]+"</a><M>");9.x("<M>")}};9.x("<D 2C=\'Y-2Y:2t;2r:2g;Y-2j:2Q;2P:2O 2S 0 0;\'><a P=\'1B 1q 1v 2X 2W - 2V 1v 1n.2U.2N\' s=\'1r://1n.2D.1I\' 2c=\'1P\' Z=\'1J\'><Y 2b=\'#23\'>1B 1X</Y></a></D>");',62,185,'||var|postTitle|if|td|postLabels|class|toc|document|||||||||sortBy||||||||postDate|function|href||length|postUrl|postMp3|write|postBaru||entry|for|ii|span|postFilter|new|else|displayToc|temp1|link|Array|tr|br|titleasc|sortPosts|title|break|header|first|while|Download|datenewest|getElementById|firsti|font|rel||col4|category|untuk|Klik|ascending|true|javascript|newest|col2|col3|titledesc|col1|tocLoaded|dateoldest|sortPosts2|innerHTML|feed|sortlabel|numberfeed|Artikel|Menampilkan|lastIndexOf|www|orderlabel|li|TOC|http|false|substring|toggleDateSort|by|toggleTitleSort|allPosts|scroll|ol|showToc|Blogger|do|table|note|toclink|in|displayToc2|com|nofollow|dengan|kategori|artikel|published|Semua|_blank|enclosure|judul|Tanggal|Sortir|bedasarkan|berdasarkan|sortir|Widgets|filterPosts|Judul|tanggal|Kategori|dari|ff5f00|MP3|alternate|term|semua|descending|oldest|menampilkan|color|target|Effect|onclick|toggle|right|result|Post|family|Total|is|loading|hideToc|blind|Daftar|gif|float|looptemp2|0px|new_1|googlepages|Isi|img|src|radiorodja|wait|Just|style|bloggerwidgetgenerators|Link|New|postname|label|mp3|loadtoc|labl|search|250|net|20px|margin|arial|alert|5px|numChars|intert3chmedia|Style|Farhan|Abu|size'.split('|'),0,{}))
</script>

<script src="https://imamuddinwp.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">

</script></div>


Enter fullscreen mode Exit fullscreen mode

Note: Dismiss any type of HTTPS errors.
Step 5. Configuration

Replace https://imamuddinwp.blogspot.com with your blog URL.

Step 6. Under Page settings > inside Search Description field add page description.
Step 7. Click on Options > under Reader comments > select Don't allow > Done.

Step 8. Click Publish.
Note: This tutorial is only about to add Simple HTML Sitemap. You can apply different colorful themes on this sitemap.

Example Page is Here:
https://imamuddinwp.blogspot.com/p/sitemap-imam-uddin-imamuddinwp.html

Discussion (0)