Sunday, October 9, 2016
Horizontal Navigation Menu on Blogger
Horizontal Navigation Menu on Blogger
Who often visited my blog, of course youre 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, Lets 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:)
Available link for download
