Making Guide + Horizontal Navigation Menu Search Box

/ * - (Nav & Search Box) - * /
# nav {
background : # 1c426d; / * Warna backgroud Kotak Navigasi * /
height: 31px; / * Tinggi Kotak Navigasi 
0px 0px 0px; } # nav ul { position: relative; overflow: hidden; padding-left: 5px; padding-top: 1px; margin: 0; font: 1.1em / * Font tab Ukuran navigasi * / Arial, Helvetica , sans -serif; font-weight: bold; } # nav ul li {float: left; list-style: none } # nav ul li a, # nav ul li a: visited { display: block; color: # ffffff; / * Warna teks pada Kotak navigasi * / margin: 0 8px; padding: 5px 7px } # nav ul li a: hover { color: # ffffff; background -color: # C4C5B8; / * Kotak ketika Warna Text cursor melintasi navigasi * / margin: 0 8px; padding: 5px 7px } # nav ul li a.current, # nav ul li a.current: visited, # nav ul li a.current: hover {margin: 0 8px;background -color: # A6A994; color: # ffffff; padding: 5px 7px} # searchform { margin: 0; padding: 0; overflow: hidden; display: inline; } # searchbox { background : # EEE url (http://lh3.ggpht.com/_15FopxVONSo/THEhOlDrX4I / AAAAAAAAD28/5oYAsTcO0G8/search-icon.gif) no-repeat top left;width: 180px; height: 16px; color: # 202020; font-size: 12px; font-family: Verdana, Arial, Helvetica , sans-serif; font-weight: normal;margin: 2px 0px 0px 15px; padding: 4px 0px 3px 25px; border-top: 1px solid # DDD; border-right: 1px solid # 666; border-left: 1px solid # DDD; border-bottom : 1px solid # 666; display: inline; }# searchbutton { background : # 1c426d; / * Warna backgroundtombol pencari * / color: # FFF; / * Text tombol Warna pencari * / font-size: 11px; font-family: Verdana, Arial, Helvetica , sans-serif;margin: 0px; padding: 2px 3px 0px 3px; font-weight: bold;border-top: 1px solid # DDD; border-right: 1px solid # 666;border-left: 1px solid # DDD; border-bottom: 1px solid # 666; }

Description:
Post-colored red on a description of each code. Please change according to your template. If you want to change the background image with the navigation menu, then add the code url (the address of your image) behind the code "colorbackground navigational boxes ". For example: background : # 1c426d url (http://url-gambar) ; 4. After that look for the code as shown below

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Herman Blog (Header)' type='Header'/>
</b:section>
<div style='clear: both'/>
</div>

Find the code in your template that most closely with the above code 5. If you have found, place the following code below.

<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='HTML30' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='250' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;cari artikel disini...&quot;;}' onfocus='if (this.value == &quot;cari artikel disini...&quot;) {this.value = &quot;&quot;}' type='text' value='cari artikel disini...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

6. So that the order will be like this:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Herman Blog (Header)' type='Header'/>
</b:section>
<div style='clear: both'/>
</div>

<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='HTML30' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='250' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;cari artikel disini...&quot;;}' onfocus='if (this.value == &quot;cari artikel disini...&quot;) {this.value = &quot;&quot;}' type='text' value='cari artikel disini...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

7. If so, Save Template and see the results. If you do not want to use the search box to stay clear code in bold. Beres .. To add a link in the navigation menu. Open the menu Page Element and click Edit on the "Top Tabs". Add a link which you want to display there. Ok. Good luck. Hopefully useful.