Officialhelplines

Templates' Main Navigation Menu

Main Navigation Setup Guides

In our Blogger templates, Main Navigation Menu which is also sometimes referred to as Primary Navigation Menu allows both your blog readers, visitors and search engine spiders easily browse and navigate your blog.


As a result, the Main Navigation Menu should contain all the important links you want your blog visitors and search engine spiders see.


Depending on the template in use, we sometimes use Vertical Navigation Menu thus; vertically arranged navigation menu links while other times, we use Horizontal Navigation Menu in whose links are horizontally arranged or aligned.


In any case, we decide the best navigation menu style to be used for a particular template based on the template's design and on the purposes for which the template is made.


Meanwhile, it should be noted that because we aim to simplify our template documentations and guides, we have decided to consolidate some of our template's features' how-to setup guides such that we would have a single page to contain the setup instructions for any such feature.


On this single page, we would be containing the setup instructions for our Blogger templates Navigation Menu Styles and versions.


Nevertheless, which version of the Navigation Menu Style is featured on or used for a template is stated and linked on the template's sales page under the template features section.


Main Navigation Menu v1: Simplified Vertical Style

Main Navigation Menu

This Main Navigation Menu v1: Simplified Vertical Style version is our initial version and it is the version that is used for most of our earliest Blogger templates.


This version is optimized for speed and conforms with the latest SEO guidelines.


How to Modify your Blog Navigation Menu on Templates Using the Main Navigation Menu v1: Simplified Vertical Style (From Text Editor: NotePad++, Sublime etc)

  1. From your text editor where you already have the template.xml file opened, search for:

  2. <!-- Main Navigation Menu -->
  3. Once there, modify the links as needed and as you want.

  4. That space can contain unlimited number of links. You can add to, remove from or modify the existing links there.

  5. Click SAVE to effect the changes made.

  6. Finally, you may now upload the modified template.xml file on your Blogger blog. Don't know how? Learn how to upload a template on Blogger blog from here


How to Modify your Blog Navigation Menu on Templates Using the Main Navigation Menu v1: Simplified Vertical Style (From Web Browsers on Blogger.com)

  1. I assume you are already logged into your blogger blog.

  2. Click Theme from the blogger main menu (to your left).

    How to Modify Blog Navigation Menu On Blogspot Website - Step 2
  3. From the page that opens, click the radio button that has an icon pointing downward in it and then click Edit HTML. After a few seconds or minutes depending on your device speed and your internet connection, a page should be displayed revealing a whole lots of codes.

    How to Modify Blog Navigation Menu On Blogspot Website - Step 3
  4. Now, click anywhere inside that whole lots of codes and press CTRL + F. This will pop out a search widget that allows you search within the source codes content only.

    How to Modify Blog Navigation Menu On Blogspot Website - Step 4
  5. Just copy and paste the line of code below onto the search widget seen in the image above then, press Enter.

  6. <!-- Main Navigation Menu -->
  7. Once there, modify the links as needed and as you want.

  8. That space can contain unlimited number of links. You can add to, remove from or modify the existing links there.

  9. Finally, click SAVE to effect the changes made.

  10. How to Modify Blog Navigation Menu On Blogspot Website - Step 8

NOTE:
  • You can have as many links as you want inserted or included in the list. It would be perfectly contained.
  • If you need to change the icon next to any link therein, you can simply replace the fa-car (for example) with say, fa-basket; if that's suitable for you.
  • For a complete list of icons, you can check with fontawesome icons bootstrap cheat sheets page here.

0 Comments

to top