media29@copyright. Powered by Blogger.
RSS

Menambahkan menu dan sub menu di blog

1. Silahkan masuk dulu ke blog anda
2. pilih rancangan kemudian edit Html.
3. kemudia beri tanda centang pada Expand template widget.
4. lalu cari kode berikut ]]></b:skin>. untuk cara cepat mencarinya gunakan  CTRL + F.
5. lalu copy pastekan kode/script ini tepat di atas/sebelum kode ]]></b:skin>.

#NavbarMenu { background: #808080; 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; }

6. setelah itu simpan template.
7. lalu kembali ke Rancangan/ Element laman dan tambah Gadget dibawah header lalu pilih Html/Java Script

8. lalu pastekan kode/script dibawah ini berikut penjelasannya :

 Awal script, copy :
<div class='menuhorisontal'>
<ul id='nav'>


Untuk membuat beranda, copy:

<li><a href='http://mediabloggershare.blogspot.com/2015/03/discussions-with.html'>HOME</a> </li>

Untuk membat menu, copy:
<li><a href='http://mediabloggershare.blogspot.com/2014/05/memahami-kesehatan-kulit-di-usia-remaja.html'>KECANTIKAN</a>
<ul>


Untuk membuat sub menu, copy:
<li><a href='http://mediabloggershare.blogspot.com/2015/03/manfaat-es-batu-untuk-kesehatan-kulit.html'>Manfaat Es batu</a> </li>




Akhir script, copy:
</ul> </li>

</li></ul></div>

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

0 comments: