earth

Guestbook

/* Iklan google ads */
Banyak sobat blogger yang bertanya mengenai cara menambahkan navbar menu pada template yang tidak ada navbar menunya. Bahkan tidak jarang diantara mereka ada yang meminta dikirimi email untuk penjelasannya. Bukannya apa-apa, bukannya saya tidak mau memberikan penjelasan mengenai hal ini, tapi karena script-nya yang panjang dan membutuhkan penjelasan yang memadai, membuat saya selalu mengurungkan untuk mempostingnya. Namun akhirnya, demi memenuhi keinginan para sobat blogger tadi, saya pun mempostingnya juga.

Ada dua bentuk navbar menu, yaitu: navbar menu biasa dan navbar menu droftdown atau navbar menu yang memiliki sub-sub menu (children) di bawahnya. Navbar menu droftdown inipun terbagi dua: ada yang berbentuk animasi, seperti navbar menu pada blog SC Community, dan ada pula yang biasa (non-animasi), seperti navbar menu pada blog ini. Nah, pada tulisan kali ini saya akan membahas cara menambahkan navbar menu droftdown (dikenal juga dengan istilah Category menu) yang non-animasi kedalam template blog.

Langkah-langkah untuk menambahkan navbar menu ini adalah sebagai berikut:
  • Login ke akun Blogger kamu.
  • Dari halaman Dasbor, klik Tata Letak dan pilih Edit HTML.
  • Lakukan duplikasi template untuk berjaga-jaga jika terjadi masalah.
  • Kopikan script CSS berikut (gunakan Control A):
    /* Category menu*/
    #catmenucontainer {
     height:34px;
     background: url(link gambar latar) repeat-x;
     display:block;
     padding: 0px 0px 0px 0px;
     font: 12px Tahoma,Century gothic,verdana, Arial, sans-serif;
     font-weight:normal;
     text-transform:title;
     }
     
    #catmenu {
     margin: 0px 0px 0px 0px;
     padding: 0px 15px;
     list-style: none;
     height:33px;
     }
    
    #catmenu ul {
     margin: 0px 0px 0px 0px;
     padding: 0px 0px;
     list-style: none;
     height:33px;
     }
    
    #catmenu a {
     color:#ffffff;
     display: block;
     font-weight: normal;
       padding: 10px 15px 9px 15px;
     }
     
    #catmenu a:hover {
     color:#ffffff;
     display: block;
     text-decoration: none;
     font-weight: bold;
     background:#999999;
     }
    
    #catmenu li {
     float: left;
     margin: 0px 0px;
     padding: 0px 0px;
     }
     
    #catmenu li li {
     float: left;
     margin: 0px 0px 0px 0px;
     padding: 0px 0px;
     width: 130px;
     }
     
    #catmenu li li a, #catmenu  li li a:link, #catmenu  li li a:visited {
     background: url(link gambar latar) repeat-x;
     width: 130px;
     float: none;
     margin: 0px 0px;
     padding: 7px 10px 7px 10px;
     color:#ffffff;
     font-weight:normal;
     }
    
    #catmenu li li a:hover, #catmenu  li li a:active {
     background:#999999;
     color:#ffffff;
     font-weight:bold;
     }
    
    #catmenu li ul {
     position: absolute;
     left: -999em;
     z-index:200;
     background: url("") bottom;
     width:170px;
     }
    
    #catmenu li:hover ul {
     left: auto;
     display: block;
     }
     
    #catmenu li:hover ul, #catmenu li.sfhover ul {
     left: auto;
     }
    
    Pada script di atas disetting sebagai berikut (lihat yang dicetak tebal):
    * Gambar latar (background:url) : belum ditentukan
    * Warna huruf : putih (#ffffff)
    * Warna latar link hover : abu gelap (#999999)
    * Padding menu utama : 10px 15px 9px 15px
    * Lebar submenu (children) : 130px
    * Padding submenu (children) : 7px 10px 7px 10px
    Kamu dapat mengubah settingan tersebut disesuaikan dengan template blog kamu. Untuk memilih gambar latar (background: url), kamu bisa memilihnya pada Catatan tambahan di akhir tulisan ini. Atau jika tidak ingin memakainya, hapus kalimat link gambar latar pada perintah background: url(link gambar latar).
  • Letakkan script tersebut di atas kode ]]></b:skin>.
    Untuk memudahkan pencarian, tekan Control F atau F3.
  • Selanjutnya kopikan script berikut:
    <!-- Catmenucontainer -->
    <div id='catmenucontainer'>
    <div id='catmenu'>
      <ul>
     <li><a expr:href='data:blog.homepageUrl' title='Halaman Muka'>Home</a>
       </li>
     
     <li><a href='' title='Menu 1'>Menu 1</a>
          <ul class='children'>
         <li><a href='Link URL' title='Submenu 1.1'>Submenu 1.1</a></li>
         <li><a href='Link URL' title='Submenu 1.2'>Submenu 1.2</a></li>
         <li><a href='Link URL' title='Submenu 1.3'>Submenu 1.3</a></li>
         <li><a href='Link URL' title='Submenu 1.4'>Submenu 1.4</a></li>
         <li><a href='Link URL' title='Submenu 1.5'>Submenu 1.5</a></li>
       </ul>
        </li>
     
     <li><a href='' title='Menu 2'>Menu 2</a>
          <ul class='children'>
         <li><a href='Link URL' title='Submenu 2.1'>Submenu 2.1</a></li>
         <li><a href='Link URL' title='Submenu 2.2'>Submenu 2.2</a></li>
         <li><a href='Link URL' title='Submenu 2.3'>Submenu 2.3</a></li>
         <li><a href='Link URL' title='Submenu 2.4'>Submenu 2.4</a></li>
         <li><a href='Link URL' title='Submenu 2.5'>Submenu 2.5</a></li>
       </ul>
        </li>
    
     <li><a href='' title='Menu 3'>Menu 3</a>
          <ul class='children'>
         <li><a href='Link URL' title='Submenu 3.1'>Submenu 3.1</a></li>
         <li><a href='Link URL' title='Submenu 3.2'>Submenu 3.2</a></li>
         <li><a href='Link URL' title='Submenu 3.3'>Submenu 3.3</a></li>
         <li><a href='Link URL' title='Submenu 3.4'>Submenu 3.4</a></li>
         <li><a href='Link URL' title='Submenu 3.5'>Submenu 3.5</a></li>
       </ul>
        </li>
        
     <li><a href='' title='Menu 4'>Menu 4</a>
          <ul class='children'>
         <li><a href='Link URL' title='Submenu 4.1'>Submenu 4.1</a></li>
         <li><a href='Link URL' title='Submenu 4.2'>Submenu 4.2</a></li>
         <li><a href='Link URL' title='Submenu 4.3'>Submenu 4.3</a></li>
         <li><a href='Link URL' title='Submenu 4.4'>Submenu 4.4</a></li>
         <li><a href='Link URL' title='Submenu 4.5'>Submenu 4.5</a></li>
       </ul>
        </li>
    
     <li><a href='' title='Menu 5'>Menu 5</a>
          <ul class='children'>
         <li><a href='Link URL' title='Submenu 5.1'>Submenu 5.1</a></li>
         <li><a href='Link URL' title='Submenu 5.2'>Submenu 5.2</a></li>
         <li><a href='Link URL' title='Submenu 5.3'>Submenu 5.3</a></li>
         <li><a href='Link URL' title='Submenu 5.4'>Submenu 5.4</a></li>
         <li><a href='Link URL' title='Submenu 5.5'>Submenu 5.5</a></li>
       </ul>
        </li>
     
      </ul>
    </div>  
    </div>
    <!-- /Catmenucontainer -->
    
    Pada huruf yang dicetak tebal, gantilah sesuai dengan link dan menu/submenu yang kamu inginkan. Untuk setiap judul (title) menu/submenu, dapat kamu kosongkan dengan cara menghapus Menu x atau Submenu x.x-nya. Dan jika kamu tidak akan menggunakan sub-sub menu (children menu), hapuslah <ul class='children'> sampai dengan penutupnya (</ul>).
  • Letakkan script tersebut di bawah kode <body>, jika ingin diletakkan di atas, atau di bawah kode <div id='header'>, jika ingin diletakkan di bawah header.
    Karena setiap template berbeda-beda, bisa juga diletakkan di bawah <div id='header-wrapper'>, jika ingin diletakkan di bawah header, tepatnya di bawah penutup widget id='Header1' (</b:section>).
  • Lakukan Pratinjau, jika sudah OK, Save hasil kerjaan kamu dan ucapkan Alhamdulillah.....

