Membuat Menu Horizontal Rounded Corner

 image Bagi pengguna browser mozilla, safari atau opera membuat menu horizontal dengan garis melengkung (rounded corner) memang tidak ada masalah. Namun hal ini tidak berlaku pada browser IE. Untuk mengatasinya, ada satu cara yang bisa diterapkan, yaitu dengan menambahkan gambar rounded corner dalam css menunya. Saya menggunakan template gris amarillos sebagai demo, bisa dilihat disini.

 

Langkah pertama yang harus sobat lakukan adalah membuat gambar rounded corner terlebih dahulu. Ada 4 gambar yang harus sobat buat, left tab, right tab, left tab hover, right tab hover.

 

left-tab p1  left tab
right-tab  p1  right tab
left-tab hover  p1  left tab hover
right-tab hover p1  right tab hover

 

Kemudian upload gambar-gambar tersebut ke tempat penyimpanan online. setelah itu baru kita lanjutkan pada pemasangan kode css untuk menu horizontalnya.

 

  1. Masuk ke Tata Letak.
  2. Klik tab Edit HTML.
  3. Tambahkan kode berikut ini sebelum kode ]]></b:skin>

    #nav {
    width: 980px;
    height:34px;
    position: relative;
    float:center;
    margin:0px;
    padding:0px;
    }

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

    #nav a {
    color:#222;
    background:#dba72d url(http://lh5.ggpht.com/_7Y9pl24WpQY/S92v2xGQZ6I/AAAAAAAADqs/ajeGLWXobuE/left-tab_thumb%5B4%5D.png) left top no-repeat;
    text-decoration:none;
    padding:7px 0 6px 12px;
    }

    #nav a span {
    background:#dba72d url(http://lh3.ggpht.com/_7Y9pl24WpQY/S92v4-cWJvI/AAAAAAAADq0/F3FEArdJEg8/right-tab_thumb%5B2%5D.png) right top no-repeat;
    padding:7px 12px 6px 0; 
    }

    #navigation a, #navigation a span {
    display:block;
    float:left;
    }

    #nav a:hover {
    color:#222; 
    background:#2d61db url(http://lh3.ggpht.com/_7Y9pl24WpQY/S-WkCZSIonI/AAAAAAAADtg/yyvKetEpy4w/left-tab%20hover_thumb%5B3%5D.png) left top no-repeat;
    padding-left:12px;
    }

    #nav a:hover span {
    background:#2d61db url(http://lh3.ggpht.com/_7Y9pl24WpQY/S-WkE2Ya06I/AAAAAAAADto/JbhOEh9o7ak/right-tab%20hover_thumb%5B1%5D.png) right top no-repeat;
    padding-right:12px;
    }

    #nav ul {
    list-style:none;
    padding:0;
    margin:0;
    }

    #nav li {
    float:left;
    margin:0;
    }

  4. Cari kode HTML bagian Header blog :

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

     

  5. Kemudian tambahkan kode berikut ini dibawahnya :

    <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='/'><span>Home</span></a></li>
    <b:loop values='data:links' var='link'>
    <li><a expr:href='data:link.target'><span><data:link.name/></span></a></li> </b:loop>
    </ul>
    </div>  
    </div>
    </b:includable>
    </b:widget>
    </b:section>   
    </div>

  6. Simpan Template.

 

Keterangan :

  • Kode yang berwarna biru adalah url tempat sobat menyimpan gambarnya, sekarang coba blok url tersebut satu persatu dan lihat gambarnya pada browser.
  • Yang berwarna merah adalah kode dari warna, sesuaikan dengan gambar yang dibuat.
  • Kode yang berwarna hijau adalah lebar menu horizontal, sesuaikan dengan lebar template.

 

Selamat mencoba semoga berhasil.

Berlangganan artikel terbaru via Email
Artikel Lainnya :

9 comments

9 Mei 2010 03.16

Pertamaaaxxx...:P huehuehue...:D

12 Mei 2010 22.29

Dah lama ni tdk berkunjung boz.... tambah mantap saja blog nya.... bisa di coba tutorialnya...good blog and good post.

10 Juli 2010 05.21

kok..
ini g bs d blog aq..
np ya..???

31 Januari 2011 19.48

Kalo pakai gambar gini, makin berat gak om?

Terima Kasih ilmunya

14 Maret 2011 20.21

makasih ilmunya om
bisa minta linkback nya
http://rizalpauzi.blogspot.com

4 April 2011 00.06

mantaps infonya,trims gan

13 April 2011 02.23

mau tanya dong...
bisa gak template bawaan blogspotnya diganti dengan template full flash.
bagaimana sih caranya....
TQ...
Salam...

1 Februari 2013 19.16

blogwalking gan :)

Poskan Komentar

Reader Community

Recent Comments