Thursday, November 14, 2013

How to add a drop down menu in blogger

Hello here is a tutorial on how to make a custom drop down menu in blogger!


 or 



1. Back up your template.
Before we do anything, you need to back up your template. Since we’re editing code it’s really important that you back it up beforehand in case you make any mistakes and need to revert them. 
Go to template ---> backup/restore, ---> download full template.


2. Add css coding 
Once you have your template backed up, (you should still be on the template tab I circled in the image above) click on the button to “Edit HTML”. Make sure you are scrolled all the way up and look for the bit of code near the top that looks like this:<b:skin>…</b:skin> 
Click on the black arrow next to  text that says <b:skin>…</b:skin> to expand it. Make sure you scroll down until you see the next black arrow, all the way down until you find the</b:skin> tag again. 

Make a new line BEFORE the </b:skin> line. This is where we’re going to put our first bit of code, just stop before the pink line. SAVE. If you would like to change colors like I did, please copy and paste the below code into word pad or any word document application before pasting it into your css and refer to step 3.

#cssmenu {
  border: none;
  border: 0px;
  margin: 0px;
  padding: 0px;
  font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  width: auto;
}
#cssmenu ul {
  background: #333333;
  height: 35px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#cssmenu li {
  float: left;
  padding: 0px;
}
#cssmenu li a {
  background: #333333 url('seperator.png') bottom right no-repeat;
  display: block;
  font-weight: normal;
  line-height: 35px;
  margin: 0px;
  padding: 0px 25px;
  text-align: center;
  text-decoration: none;
}
#cssmenu > ul > li > a {
  color: #cccccc;
}
#cssmenu ul ul a {
  color: #cccccc;
}
#cssmenu li > a:hover,
#cssmenu ul li:hover > a {
  background: #777777 url('hover.png') bottom center no-repeat;
  color: #FFFFFF;
  text-decoration: none;
}
#cssmenu li ul {
  background: #333333;
  display: none;
  height: auto;
  padding: 0px;
  margin: 0px;
  border: 0px;
  position: absolute;
  width: 225px;
  z-index: 200;
  /*top:1em;
/*left:0;*/
}
#cssmenu li:hover ul {
  display: block;
}
#cssmenu li li {
  background: url('sub_sep.png') bottom left no-repeat;
  display: block;
  float: none;
  margin: 0px;
  padding: 0px;
  width: 225px;
}
#cssmenu li:hover li a {
  background: none;
}
#cssmenu li ul a {
  display: block;
  height: 35px;
  font-size: 12px;
  font-style: normal;
  margin: 0px;
  padding: 0px 10px 0px 15px;
  text-align: left;
}
#cssmenu li ul a:hover,
#cssmenu li ul li:hover > a {
  background: #777777 url('hover_sub.png') center left no-repeat;
  border: 0px;
  color: #FFFFFF;
  text-decoration: none;
}
#cssmenu p {
  clear: left;
_________________________________________________________________________________
3. Colors
If you want to change your menu colors, copy and paste the code above into a word pad or word document (i use my google drive word application) refer to the codes & color chart link below :)
Change ALL the default color codes you see in the html below (I color coded them to make it easier for you to change them) with new ones from here: COLOR CHART LINK HERE

Default menu colors
MENU BACKGROUND:  #333333        (dark grey)
MENU HOVER:              #7777777      (medium grey)
MAIN TEXT:                 #cccccc        (light grey)
HOVER TEXT:               #FFFFFF      (white)

Copy and paste the cc from the word into your css  BEFORE the </b:skin> line. Save. If you think you messed up, you can just restore your template.

_________________________________________________________________________________

4.HTML Coding

In the next step we will be adding html to your site. Go to Layout--->add a gadget--->HTML/ Java script. Take the code below the pink line, copy and paste it into the new window that will pop up. What made it easier for me, was to expand the window so each code <.....> stays on the same line. Change it to your links and titles.As you can see in my follow me line I have #,meaning that the link will not b clickable. If you would like to add more selections just make sure that you have this code before the last item.  <li class='last'> (I will explain more in the video). Save.
menu name
menu destination link
dropdown menu name
dropdown menu link/ destination


_________________________________________________________________________________

<div id='cssmenu'>
<ul>
   <li><a href='http://biggereyesmedia.blogspot.com/'><span>home</span></a></li>
   <li class='has-sub'><a href='#'><span>follow me :)</span></a>
      <ul>
         <li><a href='google.com/+mariyamokshina'><span>google+</span></a></li>
         <li><a href='http://www.youtube.com/biggereyes1'><span>youtube</span></a></li>
         <li><a href='http://www.bloglovin.com/blog/11180785/'><span>bloglovin'</span></a></li>
         <li><a href='https://twitter.com/mariyamokshina'><span>twitter</span></a></li>
         <li class='last'><a href='http://instagram.com/heartcam'><span>instagram</span></a></li>
      </ul>
   </li>
   <li><a href='http://biggereyesmedia.blogspot.com/p/resume.html'><span>resume</span></a></li>
   <li class='last'><a href='http://biggereyesmedia.blogspot.com/p/about-contact-me.html'><span>about me</span></a></li>
</ul>
</div>

_________________________________________________________________________________

5. Place you new menu and remove old one.
Go to your layout  and  drag your very top gadget underneath your your header.  Click edit on your old menu and remove it. Click "save arrangement"



p.s. If you like the combo of colors on my page copy and paste this into your css instead.

#cssmenu {
  border: none;
  border: 0px;
  margin: 0px;
  padding: 0px;
  font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: bold;
  width: auto;
}
#cssmenu ul {
  background: #ffbdc6;
  height: 35px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#cssmenu li {
  float: left;
  padding: 0px;
}
#cssmenu li a {
  background: #ffbdc6 url('seperator.png') bottom right no-repeat;
  display: block;
  font-weight: normal;
  line-height: 35px;
  margin: 0px;
  padding: 0px 25px;
  text-align: center;
  text-decoration: none;
}
#cssmenu > ul > li > a {
  color: #FFFFFF;
}
#cssmenu ul ul a {
  color: #cccccc;
}
#cssmenu li > a:hover,
#cssmenu ul li:hover > a {
  background: #cccccc url('hover.png') bottom center no-repeat;
  color: #FFFFFF;
  text-decoration: none;
}
#cssmenu li ul {
  background: #555555;
  display: none;
  height: auto;
  padding: 0px;
  margin: 0px;
  border: 0px;
  position: absolute;
  width: 225px;
  z-index: 200;
  /*top:1em;
/*left:0;*/

}
#cssmenu li:hover ul {
  display: block;
}
#cssmenu li li {
  background: url('sub_sep.png') bottom left no-repeat;
  display: block;
  float: none;
  margin: 0px;
  padding: 0px;
  width: 225px;
}
#cssmenu li:hover li a {
  background: none;
}
#cssmenu li ul a {
  display: block;
  height: 35px;
  font-size: 12px;
  font-style: normal;
  margin: 0px;
  padding: 0px 10px 0px 15px;
  text-align: left;
}
#cssmenu li ul a:hover,
#cssmenu li ul li:hover > a {
  background: #cccccc url('hover_sub.png') center left no-repeat;
  border: 0px;
  color: #FFFFFF;
  text-decoration: none;
}
#cssmenu p {
  clear: left;
}

_________________________________________________________________________________

I hope this helps! xoxox

11 comments:

  1. Dear Miss Biggereye
    How can I add Sub Menu in DropDown Menu?
    Regard,
    Vichet

    ReplyDelete
  2. Great instructions, thank you for taking the time to do this tutorial in clear step by step instructions. Sadly I'm so crap at this it only half worked, I am going to try again and again..... :-)

    ReplyDelete
  3. it isn't working for me..plz help
    holistic-hs.blogspot.com
    is see the dropdown but no menu

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. It's long tim but anyway ! If this can hhelp someone els :)

      you have to dele some line
      the code between <*b:skin>...<*/b:skin> (I had * becaus it desapear here...) there is
      /* Tabs
      ----------------------------------------------- */
      You have to deled all of this to before
      /* Headings
      ----------------------------------------------- */
      (or othe title ) keep this last one deleted only linec concerne d by /* Tabs
      ----------------------------------------------- */

      Save and refrech

      its done !

      Delete
  4. i can add dropdowns but and i can link them to other external links. but how to link to my page or post in my blog.

    ReplyDelete
  5. This has help me lots.. Thank you soooo much I love it.. @ http://www.morethanbeautyneeds.com/

    ReplyDelete
  6. Hello It's good Thank you ! But I would like tou center menu ... how can I do ???
    I fond "float" its left I can make right but no center ...
    Help me please
    My blog https://maggy-waggy.blogspot.fr/

    ReplyDelete
    Replies
    1. ho and I would like to put font police "coming soon' it don't work ... and i don't anderstand why ther is several font police in your code ? where i can put "coming soon"

      um and sorry for my bad english...

      Delete
  7. Thanks a lot .... it's perfectly working for me....

    ReplyDelete