Membuat submenu horizontal

Assalamualaikum sobat blogger, semoga sehat semua yah amiin.

Membuat submenu horizontal
Klik DEMO untuk melihat hasil
Kayaknya udah lama nih ane belum ngeshare yang bermanfaat, biar hanya bisa ngebantu secuil ilmu yang ane tau, yang penting dapat bermanfaat dan bisa dimanfaatkan :) .

Walaupun suasana masih keadaan duka atas meninggalnya orang tua, namun sahabat-sahabat ane banyak yang mensuport dan ngasih semangat untuk ane. dan yang paling penting adalah jalani hidup agar lebih bermanfaat dan selalu bertobat biar kata maksiat hanya sesaat hehe


Untuk mempersingkat waktu, lebih baik langsung ke Tenempatan Koding Plog (Penempatan koding blog)
  • Masuk terlebih dahulu ke akun blogger sobat;
  • Kalau sudah pilih template >> edit HTML >> Centang Expand Template Widget;
  •  Carilah kode ]]></b:skin>  dengan menekan Ctrl + f;
  • Setelah ketemu, Salin kode di bawah ini dan letakan kode tersebut tepat di atas kode ]]></b:skin>;
#catmenucontainer{height:29px;background:url(http://3.bp.blogspot.com/_kMUpUqMmduA/SWhWn0DxXnI/AAAAAAAABX4/9kZJbJrfMQ4/s1600/catmenu.jpg) repeat-x;display:block;padding:0px 0 0px 0px;font: 14px "Century gothic",verdana, Arial, sans-serif;font-weight:normal;border-top:1px solid #686D6F;}       
#catmenu ,#catmenu ul {margin: 0px 5px;padding: 0px;list-style: none;height:29px;}
#catmenu  a {color: #999;display: block;   font-weight: normal;     padding: 4px 10px 6px 10px;}   
#catmenu  a:hover {background:url(http://1.bp.blogspot.com/_kMUpUqMmduA/SWhWn4LP4_I/AAAAAAAABYA/BLn-FM8mtlc/s1600/catmenuhov.jpg) repeat-x;color: #fff;display: block;text-decoration: none;}
#catmenu  li {float: left;margin: 0px;padding: 0px;}   
#catmenu  li li {float: left;margin: 0px 0px 0px 0px;padding: 0px;width: 130px;}   
#catmenu  li li a, #catmenu  li li a:link, #catmenu  li li a:visited {background:url(http://3.bp.blogspot.com/_kMUpUqMmduA/SWhWn0DxXnI/AAAAAAAABX4/9kZJbJrfMQ4/s1600/catmenu.jpg) repeat-x;width: 150px;float: none;margin: 0px;    padding: 4px 10px 5px 10px;color:#E8EBEE;border-bottom:1px solid #2C3133;}   
#catmenu  li li a:hover, #catmenu  li li a:active {background:url(http://1.bp.blogspot.com/_kMUpUqMmduA/SWhWn4LP4_I/AAAAAAAABYA/BLn-FM8mtlc/s1600/catmenuhov.jpg) repeat-x;width: 150px;float: none;margin: 0px;padding: 4px 10px 5px 10px;color:#fff;border-bottom:1px solid #2C3133;}
#catmenu  li ul {position: absolute;width: 10em;left: -999em;z-index:1;}
#catmenu  li:hover ul {left: auto;display: block;}   
#catmenu  li:hover ul, #catmenu li.sfhover ul {left: auto;}
  • Jika sudah cari kode seperti berikut <div id='content-wrapper'>
  • kemudian pastekan kode dibawah ini tepat diatas kode <div id='content-wrapper'>
<!-- Catmenucontainer -->
<div id='catmenucontainer'>
<div id='catmenu'>
<li><a href='' title='#'>Daftar Isi</a>
        </li>

  <ul>
    <li><a href='http://gaptek32.blogspot.com/search/label/blogspot' title='#'>Tutorial blog</a>
      <ul class='children'>
        <li><a href='http://gaptek32.blogspot.com/search/label/SEO' title='Tips Seo'/>
        </li>
        <li><a href='http://gaptek32.blogspot.com/search/label/Widget' title='#'>Gadget</a>
        </li>
        <li><a href='http://gaptek32.blogspot.com/search/label/tips-trik%20design%20template%20blogger' title='#'>Tips design template</a>
        </li>
      </ul>
    </li>
   
    <li><a href='#' title='#'>Blog tools</a>
      <ul class='children'>
