Skip to main content

How To Create A Drop Down Menu In Blogger



One question many new bloggers have when setting up their template in Blogger is how to create a drop down menu so that they can sub-categorize their menu at the top. To do so, will require a bit of HTML. It's pretty simple - nothing to worry about!

Let's take a real life example from the EyeObserver homepage so that it'll be easier to follow. Say we want to add a "Gadget of the Day" sub-menu under the "Gadgets" menu as shown in the picture below.



Before we go into the code, it's important to understand that in most templates, the Header Menu is created as a "List" item in the HTML code. Hence, to add an additional sub-menu to the header menu, we will need to find it's corresponding HTML block and create a "sub-menu" list item called "Gadget of the Day". To do so, follow these simple steps:

1. Open the Blogger dashboard and click on Template



2. Before making any changes, back up your existing template by clicking on Backup / Restore and
    then Download full template. Should anything go wrong, you can always use this xml file to
    restore your blog to the way it was.

3. Click on Edit HTML which will open your HTML template editor

 4. Find the main navigation menu label code by pressing CTRL + F and typing "/li" (without
   quotation marks)

5. Cycle through the matches until you reach the portion of code corresponding to your main label. You will know it is correct because the items correspond with what you have in your main menu. Here is ours:


The relevant portion of code:

<!-- Main_navigation_Menu -->
<ul class='blog_menus'>
  <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
  <li><a href='http://www.eyeobserver.com/search/label/Gadgets'>Gadgets</a></li>
  <li><a href='http://www.eyeobserver.com/search/label/How-Tos'>How-Tos</a></li>
  <li><a href='http://www.eyeobserver.com/search/label/Interesting%20Stuff'>Interesting Stuff</a></li>
  <li><a href='http://www.eyeobserver.com/search/label/Blogger%20Resources'>Blogger Resources</a>  

</li>  
<li><a href='http://www.eyeobserver.com/p/privacy-statement.html'>Privacy</a></li>
  <li><a href='http://www.eyeobserver.com/p/about-us.html'>About</a></li>
<li><a href='http://www.eyeobserver.com/p/contact.html'>Contact</a></li>
</ul>
  

 To this, we're going to modify the code slightly by adding the portion in red:

 <!-- Main_navigation_Menu -->
<ul class='blog_menus'>
  <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
  <li><a href='http://www.eyeobserver.com/search/label/Gadgets'>Gadgets</a>
    <ul class='sub-menu'>
      <li><a href='#'>Gadget of the Day</a></li>
      
    </ul>
</li>
  <li><a href='http://www.eyeobserver.com/search/label/How-Tos'>How-Tos</a></li>
  <li><a href='http://www.eyeobserver.com/search/label/Interesting%20Stuff'>Interesting Stuff</a></li>
  <li><a href='http://www.eyeobserver.com/search/label/Blogger%20Resources'>Blogger Resources</a>  

 </li>  
<li><a href='http://www.eyeobserver.com/p/privacy-statement.html'>Privacy</a></li>
  <li><a href='http://www.eyeobserver.com/p/about-us.html'>About</a></li>
<li><a href='http://www.eyeobserver.com/p/contact.html'>Contact</a></li>

</ul>

 What we did here was to add the sub-menu, "Gadget of the Day" before closing the original list item with </li>. Replace the '#' in the example with the address of the page you want to point it to.

 6. Click "save template" and you're done!    

Conclusion

We hope you found this guide on how to create a drop down menu in Blogger helpful. We can't emphasize this enough but do remember to backup your current template before making any changes. If you have any questions, just drop us a note and we'll be happy to help! Also, check out our Blogger Resources page for more useful guides and templates related to the Blogger/Blogspot platform and blogging in general. 
Labels:

Comments

Post a Comment

Popular posts from this blog

How to View YouTube Shorts in the Regular YouTube Player

YouTube's "Shorts" is YouTube’s answer to TikTok and Instagram reels but let’s be honest, the YouTube Shorts player lacks some functionality, such as the ability to fast forward and go back in the video. However, you might be surprised to know that every video that loads in the "Shorts" player is actually a regular video, and by changing the URL slightly, you can load the same video in the regular player along with all the functionality of a traditional YouTube video. Changing the URL Changing the URL is the easiest way to switch the player from a technical standpoint. It’s so easy even your grandma can do it, as long as she knows how to type an address into the address bar of a browser.   Let’s use this super popular short video about AI taking over ping pong as an example. Look in the URL bar of a video playing in the "Shorts" player, where you should see the text Shorts/. Replace that text with watch?v= and load the new URL. So in this...
Post a Comment
Read more

Create QR Codes in Excel With VBA

Need to automate the creation of QR Codes? Excel and VBA can help with that! Here's how to do it in less than 15 lines of code. What we're looking to do is have a URL in a cell and then we're going to use a function that we create in VBA call Google APIs to create the code. Here's a video that explains the whole process of creating a user defined function in VBA that will create QR Codes: Code to create QR Codes in Excel with VBA Open up your Visual Basic editor and insert the following code and then save. To call the function, type =GETQRCODES(Cell Address) where Cell Address is the address of the cell which contains a URL that you want to send your user to. Function GETQRCODES(QRCode As String)     Dim URL As String     URL = "https://chart.googleapis.com/chart?chs=100x100&&cht=qr&chl=" & QRCode     ActiveSheet.Pictures.Insert(URL).Select     With Selection.ShapeRange(1)         .Name = "QR_CODE_" & QRCode...
Post a Comment
Read more

How To Change Bluetooth Name On Android

This post will take you step-by-step through the process of changing the Bluetooth name of your devices on an Android phone. There are pictures as references in case you get lost along the way. Change Bluetooth Name On Android | Step-by-step 1. Unlock your Android phone and go to Settings Unlock your phone and click on the Settings Icon It goes without saying, but the first thing you need to do is unlock your phone. By default, the settings icon will be on your home page like in the picture above. If you don't have the settings icon, you can search for 'Settings' in the Android search bar. 2. In the Settings page, click on Bluetooth Click on the Bluetooth settings to open up the Bluetooth Settings menu Click on the Bluetooth settings which should be at the top of your Settings page. If it doesn't, scroll down till you find it or just search for it in the search bar at the top of the Settings page. 3. Click On Device Name To Change Your Phone's Bluetooth Name Click o...
Post a Comment
Read more