Assalamu'alaikum sobat. ingin memiliki menu horizontal dan sub menu seperti blog saya dan teman saya seperti gambar di atas? bagi sobat-sobat sekalian trik ini sangat bermanfaat untuk meningkatkan SEO blog sobat! membuat menu horizontal adalah menu diatas yang mengarah ke samping, sedangkan sub menu adalah menu kebawah dari menu horizontal. untuk membuatnya tidak sulit kok hanya tinggal copas saja!
langsung saja ikuti lagkah-langkah berikut ini :
1. Login Ke BLOGGER (pastinya...)
2. pilih Template -> Edit HTML
3. kemudian lanjutkan/proceed dan jangan lupa centang checkbox "Expand Template Widget"
4. copas kode di bawah ini tepat diatas/sebelum kode "]]></b:skin>" :
#NavbarMenu { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; color: #ffffff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }
5. sudah selesai, kemudian simpan template/save template
6. kemudian pilih layout/tata letak
7. pilih add gadget/ tambah gadget
8. dan pilih HTML/Javascript
9. copas kode berikut di HTML/Javascript :
<div class='menuhorisontal'>
<ul id='nav'>
<li><a href='#'>Home</a> </li>
<li><a href='#'>MenuHorizontal</a> </li>
<li><a href='#'>MenuHorizontal</a> </li>
<li><a href='#'>MenuHorizontal+SubMenu</a>
<ul>
<li><a href='#'>SubMenu</a> </li>
<li><a href='#'>SubMenu</a> </li>
<li><a href='#'>SubMenu</a> </li>
</ul> </li>
<li><a href='#'>MenuHorizontal+SubMenu</a>
<ul>
<li><a href='#'>SubMenu</a> </li>
<li><a href='#'>SubMenu</a> </li>
<li><a href='#'>SubMenu</a> </li>
</ul> </li>
<li><a href='#'>MenuHorizontal+SubMenu</a>
<ul>
<li><a href='#'>SubMenu</a> </li>
<li><a href='#'>SubMenu</a> </li>
<li><a href='#'>SubMenu</a> </li>
</ul> </li>
<li><a href='#'>MenuHorizontal</a> </li>
</ul>
</div>
Perhatian: - Ganti # Dengan Alamat URL Anda Sesuai Judul , jangan hapus tanda (')
- Ganti Tulisan SubMenu, MenuHorizontal, MenuHorizontal+SubMenu, Dan Home Dengan Judul Yang Anda Inginkan
-Untuk menambahakan menu copas code berikut tepat diatas
<li><a href='#'> MenuHorizontal</a> </i>
<li><a href='#'>MenuHorizontal+SubMenu</a>
<ul>
<li><a href='#'>SubMenu</a> </li>
<li><a href='#'>SubMenu</a> </li>
<li><a href='#'>SubMenu</a> </li>
</ul> </li>
<li><a href='#'>MenuHorizontal+SubMenu</a>
<ul>
<li><a href='#'>SubMenu</a> </li>
<li><a href='#'>SubMenu</a> </li>
<li><a href='#'>SubMenu</a> </li>
</ul> </li>
<li><a href='#'>MenuHorizontal</a> </li>
</ul>
</div>
Semoga Bermanfaat, Tapi Lihat Kalo Yang Aku Pake Kenapa modelnya berbeda sebenarya itu bawaan template (hehehehe.......)
Lihat Dahulu Contohnya Sebelum Mencobanya:
Sumber: blog-anak-nurulfikri.blogspot.com
0 Comments:
Post a Comment