Create A Beautiful HTML Sitemap Page For Your Blogger Sites...!! | Largest Technology Website

Create A Beautiful HTML Sitemap Page For Your Blogger Sites...!!

Create A Beautiful HTML Sitemap For Your Blogger Sites...!! Assalamu Alikum. How are you Hope you all are well. I am very happy with your prayers. Hope everyone knows what a Sitemap is. Because these things are not known to those who visit daily at TrickBD, but for those who are new, I briefly state: An XML Sitemap is an XML file that tells Search Engine what the site is for. In a way, a Sitemap is a map. That's what an XML Sitemap is, but today, the sitemap I create for Blogger is not XML or HTML.

Create A Beautiful HTML Sitemap For Your Blogger Sites, flagbd, flagbd.com, flag

Create A Beautiful HTML Sitemap For Your Blogger Sites...!!


Assalamu Alikum. How are you Hope you all are well. I am very happy with your prayers.
Hope everyone knows what a Sitemap is. Because these things are not known to those who visit daily at TrickBD, but for those who are new, I briefly state:
An XML Sitemap is an XML file that tells Search Engine what the site is for. In a way, a Sitemap is a map. That's what an XML Sitemap is, but today, the sitemap I create for Blogger is not XML or HTML.

What's the difference between an XML Sitemap and an HTML Sitemap..?

An XML Sitemap is a map for Search Engine and an HTML Sitemap is a map for site visitors.

Sitemap is very important to easily find out where your site is. So without further adieu, let's see how to create an HTML Sitemap for your Blogger site.
DEMO

Step 1:
Login to your site first

Step 2:
Then click on Pages >> New Page.

Step 3:
Give the Sitemap the title of the page, copy and paste the code below.

Main Script Code:


  • <div id = "bp_toc"> </div> <script src = 'https: //sajidblue.xtgem.com/sitemap.js' type = "text / javascript"> </script> <script src = "/ feeds / posts / summary? alt = json-in-script & max-results = 9999 & callback = loadtoc "type =" text / javascript "> </script>


Css Style Code:

<style> / * Sitemap plugin By Sajid Ch * / #bp_toc {color: # 666; margin: 0 auto; padding: 0; border: 1px solid # d2d2d2; float: left; width: 100%; } span.toc-note {display: none; } #bp_toc tr: nth-child (2n) {background: # f5f5f5; } td.toc-entry-col1 a {font-weight: bold; font-size: 14px; } .toc-header-col1,
.toc-header-col2, .toc-header-col3 {background: # 9E9E9E; } .toc-header-col1 {padding: 10px; width: 250px; } .toc-header-col2 {padding: 10px; width: 75px; } .toc-header-col3 {padding: 10px; width: 125px; } .toc-header-col1 a: link, .toc-header-col1 a: visited, .toc-header-col2 a: link, .toc-header-col2 a: visited, .toc-header-col3 a: link , .toc-header-col3 a: visited {font-size: 13px; text-decoration: none; color: #fff; font-weight: 700; letter-spacing: 0.5px; } .toc-header-col1 a: hover, .toc-header-col2 a: hover, .toc-header-col3 a: hover {text-decoration: none; } .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {padding: 5px; padding-left: 5px; font-size: 12px; } .toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a {color: # 666; font-size: 13px; text-decoration: none}
.toc-entry-col1 a: hover, .toc-entry-col2 a: hover, .toc-entry-col3 a: hover {text-decoration: underline; } #bp_toc table {width: 100%; margin: 0 auto; counter-reset: rowNumber; } .toc-entry-col1 {counter-increment: rowNumber; } #bp_toc table tr td.toc-entry-col1: first-child :: before {content: counter (rowNumber); min-width: 1em; min-height: 3em; float: left; border-right: 1px solid #fff; text-align: center; padding: 0px 11px 1px 6px; margin-right: 15px; } td.toc-entry-col2 {text-align: center; } </style>

Note: Those who have trouble copying the code please download from the link below.

Google Drive



[NB:] Friends, If This Code Have Any Problems You Can Do 2nd Method. Just Copy This Code And Pest Your Blogger New SiteMap Page. 


  1. <script type='text/javascript'>
  2. var postTitle = new Array();
  3. var postUrl = new Array();
  4. var postPublished = new Array();
  5. var postDate = new Array();
  6. var postLabels = new Array();
  7. var postRecent = new Array();
  8. var sortBy = "titleasc";
  9. var numberfeed = 0;
  10. function bloggersitemap(a) {
  11.     function b() {
  12.         if ("entry" in a.feed) {
  13.             var d = a.feed.entry.length;
  14.             numberfeed = d;
  15.             ii = 0;
  16.             for (var h = 0; h < d; h++) {
  17.                 var n = a.feed.entry[h];
  18.                 var e = n.title.$t;
  19.                 var m = n.published.$t.substring(0, 10);
  20.                 var j;
  21.                 for (var g = 0; g < n.link.length; g++) {
  22.                     if (n.link[g].rel == "alternate") {
  23.                         j = n.link[g].href;
  24.                         break
  25.                     }
  26.                 }
  27.                 var o = "";
  28.                 for (var g = 0; g < n.link.length; g++) {
  29.                     if (n.link[g].rel == "enclosure") {
  30.                         o = n.link[g].href;
  31.                         break
  32.                     }
  33.                 }
  34.                 var c = "";
  35.                 if ("category" in n) {
  36.                     for (var g = 0; g < n.category.length; g++) {
  37.                         c = n.category[g].term;
  38.                         var f = c.lastIndexOf(";");
  39.                         if (f != -1) {
  40.                             c = c.substring(0, f)
  41.                         }
  42.                         postLabels[ii] = c;
  43.                         postTitle[ii] = e;
  44.                         postDate[ii] = m;
  45.                         postUrl[ii] = j;
  46.                         postPublished[ii] = o;
  47.                         if (h < 10) {
  48.                             postRecent[ii] = true
  49.                         } else {
  50.                             postRecent[ii] = false
  51.                         }
  52.                         ii = ii + 1
  53.                     }
  54.                 }
  55.             }
  56.         }
  57.     }
  58.     b();
  59.     sortBy = "titledesc";
  60.     sortPosts(sortBy);
  61.     sortlabel();
  62.     displayToc();
  63. }
  64. function sortPosts(d) {
  65.     function c(e, g) {
  66.         var f = postTitle[e];
  67.         postTitle[e] = postTitle[g];
  68.         postTitle[g] = f;
  69.         var f = postDate[e];
  70.         postDate[e] = postDate[g];
  71.         postDate[g] = f;
  72.         var f = postUrl[e];
  73.         postUrl[e] = postUrl[g];
  74.         postUrl[g] = f;
  75.         var f = postLabels[e];
  76.         postLabels[e] = postLabels[g];
  77.         postLabels[g] = f;
  78.         var f = postPublished[e];
  79.         postPublished[e] = postPublished[g];
  80.         postPublished[g] = f;
  81.         var f = postRecent[e];
  82.         postRecent[e] = postRecent[g];
  83.         postRecent[g] = f
  84.     }
  85.     for (var b = 0; b < postTitle.length - 1; b++) {
  86.         for (var a = b + 1; a < postTitle.length; a++) {
  87.             if (d == "titleasc") {
  88.                 if (postTitle[b] > postTitle[a]) {
  89.                     c(b, a)
  90.                 }
  91.             }
  92.             if (d == "titledesc") {
  93.                 if (postTitle[b] < postTitle[a]) {
  94.                     c(b, a)
  95.                 }
  96.             }
  97.             if (d == "dateoldest") {
  98.                 if (postDate[b] > postDate[a]) {
  99.                     c(b, a)
  100.                 }
  101.             }
  102.             if (d == "datenewest") {
  103.                 if (postDate[b] < postDate[a]) {
  104.                     c(b, a)
  105.                 }
  106.             }
  107.             if (d == "orderlabel") {
  108.                 if (postLabels[b] > postLabels[a]) {
  109.                     c(b, a)
  110.                 }
  111.             }
  112.         }
  113.     }
  114. }
  115. function sortlabel() {
  116.     sortBy = "orderlabel";
  117.     sortPosts(sortBy);
  118.     var a = 0;
  119.     var b = 0;
  120.     while (b < postTitle.length) {
  121.         temp1 = postLabels[b];
  122.         firsti = a;
  123.         do {
  124.             a = a + 1
  125.         } while (postLabels[a] == temp1);
  126.         b = a;
  127.         sortPosts2(firsti, a);
  128.         if (b > postTitle.length) {
  129.             break
  130.         }
  131.     }
  132. }
  133. function sortPosts2(d, c) {
  134.     function e(f, h) {
  135.         var g = postTitle[f];
  136.         postTitle[f] = postTitle[h];
  137.         postTitle[h] = g;
  138.         var g = postDate[f];
  139.         postDate[f] = postDate[h];
  140.         postDate[h] = g;
  141.         var g = postUrl[f];
  142.         postUrl[f] = postUrl[h];
  143.         postUrl[h] = g;
  144.         var g = postLabels[f];
  145.         postLabels[f] = postLabels[h];
  146.         postLabels[h] = g;
  147.         var g = postPublished[f];
  148.         postPublished[f] = postPublished[h];
  149.         postPublished[h] = g;
  150.         var g = postRecent[f];
  151.         postRecent[f] = postRecent[h];
  152.         postRecent[h] = g
  153.     }
  154.     for (var b = d; b < c - 1; b++) {
  155.         for (var a = b + 1; a < c; a++) {
  156.             if (postTitle[b] > postTitle[a]) {
  157.                 e(b, a)
  158.             }
  159.         }
  160.     }
  161. }
  162. function displayToc() {
  163.     var a = 0;
  164.     var b = 0;
  165.     while (b < postTitle.length) {
  166.         temp1 = postLabels[b];
  167.         document.write("");
  168.         document.write('<div class="post-archive"><h4>' + temp1 + '</h4><div class="ct-columns">');
  169.         firsti = a;
  170.         do {
  171.             document.write("<p>");
  172.             document.write('<a " href="' + postUrl[a] + '">' + postTitle[a] + "");
  173.             if (postRecent[a] == true) {
  174.                 document.write(' - <strong><span>New!</span></strong>')
  175.             }
  176.             document.write("</a></p>");
  177.             a = a + 1
  178.         } while (postLabels[a] == temp1);
  179.         b = a;
  180.         document.write("</div></div>");
  181.         sortPosts2(firsti, a);
  182.         if (b > postTitle.length) {
  183.             break
  184.         }
  185.     }
  186. }
  187. </script>
  188. <script src="http://yourblog.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>

[NB:] Juat change Red Mark. Give Your Website link From This.


Step 4:
Now click on Publish, setting the settings as in the picture below.

Diameter is the end of our work. Now visit the Sitemap page you created.
Hope you understand, however, if you have any problems understanding please comment or contact me on Facebook.


Thanks

COMMENTS

Top Article Ad

Name

Android,38,Apps Review,62,Blogger,42,C Programing,3,Facebook,26,Game Review,14,JavaScript,4,LifeStyle,10,Online Earning,64,Pdf Books,4,Tech News,22,Technology Update,20,Tools,12,Web Development,26,Windows (PC),46,Wordpress,31,Youtube,40,
ltr
item
Largest Technology Website : Create A Beautiful HTML Sitemap Page For Your Blogger Sites...!!
Create A Beautiful HTML Sitemap Page For Your Blogger Sites...!!
Create A Beautiful HTML Sitemap For Your Blogger Sites...!! Assalamu Alikum. How are you Hope you all are well. I am very happy with your prayers. Hope everyone knows what a Sitemap is. Because these things are not known to those who visit daily at TrickBD, but for those who are new, I briefly state: An XML Sitemap is an XML file that tells Search Engine what the site is for. In a way, a Sitemap is a map. That's what an XML Sitemap is, but today, the sitemap I create for Blogger is not XML or HTML.
https://1.bp.blogspot.com/-lVtPM3vJbUs/Xfh0EBHbnTI/AAAAAAAAF0g/DA2i1Xm-cXwQXuZKeZ2mFAV1c5Qu0TTSACNcBGAsYHQ/s640/Screenshot_2019-12-17_104658%257E2.jpg
https://1.bp.blogspot.com/-lVtPM3vJbUs/Xfh0EBHbnTI/AAAAAAAAF0g/DA2i1Xm-cXwQXuZKeZ2mFAV1c5Qu0TTSACNcBGAsYHQ/s72-c/Screenshot_2019-12-17_104658%257E2.jpg
Largest Technology Website
https://www.flagbd.com/2019/12/Create-A-Beautiful-HTML-Sitemap-For-Your-Blogger-Sites.html
https://www.flagbd.com/
https://www.flagbd.com/
https://www.flagbd.com/2019/12/Create-A-Beautiful-HTML-Sitemap-For-Your-Blogger-Sites.html
true
2875505316624058831
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy