Membuat Menu Horizontal Rounded Corner

  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
	right tab
	left tab hover
	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.

Oleh : Dody FariaL Pada hari Senin, Mei 17, 2010

Tweet

Berlangganan artikel terbaru via Email

Artikel Lainnya :