Membuat submenu horizontal

Sobat blogger, semoga sehat semua yah amiin.

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYRZd6cK_i29jxoPGxBPphJCSHlDTh57nIlCiSh8oMrGg6sxelIZN0RbMQ70cmuyqxPQmEhWUlvngx5J8ThG5p71U9f6Krp-pgm3p3rvSHOJvwbSRcqTiBr5KyKkaVpHzVqaA7Gx3YC8g/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMgzBytwX9j-WQ0Ax_R5cYxh2m0Oyj-qx613s5atepDZf_kZheqyaKyQs6K_UwKQjjaHN79bHhzSbqzivWqFTTEHFJmRG2A2Q4as0DbBYJpNUlT6YTD8AzB2AriVhtZenBOGrl3ErsXkI/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYRZd6cK_i29jxoPGxBPphJCSHlDTh57nIlCiSh8oMrGg6sxelIZN0RbMQ70cmuyqxPQmEhWUlvngx5J8ThG5p71U9f6Krp-pgm3p3rvSHOJvwbSRcqTiBr5KyKkaVpHzVqaA7Gx3YC8g/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMgzBytwX9j-WQ0Ax_R5cYxh2m0Oyj-qx613s5atepDZf_kZheqyaKyQs6K_UwKQjjaHN79bHhzSbqzivWqFTTEHFJmRG2A2Q4as0DbBYJpNUlT6YTD8AzB2AriVhtZenBOGrl3ErsXkI/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://blogsmanado.blogspot.com/search/label/blogspot' title='#'>Tutorial blog</a>
      <ul class='children'>
        <li><a href='http://blogsmanado.blogspot.com/search/label/SEO' title='Tips Seo'/>
        </li>
        <li><a href='http://blogsmanado.blogspot.com/search/label/Widget' title='#'>Gadget</a>
        </li>
        <li><a href='http://blogsmanado.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://blogsmanado.blogspot.com/2012/08/kumpulan-sub-menu-horizontal-jquery.html' title='#'>pharsing HTML</a>
        </li>
        <li><a href='http://blogsmanado.blogspot.com/2012/08/hex-collor-blogspot.html' title='#'>hex color</a>
        </li>
        <li><a href='http://blogsmanado.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://blogsmanado.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://blogsmanado.blogspot.com/search/label/Info%20blogspot' title='#'>Info blogspot</a>
        </li>
        <li><a href='#' title='#'>Info kontes</a>
        </li>
<li><a href='http://blogsmanado.blogspot.com/search/label/Ngga%20penting' title='#'>Info</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.