Add Stylish Sitemap Page To Blogger [Pro Version]
Sitemap page lists all published posts of a blogger. In this article, we will share a customized and stylish pro version of sitemap page design.
Stylish Sitemap page for blogger has always been an interesting topic. There's a lot of sitemap versions' available on Internet that claims to be professional, attractive and eye catching. But I assure you, the sitemap I'm going to distribute is the one that has all above amazing features. Before that,let's see what a sitemap is.
What is a Sitemap?
Sitemap is a map of a site that includes all published posts in a single page. In other words, it is a navigation page that helps visitors to navigate via all articles. Sitemap categorizes the posts based on the label. Same label articles are listed together. Sitemap is important for SEO. Yes,you heard it right. It helps to showcase your posts to visitors and reduces the bounce rate,which in turn boosts traffic.
One bad news: Blogger doesn't have in-built sitemap page. Hence for a blogspot blogger, it is a must to externally add a stylish and pro-looking sitemap to blogspot.
Features of this Stylish Sitemap Page
- Eye Catching Looks.
- All Labels are separated neatly.
- Easy for users to navigate via the posts.
- Numbered System is added.
- New labels are added automatically.
- Labels are categorized alphabetically.
- Professional and Stylish color combination used.
How to add stylish sitemap to blogger?
Step 1: Create a New Page On Your Blog
First of all, create a new page and Enter the Title as Sitemap. Click on Page Settings,modify the page settings as shown below and switch to HTML Mode.
Note: Once the title is given, a permalink will be automatically generated. So give the title as soon as you create a new page.
Step 2: Copy and Paste The Whole Code
Note: I didn't write the whole code. I got the reference code from Internet and I played with CSS to modify it. I don't know who is the creator of the reference code. If you are the one, please let me know, I'll give proper credits.
➜ Change https://www.twistblogg.com with your site url.
➜/*This is optional - For full width Sitemap*/ Part is for making the sitemap full width. You may need to modify the
.sidebar, #bottom, #blog-pager, h2.post-title, .comments according to the tags given in your blogger template. If you need help to figure that out, let me know below.
https://amanbhattarai4400.github.io/csshosting/sitemap.js You can host it by yourself. Check this article on how to host CSS,JS and HTML in GitHub
Bonus Tip: I personally love to link Sitemap on 404 Error Pages or simply redirect error pages to sitemap page.
Final Words On Stylish Sitemap for Blogspot
That's all folks. I've shared the code for stylish and pro looking sitemap for blogger blog. Hope it was as per expectations.I'll definitely provide more attractive sitemaps in near future. Stay tuned and subscribe twistblogg, Feel free to ask me for help. Happy Blogging 😃 ADIOS [Bye Bye in Spanish]
Sign up for The Best Bits
Get all of our posts, straight to your email. Opt-out any time.
Not into email list things, but still want to read more?