Menu Horizontal dengan Tags Bookmark dan Search Box

Modifikasi Menu Navigasi Horizontal dengan Tags Bookmark dan Search Box disini saya maksudkan adalah menempatkan Tags yang berisi Label dalam menu navigasi pada template Blogger.

Berikut ini, langkah demi langkah bagaimana cara membuatnya :

1. Silahkan Login dan masuk pada Tata Letak kemudian Edit HTML.
2. Tambahkan kode dibawah ini, diatas kode ]]></b:skin>

( saya anggap template mempunyai kelebaran 965 px)

/* Menu Horizontal
---------------------------------------------*/
.menuhorisontal{background: #2b768c; width: 965px;height:30px;float:center;
overflow: hidden;border-bottom: 1px solid #ccc;margin-bottom:0px;
}
.menuhorisontal ul{
margin: 0; padding-left: 0px;
font: normal 11px Arial;color:#ffffff;
text-transform:none;
list-style-type: none;
}
.menuhorisontal li{
display: inline; margin: 0;
}
.menuhorisontal li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 10px;
border-right: 1px solid #e6e6e6;
color: #04fafd;}
.menuhorisontal li a:visited{
color: #04fafd;
}
.menuhorisontal li a:hover, .menuhorisontal li.selected a{background:none;color:#ffffff;
}

#search {
display:inline;
margin:10px 0 0;
overflow:hidden;}

#subsearch {
background:#ddfeff;
border:1px solid #666666;
color:#222222;
display:inline;
font-family:Arial,Tahoma,Verdana;
margin:0 3px 0 3px;
padding:2px 0 2px 5px;
width:200px;}

#subsubmit {
-moz-border-radius:5px;
-webkit-border-radius:5px;
background:#08519b;
border:1px solid #048688;
color:#ffffff;
font-family:Arial,Tahoma,Verdana;
font-size:11px;
font-weight:bold;
margin:0;
padding:3px 5px;
text-decoration:none;}

#subright {
overflow: hidden;
float: center;
margin:0;
padding:2px 0px 0px 20px;
widht:340px;
}

.clear {clear:both;}


3. Langkah selanjutnya adalah menambahkan kode berikut di atas kode <div id='content-wrapper'>

<div class='menuhorisontal'>

<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>My Blog</a></li>
<li><a href='#'>About Me</a></li>
<li><a href='#'>Contact Me</a></li>
<li><a href='#'>Template</a></li>

</ul>


<div style='float:right;padding-right:9px;padding-top:2px'>
<form action='http://blog anda.blogspot.com/search' id='search' method='get'>
<label class='hidden' for='s'>Search:</label>
<input id='subsearch' name='q' type='text' value=''/>
<input id='subsubmit' type='submit' value='Go'/>
</form>
</div>

<div id='subright'>
<b:section class='subright' id='subright' maxwidgets='1' showaddelement='yes'/>
</div>

</div>

Silahkan ganti tanda # dengan URL yang sesuai dengan judul masing-masing menu.

Penting !!! Agar Label bisa masuk pada bagian Subright, maka anda harus menambahkan Label dengan cara masuk ke Tata Letak kemudian ke Elemen Page klik TAMBAH GADGET > Label. Judul supaya dikosongkan, centang lingkaran Daftar pada Tampilkan. Kemudian saving, lalu centang Expand Template Widget, cari kode berikut :

<b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Ganti dengan kode dibawah ini :

<b:widget id='Label1' locked='true' title='' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if><p style='float:left; padding-right:10px;margin:0px;'>Tags:</p>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:if cond='data:display == &quot;list&quot;'>
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Select a bookmark</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)

</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


Demo bisa anda lihat di http://sharing-post.blogspot.com pada bagian TAGS pada menu horizontal