Skip to content Skip to sidebar Skip to footer

Easy Steps to Create Navigation Menu Above Blog Posts for Optimizing Blog SEO

Easy Steps to Create Navigation Menu Above Blog Posts for Optimizing Blog SEO

Downloadmr.com - Achieving the dream of becoming a successful blogger with a quality blog requires well-planned efforts. One key to success is SEO optimization, which demands patience, perseverance, diligence, and high precision.

In this discussion, the focus is on how to create a navigation menu above blog posts. Before delving into the main discussion, let me briefly explain about the navigation menu above blog posts!

This navigation menu serves as a container for article keywords or labels, providing a more structured and informative reading experience. Understanding the importance of the navigation menu can significantly enhance the attractiveness and SEO optimization of your blog.

For example:

Above each post, there are 4 menus and 2 sub-menus for each menu. The layout can be illustrated as follows:

Menu 1 > Sub Menu 1
> Sub Menu 2
Menu 2 > Sub Menu 1
> Sub Menu 2
Menu 3 > Sub Menu 1
> Sub Menu 2
Menu 4 > Sub Menu 1
> Sub Menu 2

In this context, the menu is the main category that encompasses the entire blog content. Meanwhile, sub-menu is a more specific category that deepens the content in a more focused and engaging way. With this layout, readers can easily navigate and find the information they are looking for.

Another example:

I discuss two articles in the same category, Technology, but with different topic focuses. The first article discusses "Latest Smartphone Prices 2022," while the second highlights "Innovative Laptop Specifications for 2023."

Overall, both fall under the Technology category with the following topic distribution:

Technology > Smartphone
                      > Laptop

  • Smartphone: Latest Smartphone Prices 2022.
  • Laptop: Innovative Laptop Specifications for 2023.

With this illustration, it is hoped to make it easier to understand the difference in focus between the two articles, all of which are encompassed in the broad framework of the Technology category.

Similar to other menus and sub-menus, you can create categories that match the content of your article. For a step-by-step guide on creating menus and sub-menus, we recommend reading the tutorial below sequentially to avoid confusion.

Creating a navigation menu above blog posts with the following steps:

  1. If your blog dashboard still uses the old layout, open the "Dashboard" and select "Theme" or "Themes."
  2. Next, navigate to the "Edit HTML" option.

For smartphone users, follow these steps:

  1. Access the "Blogger Dashboard" on your smartphone.
  2. Choose "Try the new blogger."
  3. Click on the "three dots" icon in the upper right corner.
  4. Select "Edit HTML."

The illustration can be seen in the image below.

If you have entered the HTML, find the following code:

<li><a href="#">Menu</a></li>

Once found, replace the # with the URL of your blog page and change the word "Menu" according to your preference.

For example, like this:

<li><a href="https://www.downloadmr.com/2020/07/membaca-pesan-chat-whatsapp-yang-telah-dihapus.html">Tutorial</a></li>

To create a sub-menu, do the same as above.

To add a menu, use the following code and place it before the `<ul>` code:

<li><a href="#">New Menu</a></li>

If you want to add a menu and sub-menu, use the following code and place it before the `</ul>` code:

<!-- menu navigasi header start -->
<ul>
  <li><a href='https://www.downloadmr.com/search/label/News'>NEWS</a></li>
  <li><a href='https://www.downloadmr.com/search/label/Tutorial'>TUTORIAL</a></li>
  <li><a href='https://www.downloadmr.com/search/label/Review'>REVIEW</a></li>
  <li><a href='https://www.downloadmr.com/search/label/Art'>ART</a>
  <ul>
<li><a href='https://www.downloadmr.com/search/label/Cover'>COVER</a></li>
<li><a href='https://www.downloadmr.com/search/label/Illustration'>ILLUSTRATION</a></li>
<li><a href='https://www.downloadmr.com/search/label/Sticker'>STICKER</a></li>
  </ul>
  </li>
  <li><a href='https://www.downloadmr.com/p/about-us.html'>ABOUT</a>
  <ul>
<li><a href='https://www.downloadmr.com/p/about-us.html'>ABOUT US</a></li>
    <li><a href='https://www.downloadmr.com/p/contact.html'>CONTACT</a></li>
<li><a href='https://www.downloadmr.com/p/disclaimer.html'>DISCLAIMER</a></li>
<li><a href='https://www.downloadmr.com/p/privacy-policy.html'>PRIVACY POLICY</a></li>
<li><a href='https://www.downloadmr.com/p/sitemap.html'>SITEMAP</a></li>
  </ul>
  </li>
</ul>
<!-- menu navigasi header end -->

Finally, don't forget to save the changes. The result will look like this:

The blog appearance will be like this.

The process of creating a navigation menu above blog posts is quite straightforward. If you encounter confusion or need further clarification, feel free to leave a comment below. Also, be sure to follow this blog to stay updated with the latest information. Thank you for your participation!

Post a Comment for "Easy Steps to Create Navigation Menu Above Blog Posts for Optimizing Blog SEO"