How to Easily Add a Drop Down Menu to Your Blog

As I've gotten more serious about blogging and creating a user-friendly site, I've started following several women who have made it their full-time job to blog about blogging. I really like posts and tips about customizing your blog, but most of these posts and tips are for those who use WordPress or Squarepace. This has brought me to the conclusion that I'm one of the few bloggers who still use Blogger platform.


Blog tutorial: How to add a drop down menu to your blog | arelaxedgal.com

I figure there have to be other bloggers out there who also still work on the Blogger platform and want to customize their blog by adding more design and functionally. So as I learn more about customization on the Blogger platform I'll share with you what I've learned.

In this post I'll be sharing how to add a drop down menu to Blogger. I am in no way an HTML expert nor do I really understand HTML. Creating a drop down menu was one of the first customizations I made because the default menu in blogger didn't allow for me to organize my menu by using a drop down.


Step 1: Back up your blog

Before you do any customization or edit the HTML for your blog you want to make sure you have a backup in case you make a mistake you can't fix. You can back up your blog by
  • Go to Template
  • Click the Back/Restore button in the top right
  • Select Download Full Template

Step 2: Open Notes or Notepad

This is where you will create the code for the drop down menu. I've found it's easier to create code outside of the Blogger platform and then copy and paste it. Notes or Notepad is better than Word for creating code because it doesn't add any formatting to the text allowing for a clean cut and paste.


Step 3: Copy and paste this code into Notes or Notepad


<!-- start navmenu -->
<ul id='cssnav'>
<center>
<div id='NavMenu'>
<div id='NavMenuleft'>
<ul id='nav'>
<li><a href='#'>MAIN MENU 1</a></li>
<li><a href='#'>MAIN MENU 2</a>
<ul>
<li><a href='#'>SUB-MENU 1</a></li>
<li><a href='#'>SUB-MENU 2</a></li>
<li><a href='#'>SUB-MENU 3</a></li>
<li><a href='#'>SUB-MENU 4</a></li>
</ul>
</li>
<li><a href='#'>MAIN MENU 3</a></li>
</ul></div>
</div> 
<!-- end navmenu --></center></ul>

Step 4: Start entering your page information

  • Replace the #s with the page URLs your want to link to
  • Replace the words MAIN MENU AND SUB-MENU with the names/words you want to show up in the drop down menu
  • To create multiple menus just cut and paste the code below and place it before or after </li> codes

<li><a href='#'>MAIN MENU 2</a>
<ul>
<li><a href='#'>SUB-MENU 1</a></li>
<li><a href='#'>SUB-MENU 2</a></li>
<li><a href='#'>SUB-MENU 3</a></li>
<li><a href='#'>SUB-MENU 4</a></li>
</ul>
</li>

Blog tutorial: How to add a drop down menu to your blog | arelaxedgal.com

Step 5: Place the code in your template

  • Go to Layout
  • Select Add a Gadget to add a widget to your blog
  • You'll want to add the HTML/Javascript widget
  • Copy and paste the code your edited in Notes or Notepad into the widget
  • Click Save

Step 6: Add style to the menu

  • Go to Template
  • Click Customize under the Live on Blog image
  • Select Advanced and scroll down to click on Add CSS
  • Copy and past the following code then change the sections in blue font with the colors an font styles you want for your menu

/* ----- CSS Nav Menu Styling ----- */

#cssnav {

border: 0px;

margin: 0px;

padding: 0px;

width: auto;

font: normal normal 13px Helvetica; /* Template Designer - Change Font Type, Size, Etc */

color: #ffffff; /* Template Designer - Change Font Size */

}

#cssnav ul {

background: #c4c4c4 repeat-x scroll 0 -800px;

_background-image: none; /* Template Designer - Change Menu Background */

height: 40px; /* Change Height of Menu */

list-style: none;

margin: 0px;

padding: 0px;

}

#cssnav li {

float: none; /* none = centre */

display: inline-block;

padding: 0px;

}

#cssnav li a {

background: #c4c4c4 repeat-x scroll 0 -800px;

_background-image: none; /* Template Designer - Change Menu Background */

display: block;

margin: 0px;

text-align: center;

font: normal normal 13px Helvetica; /* Template Designer - Change Font Type, Size, Etc */

text-decoration: none;

}

#cssnav > ul > li > a {

color: #ffffff; /* Template Designer - Change Font Color */

}

#cssnav ul ul a {

color: #ffffff; /* Template Designer - Change Color */

}

#cssnav li > a:hover, #cssnav ul li:hover {

color: #000000; /* Template Designer - Change Font Color on Hover */

background-color: #ffffff; /* Template Designer - Change Font Background on Hover */

text-decoration: none;

}

#cssnav li ul {

background: #000000 repeat-x scroll 0 -800px;

_background-image: none; /* Template Designer - Change Menu Background */

display: none;

height: auto;

padding: 0px;

margin: 0px;

border: 0px;

position: absolute;

width: 200px; /* Change Width Of DropDown Menu */

z-index:9999;

}

#cssnav li:hover ul {

display: block;

}

#cssnav li li {

background: #000000 repeat-x scroll 0 -800px;

_background-image: none; /* Template Designer - Change Background */

display: block;

float: none;

margin: 0px;

padding: 0px;

width: 200px; /* Change Width Of DropDown Menu */

}

#cssnav li:hover li a {

background: #cccccc; /* Template Designer - Change Background of Link on Hover */

}

#cssnav li ul a {

display: block;

height: auto;

margin: 0px;

padding: 10px;

text-align: left;

}

#cssnav li ul a:hover, #cssnav li ul li:hover > a {

color: #000000; /* Template Designer - Change Text Color on Hover */

background-color: #ffffff; /* Template Designer - Change Background on Hover */

border: 0px;

text-decoration: none;

}

--></style>

<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' 

type='text/javascript'></script>

<script type='text/javascript'>//<![CDATA[

/**

Share:

0 comments:

Post a Comment

© 2014-2017 A Relaxed Gal. All Rights Reserved. All posts are written by Leah unless stated otherwise. All of the content on this site is for informational purposes only. I am not a hair care, blogging, beauty or financial advisor or life professional. All opinions are from my own personal experience and are not to be viewed as professional or legal advice. None of this content is meant to be used or taken a substitute for any professional advice. Information provided is accurate and true to the best of Leah's knowledge. There may be human error, omissions, and mistakes in the information provided.

See Disclosure and Privacy Policy.





Instagram: @arelaxedgal