How to add New Label and Show it as Category or Subcategory in Blogger, WordPress or Any Website



Add new label and new category



On this topic, I will show you the simplest way to add new tag or new label in blogger BlogSpot. Also, I will show you how to add this new label as a new category or subcategory to which visitors can click from website interface (blogger, wordpress, ...etc.) to navigate to a specific group of related topics or specific category.



The method of adding new label or new tag is applicable only to blogger BlogSpot, however, method of categorizing posts by adding new main category, new subcategory or changing the main category to subcategory can be used on other website or blogging platform providers, but you may need to use theme that support those customizations, since not all themes or templates can support this method of categorization.  



Related topic:
Add a clickable table of contents to your topics



Before we start, you should make backup for your theme or template, in a way to restore it if you advanced into a problem in website or blogger theme due to any mistake on this method.


 First:
   How to add new tag or new label in blogger BlogSpot:
  1. Login into your blogger dashboard or control panel then go to Posts panel
  2. Select one post or more by clicking on small box before each post
  3. Click on Label selected posts icon (the small icon just before Publish button)
  4. Click on New label... option
New label on blogger blogspot


    5. Type the name of new tag or new label into the textbox then click OK to save.
     Enter label name
     


Second:
   How to add the new label as new main category and/or subcategory to be shown on then website interface:

Steps:
  1. After you make a backup for your theme, go to theme or template panel and click on Edit HTML to start editing the template or theme code
  2. Locate the navbar or navigation bar menu (it could start by the following code form):
                           <nav id='nav'>
                           <!-- secondary navigation menu start -->
                           <ul class='nav menubar' id='menu-main'>
                          <li>
                          <a class='active' href='/'>
                        <i class='fa fa-home'/>
                         <div id='act'>
                         Home
                      </div>
                     </a>
                   </li> 

You can click on jump to widget button if you are using Google blogger BlogSpot then navigate to navbar or whatever (based on used theme), or you can search for any Label you have in your website by clicking anywhere inside HTML code box of  theme then press Control + F Keys from Keyboard to open search box then type the name of known label.  


3. Add the new category just below the ending or closure tag </li> of the older category in which you need the new category to appear:

As the name of newly added label was Android-rooting, so its url will be as this form (you should be aware for small and capital state of letters):
 http://www.apptechera.net/search/label/Android-Rooting

 So the code of new category will be ass following: 

 <li>
<a href='http://www.apptechera.net/search/label/Android-Rooting'>
  Android Rooting
     </a>
   </li>


Notes:
a. The main category & subcategories should be wrote as this form:
    <li>
   <a href='#'>
   Name
   </a>
   </li>

     #    = The URL of tag
Name = The name of category which shown on website or blogger interface
Notice that any tag should be started by <...> and closed by </...>
Replace apptechera.net  by your own domain name.

b. Subcategories should be exist between these 2 tags ( <ul> </ul> ) and before </li> tag of main category:

    Example for code contains main category (red color) and subcategory (green color) (Replace apptechera.net  by your own domain name):-   
 <li>
   <a href='http://www.apptechera.net/search/label/Mobile'>
       Mobile
        </a>
           <ul>
              <li>
   <a href='http://www.apptechera.net/search/label/Android-rooting'>
                     Android Rooting
                     </a>
                    </li>           
                </ul>
            </li>

c. Any small mistake on code typing (such as writing ending tag as <li> or <ul> instead of </li> or </ul>, or even in tags order like  </li> before </ul> or ), will prevent you from saving the new changes or could lead to a problem in showing website properly.



 4. After you finish editing the codes, click on Save theme button to save changes.



Finally, you should see this video to see the method of adding new label and how to show it as new category step by step and clearly:

Share on Google Plus
    Blogger Comment
    Facebook Comment

2 comments: