Make Horizontal Navigation Menu

tutorial this time we try to make the menu navigation that actually borrow one widget from the default standard blogger. With a little touch on the CSS, widget Linklist which many used as a more vertical we will be modifications in horizontal menu navigation. Yes you are, on the morning of cuap2's direct way of making it to yes:)
The first entry Edit HTML page, and then copi-paste all the CSS code below and above, place the code ]]>

/ *-- (Menu / Nav) --* /
# nav (background: # 222; height: 32px; padding: 4px 0 0; margin-bottom: 0px)
# nav-left (float: left; display: inline; width: 600px)
# nav-right (float: right; display: inline; width: 100px)
# nav ul (position: relative; overflow: hidden; padding-left: 0px; margin: 0; font: 1.0em Arial, Helvetica, Sans-serif)
# nav ul li (float: left; list-style: none)
# nav ul li a, # nav ul li a: visited (display: block; color: # fff; margin: 0 5px; padding: 5px 4px; text-decoration: none)
# nav ul li a: hover (color: # 800000; background-color: # fff; margin: 0 5px; padding: 5px 4px)
# nav ul li a.current, # nav ul li a.current: visited, # nav a.current ul li: hover (margin: 0 8px; background-color: # fff; color: # fff; padding: 5px 7px)

/ *-- (Search) --* /
# search (background: url # f9f9f9 (http://oom.blog.googlepages.com/search.gif) 6px 2px no-Repeat;-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px; border: 1px solid # b3b3b3; float: right; height: 25px; margin: 0 0px 0 0; width: 180px)
* Html # search (margin-right: 8px)
# search input (font-family: Verdana, Arial, Helvetica, Sans-serif; background: transparent; border: 0; color: # 555; float: left; font-size: 12px; margin: 5px 0 0; padding: 0px 2px 2px 27px; width: 140px)

Still on the Edit HTML page and search code

code is usually located under the html tags then copi-paste all the code below, and place the code below code over the green.

• Home
  
  
• 
  
  
  
  
  
  
  
  
  
  
  

  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
  
  Please saved and see the results. I almost forgot .. colleagues can adjust the color and background textnya own yes:)
  
  
  
  To add the menu, please re-open the "Page Elements" and then note the widget on top, there is already visible witget with the new title "Top tabs" please click on the Edit menu and add that you want to be shown. Somewhere:)
  
  
  

Subscribe to: Post Comments (Atom)