How to make drop down menu on blogger (part 4)

1:10 PM Teq Advice 0 Comments

 Read in English      Read on Arabic





How to make drop down menu on blogger


     Welcome back, we talked last time about how to write articles and classify them by linking them with Labels. Today we'll talk about how to make drop down menu on blogger and link labels with them to make browsing of the website much easier for readers.
                                 
 What do we mean by header and Labels? Let's remember the location of both on our website which we have created. Look at the following images




How to make menu on blogger


  After entering into the Dashboard of the blog, click on (View blog) to open your website. We will need the web address of each Label to link them with the main menu of our website.
↓↓↓



From the dashboard of the blog, choose theme then choose Edit HTML to edit the code of the template; thus we can link the labels with the header.
↓↓




     Now to edit the code, press Left click inside the search box thus the cursor will appear inside the code box. Press Ctrl + F to open the search box, you can type any word, that is mentioned in your web site, to edit the code related to that word. For example, to edit the code that is related to (about me) in my main menu, I wrote (about me) in the search box and the result will appear as you can see in the following picture.




How can we link a label with drop down menu in blogger?


     Now we will return to our website as we can see in the following image. What we need now is the web address for the label coffee types to link it with the main menu of the website. To do that, we will first click on the label coffee types which is found within the Labels box (see the picture below). After pressing on it, all the articles that are classified with this label will appear to us. Now we'll copy the Web address of coffee types' label as shown in the following picture. ↓↓



     Inside the code box, search for (drop down) and replace it with (content). Leave the sign #, in the same line, as it is because we do not want to link the word content with any web address. Now, replace (full width) with the Label coffee types; replace the sing #, located in the same line, with the web address of coffee type's label. Remember that all black colored words in the code box represent the words that appear in your website.





     At the end, press on save theme to save all the changes that are made in the code template.



    The following picture shows recent changes that are made in your website. Repeat previous steps to attach remaining labels with the header.




    I hope that this article was helpful. If you have any queries, please don’t hesitate to write them below in the comments.



Enter your email address:


0 comments: