ads

How To Create A Responsive HTML Sitemap Page In Blogger Website


Choose from a few more important pages like "About", "Contacts", "Privacy", this is also a page you need to create. If you are using a contact page on your Blogger blog, this is very similar to the process. To add an HTML Sitemap page, all you have to do is create a page and add the Sitemap code to that page. Here's a step-by-step process with screenshots.

How To Create A Responsive HTML Sitemap Page In Blogger Website

Step 1: Sign in to your Blogger account and go to "Overview". From the left menu, click on the "Pages" section. Now click on the "New Page" button as below.
How To Create A Responsive HTML Sitemap Page In Blogger
 HTML Sitemap Step 1

Step 2: Here you will see the page you are going to create and publish. In the page title box, place "Sitemap" as it is the name of your page.
How To Create A Responsive HTML Sitemap Page In Blogger
 HTML Sitemap Step 2


Step 3: By default the page is in Compose mode. However, we need to paste our Sitemap code into HTML mode. Click on "HTML" mode as shown below.
How To Create A Responsive HTML Sitemap Page In Blogger
 HTML Sitemap Step 3

blogger website sitemap code download 

Note: code download and Replace highlighted http://blogornate.blogspot.com 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 that should be added to the Sitemap page in HTML mode.
How To Create A Responsive HTML Sitemap Page In Blogger
 HTML Sitemap Step 4


Step 5: After pasting the Sitemap code into your Sitemap page and replacing the above URL with your blog's address, publish the page from the top right corner at the bottom.
How To Create A Responsive HTML Sitemap Page In Blogger
 HTML Sitemap Step 5

Take a look at your newly created Sitemap page and you'll see it working perfectly. Now it's time to design the HTML Sitemap to make it even better. So let's add CSS.


Step 6: Adding CSS of The HTML Sitemap Page:

Code: copy or download 
 /* 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>".

How To Create A Responsive HTML Sitemap Page In Blogger
 HTML Sitemap Step 6
Click the "Save Template" button. You got it. Visit your Sitemap page, refresh the page, and see if it works.





Berlangganan update artikel terbaru via email:

2 Responses to "How To Create A Responsive HTML Sitemap Page In Blogger Website"

  1. A lot of dissertation webpages on line as you may get hold of secured in a dark listed during the webpage. dofollow backlinks

    ReplyDelete
  2. A few customers have involvement in web design themselves, however others may request things without realizing the specialized restrictions included.Webdesign

    ReplyDelete

Poste Top Ads

Advertisement

post 2nd ads

Poste 3rd ads

advertisement

Poste 4rd ads