Creating a main menu for your Blogger site involves modifying your blog’s template.I’ll provide you with the HTML code for a basic main menu. You can then follow these steps to add it to your template:
1. Log in to your Blogger account.
2. Go to the “Theme” section of your blog.
3. Click on “Edit HTML” to access your Blogger template code.
4. Look for the opening `<header>` tag in your template and paste the following code just inside it:
```html
<nav class=”main-menu”>
<ul>
<li><a href=”/”>Home</a></li>
<li><a href=”/p/about.html”>About</a></li>
<li><a href=”/p/blog.html”>Blog</a></li>
<li><a href=”/p/services.html”>Services</a></li>
<li><a href=”/p/contact.html”>Contact</a></li>
</ul>
</nav>
```
5. Add the following CSS code to your template, ideally in the `<style>` section or in an external stylesheet if you have one:
```css
.main-menu {
Background-color: #333;
Text-align: center;
Padding: 10px 0;
}
.main-menu ul {
List-style: none;
Margin: 0;
Padding: 0;
}
.main-menu ul li {
Display: inline-block;
Margin: 0 20px;
}
.main-menu ul li a {
Text-decoration: none;
Color: #fff;
Font-size: 16px;
Font-weight: bold;
Transition: color 0.3s ease-in-out;
}
.main-menu ul li a:hover {
Color: #ffcc00;
}
```
6. Click “Save” to apply the changes to your template.
This code snippet creates a basic main menu with links to Home, About, Blog, Services, and Contact pages. Make sure to adjust the URLs in the `<a href=”…”>` attributes to match your actual page URLs.
After saving the changes, your Blogger site should display the new main menu. Remember that this is a basic example, and you can further style and customize the menu to match your blog’s design. If your Blogger template has built-in navigation options, it might be easier to use those instead of adding custom code. Always ensure that your menu is responsive and works well on various devices.
Comments
Post a Comment