Nah, cukup ribet kan? OK coy, selamat mencoba....
Catatan tambahan:
Berikut adalah gambar latar yang bisa kamu pilih:

URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-biru1.gif

URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-biru2.gif

URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-hijau1.gif

URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-hijau2.gif

URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-merah1.gif

URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-merah2.gif

URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-pink1.gif

URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-pink2.gif

URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-ungu1.gif

URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-ungu2.gif

Kopikan URL-nya lalu paste di bagian link gambar latar.
Supaya warna latar link hover sesuai dengan gambar yang kamu pilih (tidak abu gelap), ubah saja kode background:#999999; pada #catmenu a:hover dan #catmenu li li a:hover dengan warna yang sesuai (untuk mencari warna bisa kamu kunjungi situs HTML Color Codes), atau ubah menjadi background: url (link gambar latar); dengan gambar latar yang sesuai, misalnya: jika gambar latar menu memakai Merah1 maka pada hover memakai Merah2 atau sebaliknya. Atau bisa juga menghilangkan background ini dengan cara menghapusnya atau mengubahnya menjadi background: none;.
  • Artikel Terkait Dengan HTML Tutorials

    Terimakasih sudah membaca artikel SC Community's Blog

    15 komentar

    HEHE-HEHE!!!
    jurus CIMANDE baru. terus keluarkan sob biar template jd BIDADARI :DDD
    katanya blog tu wanita cantik ya???
    asyik GEULIS

    thanks HEHE

    16 September 2009 22.59  

    Terimakasih infonya kang EnEs. Bermanfaat banget nih. Seperti biasa.

    16 September 2009 23.09  

    Wah...sangat bermanfaat buat ana,terimakasih,
    langsung terapkan!

    17 September 2009 13.12  

    salam sobat
    trims infonya
    ingin sih menambahkan menu di navbar,,,

    selamat menyambut hari raya Idhu Fitri 1430H
    minal aidhin walfaidzin ,,untuk bang ENES sekeluarga.

    17 September 2009 20.33  

    mantab boz isa lgsg di praktek kan nich infonya.Berraanggkat ke TKP bozz..

    17 September 2009 21.14  

    mantaaap gan.. makasih neh sharing nya....

    17 September 2009 22.43  

    shotmixnya kok pake ogix gan ? bkane enak pake shotmix ?? klo pake ogix ribet..
    salam kenal yah..

    blognya ilmu semua nee

    18 September 2009 00.48  

    Jadi pingin nyobain nih, terima kasih...

    18 September 2009 11.41  

    di template blog saya kan ada menu dan submenu atau mungkin itu yang disebut Droftdown.aku pgen ngisi itu d link2 yg ada di blog.
    gi mna caranya?
    aku gag tau letak kode HTMLnya..
    tk cri blm ktemu.

    31 Oktober 2009 22.09  

    okay thanks' s infone
    akan kucoba..

    31 Oktober 2009 22.37  

    thanks banget atas infonya...
    sangat membantu...

    18 Maret 2011 16.40  

    Mantaaap... Abis nih Kang, web Gratisan Laksana web berbayar Tampilannya. Kayanya Dah di Fermak Abis nih tampilaan Themplate nya.. heee.... Ga nyangka klo nih tadi dr blogspot. Pas lihat Link site nya ternyata blogspot..
    Terimakasih atas Sharingnya

    6 September 2011 09.38  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler