20 April 2009

Horizontal Navigation Menu



First enter the Edit HTML, and copy-paste all the CSS code below ago placer above code ]]></ b: skin>


/ *-- (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 ul li a.current: hover (margin: 0 8px; background-color: # fff; color: # fff; padding: 5px 7px)

/ *-- (Search) --* /
# search (background: # f9f9f9 url (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 then search the code <div id='outer-wrapper'> <div id='wrap2'> code is usually located below the html tag <body> then copy-paste all the code below, and the code under place code green above.


<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<a <li> href='/'> Home </ a> </ li>
<b:loop values='data:links' var='link'>
<a <li> expr:href='data:link.target'> <data:link.name/> </ a> </ li>
</ b: loop>
</ ul>
</ div>
</ div>
</ b: includable>
</ b: widget>
<b:widget id='HTML3' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form expr:action='data:blog.homepageUrl + "search"' id='searchform' method='get' name='searchform'>
<b:if cond='data:title'/>
<div id='search'>
<input class = 's' id =' s' name = 'q' onblur = "if (this.value =='') (this.value = 'Search articles here';) 'onfocus =' if (this.value == 'Search articles here') (this.value ='';}' type = 'text' value = 'Search articles here' />
<input id='searchsubmit' type='hidden' value='Search'/>
<data:content/>
</ div>
</ form>
</ div>
</ b: includable>
</ b: widget>
</ b: section>
</ div>



Please save and see the results. oh .. almost forgot colleagues can adjust the background color and text own


To add the menu, please re-open "Page Elements" and note the top of the widget, there are visible widget with the new title "Top Tabs" please click edit and add the menu you want displayed.

No comments:

Post a Comment