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.

Menu Horizontal, Tutorial Blogspot 10.28 No comments

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.

Blog, Blog Stuff, Menu Horizontal, Widget 11.57 No comments

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://miscah.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 !

Blog, Blog Stuff, Java Script, Kode HTML, Menu, Menu Horizontal, Tutorial Blogspot 08.19 No comments