<li><a href='http://gaptek32.blogspot.com/2012/08/kumpulan-sub-menu-horizontal-jquery.html' title='#'>pharsing HTML</a>
        </li>
        <li><a href='http://gaptek32.blogspot.com/2012/08/hex-collor-blogspot.html' title='#'>hex color</a>
        </li>
        <li><a href='http://gaptek32.blogspot.com/2012/09/cek-berat-blog.html' title='#'>Chek berat blog</a>
          <ul class='children'>
            <li><a href='#' title='#'>chek pagrank</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
   
    <li><a href='#' title='#'>Download</a>
      <ul class='children'>
        <li><a href='http://gaptek32.blogspot.com/search/label/Download template' title='#'>Template blog</a>
        </li>
      </ul>
    </li>
   
    <li><a href='#' title='#'>Info</a>
      <ul class='children'>
        <li><a href='http://gaptek32.blogspot.com/search/label/Info%20blogspot' title='#'>Info blogspot</a>
        </li>
        <li><a href='#' title='#'>Info kontes</a>
        </li>
<li><a href='http://gaptek32.blogspot.com/search/label/Ngga%20penting' title='#'>Info Ngga penting</a>
        </li>
      </ul>
    </li>
      </ul>
</div>       
</div>

<div class='clear'/>
<!-- /Catmenucontainer -->
Keterangan :
  1. Ganti teks yang berwarna merah dengan URL yang dituju
  2. Ganti teks yang berwarna hijau dengan Keterangan URL yang dituju
  3. Ganti teks yang berwarna Biru untuk submenu dari warna hijau
  • Review terlebih dahulu untuk jaga-jaga terjadi galat
  • jika sudah OK lalu klik save atau simpan.
Saya kira sudah cukup untuk penjelasannya, namun bila sobat ada yang ingin ditanyakan silahkan beri komentarnya.

Terkait dengan ini

8 komentar:

  1. ini dia yang saya cari.......
    tapi setelah saya coba mengikuti langkah seperti yg sobat tulis saya ada kesulitan tuk pilih ... karena gak ada di blogg saya......

    saya coba ctrl f div id ada 10... gimana ya sob.
    blogg saya; http://tempatcariinspirasi.blogspot.com/

    BalasHapus
    Balasan
    1. Dilihat dari template yang sobat gunakan,
      alternatifnya sobat cari kode seperti ini tabs-outer'> dan taruh kode !-- Catmenucontainer -- hingga !-- /Catmenucontainer -- tepat diatas kode tabs-outer'> sebagai pengganti kode content-wrapper'>

      Semoga membantu sob..

      Hapus
    2. saya coba ikutin cara bikin sub menu yg sobat bikin di http://gaptek32.blogspot.com/2012/08/membuat-menu-horizontal.html.

      ternyata yg navigatornya dah kesimpen waktu saya edit HTML. saya coba ikutin cara yg dari link itu juga bingung dilangkah keduanya pas add gadgetnya gak ketemu.

      kalo mau ngapus yg saya edit HTML dibalikin ke bawaan waktu saya pertama bikin blogg gimana ya sob?

      Hapus
    3. Untuk blog berbahasa indonesia , coba ikuti ilustrasi di url dibawah ini untuk menggunakan "add gadget"

      http://template-gaptek32.blogspot.com/2012/10/cara-menambahkan-membuat-gadget-baru.html

      Bila sobat ingin menghapus / mengembalikan seperti semula cukup mengikuti instruksi di URL "http://gaptek32.blogspot.com/2012/08/membuat-menu-horizontal.html" yang pertama, pada EDIT HTML sobat cari kode dibawah ini.

      ------ navbar ------------- */
      hingga
      ------ end navbar ------------- */

      kemudian hapus semua kode tersebut.

      Hapus
  2. Sob ada yng lebih kren lgi ngga nih menu horizontalnya?? sekalian reques cara bikin gmbar yang ada dipojok kiri bawah blog lo sob. imut abizzzhehe

    BalasHapus
    Balasan
    1. haha insaallah untuk menu horizontal nanti ane akan update langsung serentak, tapi belum bisa sekarang-sekarang sob :) , untuk sementara ini ane nyari bahan-bahanya dulu .

      Hapus
  3. thanks y, sob,,bermanfaat & pas di blog saya,, :-d

    BalasHapus
  4. div id=header-wrapper gak ada min, itu nambahinnya gimana?
    thanks..

    BalasHapus

Saya mohon maaf atas ketidak terurusnya blog ini, dan saya pun tidak tahu kapan ada waktu luang agar blog ini dapat membalas kritik dan pertanyaan, apalagi untuk melanjutkan postingan saya yang sempat tertunda pada akhir-akhir ini.
Kemungkinan besar blog ini tidak akan aktif selama paling sebentar 2-3bulan karena saya (admin) sibuk mencari nafkah di dunia nyata.
Saya mohon maaf yang sebesar-besarnya karena tidak bertanggung jawab dalam hal yang seperti ini.

Untuk menyisipkan kode <i rel="pre">KODE ANDA YANG TELAH DI PARSE...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>

Link hidup akan terhapus secara otomatis
Convert kode terlebih dahulu bila komentar anda mengandung kode HTML/JScript pada tombol di bawah ini

Parse HTML