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.

image

 

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.

Berlangganan artikel terbaru via Email
Artikel Lainnya :

18 comments

11 April 2010 02.05

Wahhh... keren nich...
Simpan dulu ahhh...
Makasih untuk tutorialnya kawand.

11 April 2010 07.49

mantab gan
ini saya mau tanya lagi hehehe
klo cara membuat quote yang warna ijo pake scroll
pake quote warna abu - abu kog bisa macem macem githu bagaimana caranya gan ?...

11 April 2010 14.48

@ tips dan trik windows xp : wrn quote sy sebenarnya standarnya yg wrn abu2 tuh, klo yg ijo sy buat sendiri pas postingnya

11 April 2010 16.00

klo bisa mas dody posting artikel cara memodifikasi quote karena saya search di google cuman ada 1 tuch itu juga kurang memuaskan pls

22 April 2010 10.29

mantaaab. ane kmaren juga blajar dari mas doyok. jadi bisa nav versi saya sendiri. hehehe

29 Juli 2010 17.22

gw dah cb tp koq kosong :( yg hrs d edit yg mn nih sob... biar ada home,link,domain,kode warna,bisnis online,free template cara nya gmn thx mohon d bantu y sob

29 Juli 2010 21.05

@nceguitar.blogspot.com : masuk ke Elemen Laman lalu cari link List letaknya dibwh header

6 Oktober 2010 12.10

Mau nanya mas..! cara membuat sidebar yang ada navigasinya,seperti punya mas sidebar yang paling atas gimana ya..?

6 Oktober 2010 12.40

@cipto : baca disini ya

28 Februari 2011 23.30

keren.. tapi aku bingung, 1 navigasi aja ga penuh2 apalagi 2 :D

1 Juni 2011 23.13

punya ku dah ada menunya. tnggal nambah satu baris lagi.. kok gak berhasil ya..

16 Juli 2011 14.26

bro makasi nih ilmunya.

19 Agustus 2011 04.56
19 Agustus 2011 05.04

admin cara buat halaman nya gmana,misal aku mau buat halaman profile yg menerang kan aku. Link nya mau aku pasang di menu tsb. Itu gmana mhon pncerahan.

30 Desember 2011 02.59

@Geafry Necolsen: mungkin bisa dicoba pada blog yang lain hehe

17 Juli 2012 14.56

salam kenal sob..gimana cara membuat kolom search di samping navigasi..seperti blog sobat..thanks

18 September 2012 08.13

Kerennnn...

Poskan Komentar

Reader Community

Recent Comments