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.

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.

Menu Navigasi Horizontal

Sebelum ini pernah saya bahas tentang tutorial horizontal menu dropdown, kurang lebih sama dengan menu navigasi horizontal. Hanya saja dalam menu navigasi ini, sobat tidak perlu lagi masuk ke kode HTML template jika ingin menambahkan link baru. Namun kekurangan menu navigasi horizontal ini adalah tidak bisanya menambah link baru kebawah (vertikal) atau sub menu seperti pada horizontal menu dropdown.

 

 

langsung saja pada pembuatannya ya. Sip, sekarang silahkan sobat Login ke blogger dulu, kemudian tuju Elemen Halaman, lalu klik button Edit HTML, klik Expand Template Widgets.

 

Letakkan kode css berikut ini diatas kode ]]></b:skin>

/*-- (Menu/Nav) --*/
#nav{background:#000; height:30px; padding:5px 0 0; margin-bottom:0px; -moz-border-radius-bottomright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-topleft:5px}
#nav-left{float:left; display:inline; width:700px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:13pt comic sans ms,arial,sans-serif}
#nav ul li{float:left; list-style:none}
#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px; padding:5px 4px; text-decoration:none}
#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px; padding:5px 4px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px 7px}

 

Kamudian letakkan kode berikut ini tepat dibawah kode <div id='outer-wrapper'><div id='wrap2'> kode ini biasanya letaknya dibawah <body>

<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='/'>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:section>
</div>

Jangan lupa Simpan Template. Coba lihat hasilnya !

 

 

Keterangan :

1. -moz-border-radius-bottomright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-topleft:5px
   
   
   adalah garis melengkung pada ujung kotak navigasi, semakin besar angkanya maka akan semakin besar garis lengkungnya. Jika ingin membuat kotak lancip, silahkan hapus saja semua kode tersebut.

    

2. height:30px adalah tinggi kotak navigasi.

    

3. Background:#000 adalah warna kotak navigasi, untuk merubah dengan warna lain silahkan klik disini. Dan jika ingin mengganti warna dengan gambar yang sobat punya, ubah kodenya sehingga menjadi seperti berikut :
   
   

   #nav{background:#000 url('http://lh6.ggpht.com/_7Y9pl24WpQY/StGMv1nlCvI/AAAAAAAAB4U/RmIZGEvqvHA/gradient.php_thumb%5B2%5D.jpg?imgmax=800') repeat-x; height:30px; padding:5px 0 0; margin-bottom:0px; -moz-border-radius-bottomright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-topleft:5px}���������������������.��������������������������������������������������������������������������������.. dst..

   alamat gambar diatas hanya contoh yang saya punya, jika ingin melihat gambarnya silahkan sobat block url gambar diatas kemudian masukkan ke address pada browser sobat dan enter, jreeng keliatan kan gambarnya. Silahkan jika ingin menggunakan gambar diatas atau jika punya gambar sendiri, monggo !

Jika berhasil maka menu navigasinya terletak di bagian paling atas header. Jika ingin meletakkan menu navigasi dibawah header maka yang harus sobat lakukan adalah merubah letak posisi <div id='outer-wrapper'><div id='wrap2'>, cut dan paste setelah kode header atau jika bingung maka letakkan saja tepat diatas kode

 

<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

 

Maka hasilnya akan seperti yang ada di blog ini, cuih om dody pamer nih..

Selamat mencoba ya..have a nice day !

Cara Membuat Horizontal Menu Dropdown

Lagi-lagi tulisan lama saya angkat kedalam blog saya, sebenarnya saya agak malas menulis postingan ini, karena cukup panjang kode HTML-nya,  tapi berhubung ada beberapa pertanyaan dari sobat blogger di kolom shoutbox, yang menanyakan tentang cara membuat menu horizontal seperti yang ada di blog saya, makanya sekalian saja saya tuliskan tentang horizontal menu dropdown buat sobat blogger.

Menu ini cukup panjang dan berhubungan dengan template, jadi saya sarankan untuk membackup template sobat terlebih dahulu sebelum mencoba tutorial ini. Sepertinya saya terlalu panjang lebar ya, baiklah langsung saja kita menuju TKP.

