Horizontal Navigation Menu on Blogger
Who often visited my blog, of course you're not strange with Horizontal Navigation Menu. Well, our tutor will try to make Navigation Menu that actually lend one of the widget from blogger standard. With a little touch on CSS, widget Linklist which at first most used as blogroll with verticalway that will be modified become Navigation Menu Horizontaly. Well guys, than I talks anything not clear, Let's go to the methode to make it.Okay:)
First, go to Edit HTML page, then copy-paste all of CSS code below, and put that code 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 Edit HTML page, that search code <div id='outer-wrapper'><div id='wrap2'> usually the position of this code is under HTML tag <body> then copy-paste all of the code below, and put that code under the green at the top.
<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>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a 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 = 'Cari artikel disini';}' onfocus='if (this.value ==
'Cari artikel disini') {this.value = '';}' type='text'
value='Cari artikel disini'/>
<input id='searchsubmit' type='hidden' value='Search'/>
<data:content/>
</div>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
Save and look the result, please. Oh My God, I almost forget. You can adapted the layout and the text body by yours. Okay:)
To add menu, please open more "Page Element " then look at the top there you can
look the new widget with the tittle "Top Tabs" Click edit and add what menu do
you want to showed. Good Luck:)
0 comments:
Post a Comment