How to Create a Stylish Sitemap Page in Blogger

 In today's digital age, having a well-organized and user-friendly website is crucial for attracting and retaining visitors. A sitemap is an essential tool that helps search engines crawl and index your website effectively. In this article, we will guide you through the process of creating a stylish sitemap page in Blogger, a popular blogging platform.

What is a Sitemap?

A sitemap is a file that lists all the pages of your website and provides information about their organization and structure. It helps search engines understand the content and hierarchy of your site, which can improve its visibility in search results. Additionally, a sitemap makes it easier for visitors to navigate your website by providing a clear overview of its structure.

Steps to Create a Stylish Sitemap Page in Blogger

Step 1: Access the Theme Editor

To begin, log in to your Blogger account and navigate to the "Theme" section. Select your blog and click on the "Edit HTML" button. This will open the Theme Editor, where you can make changes to your blog's HTML code.

Step 2: Backup Your Template

Before making any changes, it's essential to create a backup of your template. Click on the "Download full template" link and save the file to your computer. This will allow you to revert to the original template if something goes wrong during the customization process.

Step 3: Locate the Sitemap Widget Code

Next, you need to find the code responsible for displaying the sitemap widget on your blog. Look for the following line of code in your template:

 

{<div dir="ltr" style="text-align: left;" trbidi="on"> <style type="text/css"> .grid-sitemap { overflow: hidden; position: relative; height: 565px; margin: 20px 0 40px 0; } .grid-sitemap iframe { display: block; width: 100%; height: 680px; margin-top: -115px; margin-left: -5px; } </style> <br /> <div class="grid-sitemap"> <iframe src="https://www.indroid.in/view/flipcard"></iframe> </div> </div>}

This code represents the default sitemap widget in Blogger.

Step 4: Customize the Sitemap Widget

To create a stylish sitemap page, you can modify the default sitemap widget's appearance. Replace the above code with the following code snippet:

 

{<style type="text/css"> .tb-sitemap { background-color: #222; color: #ddd; font-family: Verdana,Geneva,Tahoma,Arial,Sans-serif; font-size: 14px; font-weight: 410; overflow: hidden; border-radius: 5px; box-shadow: 0 0 9px rgba(0,0,0,.1); } .tb-sitemap .toc-header { color: #fff; font-family: inherit; font-weight: 410; font-size: 14px; background-color: #1A1B1E; margin: 0; padding: 13px; overflow: hidden; cursor: pointer; border-top: 1px solid #5c5c5c; border-bottom: 1px solid #5c5c5c; transition: initial; } .tb-sitemap .toc-header:hover { background: rgb(0,52,52); background: linear-gradient(90deg, rgba(0,52,52,1) 19%, rgba(3,106,30,1) 38%, rgba(0,182,182,1) 100%); } .tb-sitemap .toc-header:before { content: ''; width: 0; height: 0; position: relative; float:right; top: 10px; right: 10px; border: 5px solid transparent; border-color: #aaa transparent transparent; transition: all .3s ease; } .tb-sitemap .toc-header.active { background: #1a1b1e; color: #fff; } .tb-sitemap .toc-header.active:before { border-color: #fff transparent transparent; top: 5px; -webkit-transform: rotateundefined-180deg); -moz-transform: rotateundefined-180deg); -ms-transform: rotateundefined-180deg); -o-transform: rotateundefined-180deg); transform: rotateundefined-180deg); } .tb-sitemap .loading { display: block; padding: 14px; text-decoration: blink; } .tb-sitemap ol { margin: 0; padding: 0; list-style: none; transition: initial; } .tb-sitemap li { counter-increment: step-counter; line-height: normal!important; margin: 0!important; padding: 7px 7px 7px 16px!important; white-space: nowrap; text-align: left; overflow: hidden; transition: initial; } .tb-sitemap li:first-child { background: rgb(0,52,52); background: linear-gradient(90deg, rgba(0,52,52,1) 19%, rgba(0,0,0,1) 38%, rgba(71,62,62,1) 100%);} .tb-sitemap li:nth-child(2n) { background: rgb(71,62,62); background: linear-gradient(90deg, rgba(71,62,62,1) 19%, rgba(0,0,0,1) 38%, rgba(0,52,52,1) 100%);} .tb-sitemap li:nth-child(2n+3) { background: rgb(0,52,52); background: linear-gradient(90deg, rgba(0,52,52,1) 19%, rgba(0,0,0,1) 38%, rgba(71,62,62,1) 100%);} .tb-sitemap li::before { content: counter(step-counter)'.'; margin-right: 5px; } .tb-sitemap a { color: #fff!important; text-decoration: none; font-size: 90%; transition: initial; font-weight:normal!important; } .tb-sitemap a:visited { color: #fff!important; transition: initial; } .tb-sitemap a:hover,.tb-sitemap a:visited:hover { color: #fff!important; text-decoration: underline!important; transition: initial; } </style> <br /> <div class="tb-sitemap" id="tb-sitemap"> <span class="loading">Sitemap Loading..</span> <script type="text/javascript"> var toc_config = { url: 'https://www.Indroid.in', containerId: 'tb-sitemap', showNew: 12, newText: ' <strong style="font-weight:normal;font-style:normal;color:#000;font-size:11px;background:#fff000;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">New!</strong>', sortAlphabetically: { thePanel: true, theList: true }, maxResults: 9999, slideSpeed: { down: 400, up: 400 }, slideEasing: { down: null, up: null }, slideCallback: { down: function() {}, up: function() {} }, clickCallback: function() {}, jsonCallback: '_toc', delayLoading: 0 }; </script> <script src="https://docs.google.com/uc?export=download&id=1znP9zLmzL9rN_zkRHGD7JqYfl17e35Ko" type="text/javascript"></script> </div> </div>}

The modified code will display the sitemap as an unordered list (ul) with each page's title and date. You can further customize the CSS styles to match your blog's design.

Step 5: Save and Preview Changes

After customizing the sitemap widget, click on the "Save" button to apply the changes to your template. Then, click on the "Preview" button to see how the sitemap page looks on your blog. Make any necessary adjustments until you are satisfied with the appearance.

Step 6: Publish the Sitemap Page

Once you are happy with the changes, click on the "Save" button again and exit the Theme Editor. Now, it's time to publish the sitemap page on your blog. Follow these steps:

1. Go to your Blogger dashboard and select "Pages" from the left-hand menu.
2. Click on the "New Page" button to create

2. Click on the "New Page" button to create a new page.
3. In the page editor, give your sitemap page a suitable title, such as "Sitemap" or "Site Structure."
4. In the content area, you can add a brief introduction or description of the sitemap page to help visitors understand its purpose.
5. Finally, click on the "Publish" button to make your sitemap page live on your blog.

Benefits of a Stylish Sitemap Page

Having a stylish sitemap page offers several advantages for both search engine optimization (SEO) and user experience. Here are a few key benefits:

1. Improved SEO: A well-structured sitemap helps search engines crawl and index your website more effectively. This can result in better visibility in search engine results pages (SERPs) and increased organic traffic to your blog.
2. User-Friendly Navigation: A stylish sitemap page provides visitors with a clear overview of your website's structure. It enables them to find specific pages or blog posts easily, enhancing the overall user experience and reducing bounce rates.
3. Enhanced Website Organization: By organizing your blog's content into different categories and sections within the sitemap, you create a logical hierarchy that makes it easier for both search engines and visitors to navigate your site.
4. Visual Appeal: A stylish sitemap page adds a visually appealing element to your blog's design. By customizing the appearance of the sitemap widget, you can create a seamless integration with your blog's overall theme and branding.
5. Promotes Discoverability: A sitemap page can help promote the visibility of new or lesser-known content on your blog. By including all pages, even those buried deep within your site's structure, you ensure that search engines can find and index them.

Conclusion

Creating a stylish sitemap page in Blogger is a straightforward process that can significantly benefit your blog's SEO and user experience. By following the steps outlined in this article, you can customize the sitemap widget's appearance to match your blog's design and enhance its navigational structure. Remember to regularly update your sitemap as you add new content to ensure it remains an accurate reflection of your site's organization.