Membuat Navigasi Horizontal 2 Baris Blog

Edit blog lagi, edit blog lagi gak ada habis-habisnya! Ok, pada artikel kali Blog Sahabat akan kembali menulis cara membuat navigasi di blogspot yang sebelumnya ane juga udah nulis cara membuat navigasi next page. Sekarang ane ingin sedikit share buat sobat blogger yang ingin membuat navigasi horizontal 2 baris. Contoh dari navigasi 2 baris "you can look at the bellow."

Navigasi kayak gini sangat cocok dengan blog sobat yang mempunyai banyak link, mau itu link internal ataupun eksternal. Bagi sobat yang ingin mencoba navigasi ini di blog sobat, barikut aturan penerapannya. wakaak!!

1. login ke blogger akun blog sobat.

2. Silahkan sobat masuk ke Rancangan -> Edit Tata Letak.

3. Ane sarani untuk download full template (backup template) sobat terlebih dahulu.

4. Temukan kode ]]></b:skin>, bila udah ketemu copy dan pastekan kode berikut tepat sebelum ]]></b:skin>.

/*-- Nav --*/

#nav {
width:980px;
float:left;
background:#444;
height:33px;
border-bottom:1px solid #fff;
padding:0;
}

#nav-left {
float:left;
display:inline;
width:700px;
}

#nav-right {
float:right;
display:inline;
width:200px;
}

#nav ul {
position:relative;
overflow:hidden;
font:1em verdana,Helvetica,sans-serif;
font-weight:700;
font-size:13px;
margin:0;
padding:0;
}

#nav ul li a,#nav ul li a:visited {
display:block;
color:#f9f9f9;
text-decoration:none;
margin:0;
padding:9px 10px;
}

#nav ul li a:hover {
color:#B40404;
background-color:#fff;
margin:0;
padding:9px 10px;
}

#search {
background:#f9f9f9 url(http://lh3.ggpht.com/_7Y9pl24WpQY/SttgbS-ClLI/AAAAAAAAB78/PFI3z4AHOyw/search_thumb%5B1%5D.gif) 6px 0 no-repeat;
border:1px solid #b3b3b3;
float:right;
height:20px;
width:160px;
margin-top:5px;
margin-right:5px;
padding-top:2px;
}

* html #search {
margin-right:5px;
}

#search input {
font-family:Arial,Helvetica,sans-serif;
background:transparent;
border:0;
color:#000;
float:left;
font-size:12px;
width:120px;
padding-left:27px;
margin:0;
}

/*-- Nav2 --*/

#nav2 {
float:left;
display:inline;
width:980px;
background:#46040C;
height:30px;
clear:both;
margin:0 auto;
padding:0;
}

#nav2 ul {
position:relative;
overflow:hidden;
font:1em Verdana,Arial,Helvetica,sans-serif;
font-weight:500;
margin:0;
padding:0;
}

#nav2 ul li a,#nav2 ul li a:visited {
display:block;
color:#fff;
text-decoration:none;
margin:0;
padding:8px 10px;
}

#nav2 ul li a:hover {
color:maroon;
background-color:#fff;
margin:0;
padding:8px 10px;
}

#nav ul li,#nav2 ul li {
float:left;
list-style:none;
}

5. Kemudian cari kode yang mirip seperti dibawah ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='uji coba (Header)' type='Header'/>
</b:section>
</div>

6. Letakkan kode berikut tepat setelah kode diatas :

<div id='nav'>   
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList10' 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='HTML70' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search/' id='searchform' method='get' style='display:inline;'>
<div id='search'>
<input id='search' maxlength='150' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' type='text' value='Search...'/>
<data:content/>
</div>
</form>
</div>
</b:includable>
</b:widget>
</b:section>  
</div>

<div id='nav2'>
<b:section class='top-tabs' id='top-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList11' locked='true' title='link Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav2'>  
<ul>
<li><ahref='http://http://raulalfithrahnazs.blogspot.com/'>blogger News</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:section>  
</div>

Ganti tulisan yang berwarna merah dengan link yang sobat ingin tampilkan, karena link ini akan muncul secara automatis ketika link pertama pada baris ke-2 sobat isi.

Simpan Template.

Keterangan :

width:980px  ---> lebar dari navigasi, sesuaikan dengan lebar template sobat.

width:700px ---> lebar dari navigasi utama (tidak termasuk widget search engine).

Contoh : jika sobat mempunyai template dengan lebar 900px, maka ganti angka 980px menjadi 900px dan ganti angka 700px menjadi 620px.

Tulisan uji coba (Header) adalah judul blog, sesuaikan dengan judul blog sobat, sehingga ketika melakukan pencarian tidak bingung karena setiap blog mempunyai judul yang berbeda toh, jadi jangan di telan mentah-mentah kode :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='uji coba (Header)' type='Header'/>
</b:section>
</div>

Sekian dulu tips blog dari ane semoga bermamfaat. Selamat mencoba!