1. Login ke Blogger.
2. Klik Tata Letak.
3. Klik Edit HTML.
4. Backup template sobat terlebih dahulu, silahkan klik Download Template Lengkap.
5. Contreng Expand Widget Template.
6. Cari kode </b:skin> dan letakkan kode berikut sebelum kode </b:skin>
   
   
   .jqueryslidemenu{
   font: bold 12px Trebuchet MS; background: #414141; width: 100%;}
   
   .jqueryslidemenu ul{
   margin: 0; padding: 0; list-style-type: none;}
   
   /*Top level list items*/
   .jqueryslidemenu ul li{
   position: relative; display: inline; float: left;}
   
   /*Top level menu link items style*/
   .jqueryslidemenu ul li a{
   display: block;
   background: #414141; /*background of tabs (default state)*/
   color: white;
   padding: 8px 10px;
   border-right: 1px solid #778;
   color: #2d2b2b;
   text-decoration: none;}
   
   * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
   display: inline-block;}
   
   .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
   color: white;}
   
   .jqueryslidemenu ul li a:hover{
   background: black; /*tab link background during hover state*/
   color: white;}
   
   /*1st sub level menu*/
   .jqueryslidemenu ul li ul{
   position: absolute;
   left: 0; display: block; visibility: hidden;}
   
   /*Sub level menu list items (undo style from Top level List Items)*/
   .jqueryslidemenu ul li ul li{
   display: list-item; float: none;}
   
   /*All subsequent sub menu levels vertical offset after 1st level sub menu */
   .jqueryslidemenu ul li ul li ul{top: 0;}
   
   /* Sub level menu links style */
   .jqueryslidemenu ul li ul li a{
   font: normal 13px Verdana;
   width: 160px; /*width of sub menus*/
   padding: 5px;
   margin: 0;
   border-top-width: 0;
   border-bottom: 1px solid gray;}
   
   .jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
   background: #eff9ff;color: black;}
   
   /* CSS classes applied to down and right arrow images */
   
   .downarrowclass{
   position: absolute; top: 12px; right: 7px;}
   
   .rightarrowclass{
   position: absolute; top: 6px; right: 5px;}
   
7. Kemudian letakkan kode berikut sebelum kode </head>
   
   

   <!--[if lte IE 7]>
   <style type="text/css">
   html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
   </style>
   <![endif]-->

   <script src='http://miscah.googlecode.com/files/jquery.min.js' type='text/javascript'/>
   <script src='http://miscah.googlecode.com/files/slidemenu_horizontal.js' type='text/javascript'/>

8. Cari kode yang mirip seperti ini
   
   

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

   
   kenapa saya bilang cari yang mirip, karena setiap template mempunyai karakter yang berbeda-beda dan tulisan yang saya tandai dengan warna merah adalah judul blog sobat.
   
9. Kemudian letakkan kode berikut tepat setelah kode diatas
   
   
   <div class='jqueryslidemenu' id='myslidemenu'>
   <ul>
   <li><a href='/'>Home</a></li>
   <li><a href='#'>Daftar Isi</a></li>
   <li><a href='#'>Tutorial Blog</a>
   <ul>
   <li><a href='#'>Sub Item 1.1</a></li>
   <li><a href='#'>Sub Item 1.2</a></li>
   <li><a href='#'>Sub Item 1.3</a></li>
   </ul>
   </li>
   <li><a href='#'>Islam</a></li>
   <li><a href='#'>Folder 2</a>
   <ul>
   <li><a href='#'>Sub Item 2.1</a></li>
   <li><a href='#'>Folder 2.1</a>
   <ul>
   <li><a href='#'>Sub Item 2.1.1</a></li>
   <li><a href='#'>Sub Item 2.1.2</a></li>
   <li><a href='#'>Folder 3.1.1</a>
   <ul>
   <li><a href='#'>Sub Item 3.1.1.1</a></li>
   <li><a href='#'>Sub Item 3.1.1.2</a></li>
   <li><a href='#'>Sub Item 3.1.1.3</a></li>
   <li><a href='#'>Sub Item 3.1.1.4</a></li>
   </ul>
   </li>
   <li><a href='#'>Sub Item 2.1.4</a></li>
   </ul>
   </li>
   </ul>
   </li>
   <li><a href='http://kutu-blogspot.blogspot.com'>Link Exchange</a></li>
   </ul>
   <br style='clear: left'/>
   </div>
   
10. Setelah itu Simpan Template sobat.

Kira-kira seperti itu kodenya, untuk yang saya tandai dengan tanda '#' sobat ganti sendiri dengan url yang sobat inginkan. Oke sob, selamat mencoba ya !