Header Ads Widget

Sitemap & HTML

Blogger HTML Sitemap widget

This CSS is mainly used to design a Blogger HTML Sitemap widget, giving it a clean and interactive layout.

How to add it:

  • Go to Blogger Dashboard → Theme
  • Click Edit HTML
  • Find ]]></b:skin>
  • Paste the CSS code just above it and save
    Or use: Theme → Customize → Advanced → Add CSS

Important fixes:

The hover effects should look like this:

.map-thumb a:hover {
    transform: scale(1.1) rotate(-1.5deg)!important;
}
.mapapost .wrp-titulo a:hover {
    color: #f30;
    text-decoration: underline;
}

What this CSS does:

  • Creates a styled sitemap box layout
  • Improves category/title appearance
  • Styles post thumbnails neatly
  • Adds smooth hover animations
  • Makes the sitemap look more modern and responsive

Note:

This CSS only controls the design part. To make the sitemap fully work, you must also add the HTML and JavaScript code for the widget. Without that, only the styling will appear, but the sitemap functionality will not work.

Responsive Advertisement

The following HTML Coding

Now this is the most essential part of the tutorial and you have to do it very carefully. In the template, search for the </body> tag and just above it paste the following HTML Coding.

To correctly add this script in your Blogger theme:

  1. Go to Blogger Dashboard → Theme
  2. Click Edit HTML
  3. Press Ctrl + F and search for the closing </body> tag
  4. Scroll to the line just above </body>
  5. Paste the entire JavaScript code snippet there
  6. Click Save Theme

This placement is important because scripts added just before </body> load after the page content, which helps improve performance and ensures proper execution of AJAX and jQuery functions used in your sitemap widget.

After saving, your sitemap page will automatically generate labels and post lists when the page contains [sitemap].



Post a Comment

0 Comments