How to Adding stylish header categories to your Blogspot (Blogger) HTML

 Adding stylish header categories to your Blogspot (Blogger) HTML can enhance the look and navigation of your blog. Here's a step-by-step guide to help you achieve that:

Step 1: Access Your Blog's HTML

1. Log in to Blogger: Go to your Blogger dashboard.
2. Select Your Blog: Choose the blog you want to edit.
3. Go to Theme: Click on "Theme" in the left sidebar.
4. Edit HTML: Click on the "Edit HTML" button.

Step 2: Backup Your Theme

Before making any changes, it's a good idea to back up your current template:

1. Click the Backup/Restore button.
2. Download your current theme.

Step 3: Locate the Header Section

1. Press Ctrl + F to open the search box in the HTML editor.
2. Search for <header> or <b:skin> to find the section where you can add your CSS.

Step 4: Add CSS for Stylish Categories

Within the <b:skin> section, add your custom CSS for styling the categories:

If our content are so helpful! Please support our blogger by clicking one of our adverts, we push to buy custom domain 

 

/* Stylish Header Categories */
.category-header {
    display: flex;
    justify-content: space-around;
    background-color: #4CAF50; /* Change background color */
    padding: 10px 0;
}

.category-header a {
    color: white; /* Text color */
    text-decoration: none; /* Remove underline */
    padding: 10px 20px; /* Padding for links */
    transition: background 0.3s;
}

.category-header a:hover {
    background-color: #45a049; /* Change color on hover */
}

Step 5: Add the HTML for Categories

Locate the position where you want the header categories to appear. This usually goes inside the <header> section or right after it. Add the following HTML:

If our content are so helpful! Please support our blogger by clicking one of our adverts, we push to buy custom domain 

 

<div class="category-header">
    <a href="URL1">Category 1</a>
    <a href="URL2">Category 2</a>
    <a href="URL3">Category 3</a>
    <a href="URL4">Category 4</a>
</div>

Replace URL1, URL2, etc., with the links to your blog categories.

Step 6: Save Your Changes

1. Click on "Save" to apply your changes.

If our content are so helpful! Please support our blogger by clicking one of our adverts, we push to buy custom domain 

 

Step 7: Preview and Adjust

1. Preview your blog: Check how the changes look.
2. Adjust CSS: You can modify the colors, padding, and fonts in the CSS to match your blog's style.

Additional Tips

• Mobile Optimization: Make sure your styling looks good on mobile devices. You might want to adjust the flex-direction for smaller screens.
• Use Google Fonts: Consider integrating Google Fonts for more stylish typography.

• If our content are so helpful! Please support our blogger by clicking one of our adverts, we push to buy custom domain 

   

Conclusion

By following these steps, you can successfully add stylish header categories to your Blogspot blog. Customize the colors and styles to fit the theme of your blog, ensuring a visually appealing and user-friendly experience. Happy blogging!