• Thu. Dec 7th, 2023

How to Create a Breadcrumb Navigation Menu

ByAdmin

Jul 4, 2015

In the last post you learned how to create a horizontal menu.
Therefore, this time I will share an easy way to make a more creative horizontal menu with breadcrumbs. This menu is a development of the horizontal menu and is in great demand by bloggers.


The breadcrumb navigation menu is a horizontal menu that has derivatives in the form of categories that can only be seen if the cursor is in that column.
This menu is increasingly being used by bloggers to save space and beautify the appearance of their blog. Of course, a blog with a neat appearance will be more enjoyable for visitors to read.


Another reason to use the breadcrumb navigation menu is the many categories that are topics of discussion on the blog.
People tend to prefer more variety, so this menu is the main choice to make the blog look cooler. With a more varied appearance, it will certainly be easier to build a blog to make money. (Read:
How to Make Money From Blogs )


How to create a horizontal breadcrumb menu


1. Log in to your blogger Dashboard and open the layout page


2. Next click “Add a Gadget”


3. Next you search for “HTML / Java Script” and immediately click


4. Please enter the code below in the window.


    <nav id=’nav’>

        <ul id=’menu’>
            <li><a href=’#’>Home</a></li>
            <li><a href=’#’>Menu 1</a>
                   <ul>
                   <li><a href=’#’>Sub Menu 1</a></li>
                   <li><a href=’#’>Sub Menu 2</a></li>
                   <li><a href=’#’>Sub Menu 3</a></li>
                   </ul>
            </li>
            <li><a href=’#’>Menu 2</a>
                   <ul>
                   <li><a href=’#’>Sub Menu 1</a>    </li>
                   <li><a href=’#’>Sub Menu 2</a></li>
                   <li><a href=’#’>Sub Menu 3</a></li>
                  </ul>
            </li>
            <li><a href=’#’>Menu 3</a>
                  <ul>
                  <li><a href=’#’>Sub Menu 1</a>    </li>
                  <li><a href=’#’>Sub Menu 2</a></li>
                  <li><a href=’#’>Sub Menu 3</a></li>
                  </ul>
            </li>
            <li><a href=’#’>Menu 4</a></li>
            <li><a href=’#’>Menu 5</a></li>
            </li>
        </ul>
    </nav>


Notes:


In the words ”
Menu ” please replace it with the name of the menu you want, for example: Home, Tutorial, Business, or another menu. In the ” Sub Menu

text
, please replace it with the desired category, for example: Blogger Tutorial, WordPress, according to your wishes.
Change the menu text from the lines  
<a href=’Menu’>   and   <a href=’Sub Menu’>

  
with the link address from the menu. The way you open the blogger page and click ‘view’ the page so that a link from that page will appear and then you just copy the link.


5. After that you click “SAVE”


At this point, the menu creation process is complete, all you have to do is see the results.


That’s an easy way to create a horizontal menu with breadcrumbs.
With this menu you can make your blog look cooler in the eyes of visitors. For blogs that are new and don’t have many categories available, choosing
to create a horizontal menu without breadcrumbs is a wise choice for building your blog.  

By Admin

6 thoughts on “How to Create a Breadcrumb Navigation Menu”
  1. Wah simpel banget caranya gan, ga kaya di blog lain yg ribet.

    Btw, apa kelebihan dan kekurangan script di atas gan? Kan ada tulisan "menu1, menu2, menu3, dst"
    Apa menunya terbatas hanya sampai 5 atau bagaimana?

    Manvvtabb artikelnya, thanks

  2. Tapi kok? Setelah diboca..

    Ane kira itu breadcrumb yg kaya gini : "home » tutorial » cara membuat navigasi breadcrumb". Gitu..
    Ternyata menu biasa

Leave a Reply

Your email address will not be published. Required fields are marked *