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 Turn Bluetooth On Windows 11

  Need to connect your Bluetooth device to a Windows 11 computer? You need to turn on Bluetooth on Windows 11 first. Here are all the ways to do so in Windows 11, including the Bluetooth Network Connections and Device Manager. 1. Quick Settings Menu Quick Settings menu usually found on the bottom right of the Windows Taskbar The easiest way to turn on Bluetooth on Windows 11 is to use the Quick Settings menu. The Quick Settings menu is the group of indicators that can be found on the bottom right of the screen, next to your date and time on the taskbar. Expanded Windows 11 Quick Settings menu that shows if Bluetooth is enabled Check whether the Bluetooth icon is colored. If it is, then Bluetooth is already turned on. If it is grey, click the Bluetooth icon to turn it on. Once you have clicked the Bluetooth icon, it will be colored, to indicate that Bluetooth has been enabled on Windows 11. By default, Bluetooth should already be listed in the Quick Settings list. If you...
Post a Comment
Read more