How to Add a Sitemap on Blogger

How to Add a Sitemap Page on Blogger

Sitemap Widget on Blogger By bitgk.blogspot.com

In Blogger, an Archive widget has actually been provided which contains an archive of all blog articles based on publish time. However, because it is packaged in the form of a widget, the customization is very limited and the aesthetics of the layout is difficult to adjust. So to be more organized, here e1very will share How to Add a Sitemap Widget on Blogger

The advantages of Adding a Sitemap page on Blogger are so that the blog appears more professional than before. In addition, visitors can also view and search for all of our blog articles easily. Of course it will add a plus for the blog if visitors open certain articles on this sitemap widget.

Please follow the steps below:

First, go to Blogger>> Pages>> Create a new Page>> Add the code below on the HTML tab of the page post
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizr1ewbv5FLVr2lXjyFGdA5otAzSHiJws2nSeSxuSeAlgLjQ64AQOlOl1vw7UyRsL2IBDSpP165jwo09f1ujwMshsGCR8WPMyoYLLZXiN35JGmHmmIeZztF-yxk-DNB6VlrtdCf5Rqo5I4/s1600/Sitemap+Arlina+Code.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Sitemap Arlina Code" class="lazyload" style="border: none;" data-original-height="444" data-original-width="1200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizr1ewbv5FLVr2lXjyFGdA5otAzSHiJws2nSeSxuSeAlgLjQ64AQOlOl1vw7UyRsL2IBDSpP165jwo09f1ujwMshsGCR8WPMyoYLLZXiN35JGmHmmIeZztF-yxk-DNB6VlrtdCf5Rqo5I4/s1600/Sitemap+Arlina+Code.png" title="Sitemap Arlina Code" /></a></div>

<div id="bp_toc">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=99999&amp;callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">#comments,#Label1,#FollowByEmail1{display:none}#bp_toc{color:#000;margin:0 auto;max-height:686px;overflow:hidden;overflow-y:auto}span.toc-note{margin:0 auto 25px auto;text-align:center;line-height:normal;display:table;position:relative;overflow:hidden;font-size:14px;padding:10px 20px;background:#007bff;background-image:linear-gradient(50deg,#ff4169,#8b41f6);background-size:100%;color:#fff;border-radius:99em;font-weight:500;transition:all .3s}span.toc-note:hover{background-size:200%}.toc-header-col1{padding:10px;background-color:#f5f5f5;width:250px}.toc-header-col2{padding:10px;background-color:#f5f5f5;width:75px}.toc-header-col3{padding:10px;background-color:#fff;width:125px}#bp_toc td.toc-header-col1,#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3{border:1px solid rgba(0,0,0,0.05);background:#fff}#bp_toc td.toc-header-col1{}#bp_toc td.toc-header-col2{}#bp_toc td.toc-header-col3{}.post td{background:transparent}#bp_toc td.toc-entry-col1,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3{border:1px solid rgba(0,0,0,0.05)}#bp_toc td a{background:transparent;color:#222;float:none;border-radius:0;padding:0;font-size:100%;display:initial;box-shadow:none}#bp_toc td a:hover{color:#0984e3}.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:#aaa;font-weight:500;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:10px 5px;font-size:90%}.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a{color:#000}.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover{color:#3498db}#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);display:inline-block;min-width:38px;margin-right:.7em;background:#fc5c65;color:#fff;border-radius:99em;font-weight:500;text-align:center;font-size:12px;padding:0;line-height:1.7}
#bp_toc td.toc-entry-col1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px}
#bp_toc::-webkit-scrollbar{-webkit-appearance:none;width:4px;height:5px}#bp_toc::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);border-radius:10px}#bp_toc::-webkit-scrollbar-track{background-color:transparent}#bp_toc::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.25)}
@media screen and (max-width:768px) {
#bp_toc td.toc-entry-col1{white-space:normal;overflow:visible;text-overflow:initial;max-width:100%}#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3,#bp_toc table tr td.toc-entry-col1:first-child::before{display:none}}
</style>

Then click Publish

now you are ready with your own sitemap. Your sitemap page will look like this


Location: India

Comments

Post a Comment

We Love Hearing from You!
Thank you for reading our post! Your thoughts and opinions are important to us. Please leave a comment below to share your feedback, ask questions, or start a discussion. We look forward to engaging with you!

Note: Comments are moderated to ensure a respectful and positive environment.

Popular posts from this blog

Implementing Auto-Logout in PHP: Enhancing Security for Your Web App

Image
When building a web application, security is always a top concern. One effective way to protect your users is by implementing an auto-logout feature. This ensures that users are automatically logged out after a period of inactivity, reducing the risk of unauthorized access. In this post, we’ll walk through the theory of how to set up this feature in a PHP session-based login system. Overview We’re creating a secure login system where users are logged out after a defined period of inactivity. This involves session management, detecting user activity, and implementing a countdown timer. Step 1: Session Management First, we need to manage user sessions. When a user logs in, we start a session to keep track of their activity across different pages. Here’s what you need to do: Initialize Sessions : Use session_start() to initiate a session or resume the current one. Store Session Data: Store user-specific data, like the username, in session variables to make it accessible throughout the s...
Latest from us

A Simple and Professional Login Form with Gradient Background

Image
Looking to add a clean and modern login form to your website? This example is just what you need. It’s straightforward, responsive, and has a nice gradient background that makes it stand out without being overwhelming. What’s Great About This Login Form? It’s Centered and Clean: The form sits right in the center of the screen, making it easy for users to focus and log in without distractions. Works on All Devices: Whether your users are on a desktop, tablet, or smartphone, this form looks great and functions smoothly. What’s Inside the Form? Username Field: Users can enter their username or email. Password Field: The password is securely hidden as they type. Login Button: A simple button that’s easy to click, with a slight hover effect for a polished feel. How It Works: HTML Structure: The HTML is basic but effective, featuring a form with username and password fields inside neatly styled containers. CSS Styling: The styling is where the magic happens. The background gradient cr...
Latest from us

How to Create a YouTube Subscribe Website Widget

Image
In this tutorial, you'll learn how to create a YouTube subscribe button widget for your website using the official documentation from Google. This widget allows your visitors to subscribe to your YouTube channel directly from your website, which can help increase your subscriber count and engagement. Prerequisites Before you begin, make sure you have the following: A Google account with a YouTube channel. Basic knowledge of HTML, CSS, and JavaScript. Access to edit your website's code. Steps to Create the YouTube Subscribe Widget: Visit the YouTube Subscribe Button Documentation:     Go to the YouTube Subscribe Button Documentation provided by Google. Configure Your Subscribe Button: Enter your channel's URL or ID in the channel parameter field. You can find your channel ID in your YouTube account settings under " Advanced Settings. " Choose your button layout (default or full). The full layout includes both the channel icon and subscriber count. Select the butto...
Latest from us