Author: How To Create A Responsive HTML Sitemap Page In Blogger
Step 1: Sign into your blogger account and go to the “Overview”. From the left menu, click on the “Pages” section. Now click on the “New page” button as shown below.
Step 2: Here you will see the page you are going to create and publish. In the page title box, put “Sitemap” because this is the name of your page.
Step 3: By default, the page is in compose mode. But we have to paste the sitemap code in the HTML mode. So click on the “HTML” mode as shown below.
Sitemap Code:
<div id="toc">
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){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--)r[e(c)]=k[c]||e(c);k=[function(e){return r[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 H();2 u=F H();2 w=F H();2 q=F H();2 6=F H();2 y=F H();2 7="L";2 17=1s;2 27=2P;2 E="";2 1a=0;r 1Q(a){r b(){4("A"1H a.1i){2 d=a.1i.A.v;1a=d;D=0;B(2 h=0;h<d;h++){2 n=a.1i.A[h];2 e=n.O.$t;2 m=n.23.$t.1x(0,10);2 j;B(2 g=0;g<n.M.v;g++){4(n.M[g].18=="2c"){j=n.M[g].s;U}}2 o="";B(2 g=0;g<n.M.v;g++){4(n.M[g].18=="1Z"){o=n.M[g].s;U}}2 c="";4("16"1H n){B(2 g=0;g<n.16.v;g++){c=n.16[g].28;2 f=c.1v(";");4(f!=-1){c=c.1x(0,f)}6[D]=c;3[D]=e;q[D]=m;u[D]=j;w[D]=o;4(h<10){y[D]=13}I{y[D]=1s}D=D+1}}}}}b();7="L";P(7);19();17=13;1r();9.x()}r 1O(a){1F(0,0);E=a;K(E)}r 1n(){19();E="";K(E)}r P(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=u[e];u[e]=u[g];u[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.v-1;b++){B(2 a=b+1;a<3.v;a++){4(d=="L"){4(3[b]>3[a]){c(b,a)}}4(d=="15"){4(3[b]<3[a]){c(b,a)}}4(d=="1g"){4(q[b]>q[a]){c(b,a)}}4(d=="R"){4(q[b]<q[a]){c(b,a)}}4(d=="1w"){4(6[b]>6[a]){c(b,a)}}}}}r 19(){7="1w";P(7);2 a=0;2 b=0;S(b<3.v){J=6[b];T=a;1p{a=a+1}S(6[a]==J);b=a;1j(T,a);4(b>3.v){U}}}r 1j(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=u[f];u[f]=u[h];u[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 K(a){2 l=0;2 h="";2 e="25 Z";2 m="11 12 2p 2s 2A";2 d="2L";2 k="11 12 1I 1J 1K";2 c="1L";2 j="";4(7=="L"){m+=" (1N)";k+=" (14 V)"}4(7=="15"){m+=" (1l)";k+=" (14 V)"}4(7=="1g"){m+=" (1l)";k+=" (14 V)"}4(7=="R"){m+=" (1l)";k+=" (1S V)"}4(E!=""){j="11 12 1Y 31"}h+="<1t>";h+="<N>";h+=\'<5 8="i-W-1b">\';h+=\'<a s="1c:1o();" O="\'+m+\'">\'+e+"</a>";h+="</5>";h+=\'<5 8="i-W-1d">\';h+=\'<a s="1c:1q();" O="\'+k+\'">\'+d+"</a>";h+="</5>";h+=\'<5 8="i-W-1e">\';h+=\'<a s="1c:1n();" O="\'+j+\'">\'+c+"</a>";h+="</5>";h+=\'<5 8="i-W-1f">\';h+="X 1M";h+="</5>";h+="</N>";B(2 g=0;g<3.v;g++){4(a==""){h+=\'<N><5 8="i-A-1b"><a s="\'+u[g]+\'">\'+3[g]+\'</a></5><5 8="i-A-1d">\'+q[g]+\'</5><5 8="i-A-1e">\'+6[g]+\'</5><5 8="i-A-1f"><a s="\'+w[g]+\'">X</a></5></N>\';l++}I{z=6[g].1v(a);4(z!=-1){h+=\'<N><5 8="i-A-1b"><a s="\'+u[g]+\'">\'+3[g]+\'</a></5><5 8="i-A-1d">\'+q[g]+\'</5><5 8="i-A-1e">\'+6[g]+\'</5><5 8="i-A-1f"><a s="\'+w[g]+\'">X</a></5></N>\';l++}}}h+="</1t>";4(l==3.v){2 f=\'<C 8="i-1u">1h 1R \'+3.v+" Z<G/></C>"}I{2 f=\'<C 8="i-1u">1h \'+l+" 1T 1U 1V \'";f+=E+"\' 1W "+3.v+" 1X Z<G/></C>"}2 b=9.Y("i");b.1k=f+h}r 1r(){2 a=0;2 b=0;S(b<3.v){J=6[b];9.x("<p/>");9.x(\'<C 8="20"><a s="/21/22/\'+J+\'">\'+J+"</a></C><1y 8=\'24\'>");T=a;1p{9.x("<1z>");9.x(\'<a s="\'+u[a]+\'">\'+3[a]+"</a>");4(y[a]==13){9.x(\' - <C 8="F">26!</C>\')}9.x("</1z>");a=a+1}S(6[a]==J);b=a;9.x("</1y>");1j(T,a);4(b>3.v){U}}}r 1o(){4(7=="L"){7="15"}I{7="L"}P(7);K(E)}r 1q(){4(7=="R"){7="1g"}I{7="R"}P(7);K(E)}r 1A(){4(17){K(E);2 a=9.Y("1B")}I{29("2a 2b... 1C 2d 2e")}}r 2f(){2 a=9.Y("i");a.1k="";2 b=9.Y("1B");b.1k=\'<a s="#" 2g="1F(0,0); 1A(); 2h.2i(\\\'i-2j\\\',\\\'2k\\\');">?? 1h 2l 2m</a> <2n 2o="1D://2q.2r.1E/2t.2u"/>\'}r 2v(){B(2 a=0;a<1a;a++){9.x("<G>");9.x(\'2w 2x : <a s="\'+u[a]+\'">\'+3[a]+"</a><G>");9.x(\'X 2y : <a s="\'+w[a]+\'">\'+3[a]+"</a><G>");9.x("<G>")}};9.x("<C 2z=\'Q-2B:2C;2D:2E;Q-2F:2G;2H:2I 2J 0 0;\'><a O=\'2K 1C 1G 2M 2N - 2O 1G 1m.2Q.2R\' s=\'1D://1m.2S-2T.1E\' 2U=\'2V\' 18=\'2W\'><Q 2X=\'#2Y\'>2Z 30 1P!</Q></a></C>");',62,188,'||var|postTitle|if|td|postLabels|sortBy|class|document|||||||||toc||||||||postDate|function|href||postUrl|length|postMp3|write|postBaru||entry|for|span|ii|postFilter|new|br|Array|else|temp1|displayToc|titleasc|link|tr|title|sortPosts|font|datenewest|while|firsti|break|first|header|Download|getElementById|Artikel||Klik|untuk|true|newest|titledesc|category|tocLoaded|rel|sortlabel|numberfeed|col1|javascript|col2|col3|col4|dateoldest|Menampilkan|feed|sortPosts2|innerHTML|ascending|www|allPosts|toggleTitleSort|do|toggleDateSort|displayToc2|false|table|note|lastIndexOf|orderlabel|substring|ol|li|showToc|toclink|TOC|http|com|scroll|by|in|Sortir|bedasarkan|tanggal|Kategori|MP3|descending|filterPosts|widget|loadtoc|Semua|oldest|artikel|dengan|kategori|dari|Total|menampilkan|enclosure|labl|search|label|published|postname|Judul|New|numChars|term|alert|Just|wait|alternate|is|loading|hideToc|onclick|Effect|toggle|result|blind|Daftar|Isi|img|src|sortir|radiorodja|googlepages|berdasarkan|new_1|gif|looptemp2|Post|Link|mp3|style|judul|size|0px|float|right|family|arial|margin|20px|5px|Blogger|Tanggal|Abu|Farhan|Style|250|intert3chmedia|net|abu|farhan|target|_blank|nofollow|color|ff5f00|Grab|this|semua'.split('|'),0,{}))
//]]>
</script>
<script src="http://rabbibd.ml/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
Note: Replace the highlighted http://rabbibd.ml with your blog’s URL.Step 4: Now copy the Sitemap Code from above and paste it into the page. This is a JavaScript code which should be added to the sitemap page in the HTML mode.Step 5: After pasting the sitemap code into your sitemap page and replacing the mentioned URL with your blog address, publish the page from the top right corner as shown below.View your newly created sitemap page and you will see it is working perfectly. Now it is time to design this HTML sitemap to make it more beautiful. So let’s add the CSS.Adding CSS of The HTML Sitemap Page:
/* Sitemap ----------------------------------------------- */ #toc{margin:5px auto;width:100%;} .labl{background: url(https://4.bp.blogspot.com/-RX5GvndV7GI/WBnIzcW86II/AAAAAAAAD7s/JzrxQwJ3sRoDFmlzbEOYiDt5IhgJL66lgCPcB/s1600/bg-login.gif) repeat-x;margin:0 -5px;text-align:center;text-transform:uppercase;font-size:18px;font-weight:bold;padding:2px 0 2px 0;border:1px solid #2D96DF;border-radius:2px;display:block;} .labl a{color:#fff;} .labl:first-letter{text-transform:uppercase;} .new{color:#FF5F00;font-style:italic;font-weight:bold;} .postname{font-weight:normal;} .postname li{margin-right:5px;border-bottom: #ddd 1px dotted;}For adding CSS of this sitemap, go to the blogger dashboard. Click on the“Template” section > “Edit HTML”.Now find the code “]]></b:skin>”.Copy the CSS code from above and paste it right before the line “]]></b:skin>”.Click on the “Save Template” button. You are done. Go to your sitemap page, refresh the page and see its working or not.This was the complete process for adding an HTML sitemap page in blogger. This sitemap is tested so you should not have any issue. If you are having any trouble to add this, you may ask me through comment. I will get back to your very soon. If you like this sitemap then don’t forget to share it.
