Membuat Navigasi Horizontal 2 Baris

Sebelumnya saya sudah pernah membahas cara membuat navigasi horizontal, sama halnya dengan yang dulu, namun kali ini saya menambahkan navigasinya menjadi 2 baris. Contohnya bisa sobat lihat pada gambar berikut, dimana saya menggunakan navigasi 2 baris dengan warna yang berbeda dan plus widget search engine sebagai bonus.

 

Widget ini cocok buat blog yang ingin menampilkan banyak link dibagian bawah header. Saya sudah mencobanya dibeberapa template standard dari blogger. Jika berminat, berikut cara memasangnya.

 

1. Login ke blogger.
2. Masuk ke Tata letak.
3. Klik Edit HTML.
4. Sebaiknya backup template sobat terlebih dahulu.
5. Letakkan kode berikut sebelum kode ]]></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;
   }

6. 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>

7. 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><a href='http://www.blog-zone.info'>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>

8. 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.

9. 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>

Semoga berhasil dan bermanfaat tentunya.

Oleh : Dody FariaL Pada hari Minggu, April 11, 2010

Tweet

Berlangganan artikel terbaru via Email

Artikel Lainnya :