Cara Membuat Menu & Sub Menu
Pada postingan kali ini saya akan berbagi sedikit pengetahuan dari yang saya bisa , saya akan berbagi bagaimana cara membuat Menu & Sub Menu di blog .Nah buat agan dan agan wati sebenarnya saya juga masih dalam tahap belajar dan code yang saya berikan ini juga hasil dari googling ..hhehe maklum lah yang namanya belajar :D , tapi walaupun hasil copas sedikit - sedikit saya bisa menguasai , karena yang penting agan dan agan wati bisa/menterjemahkan tulisan - tulisan coding yang bahasanya menggunakan bahasa inggris ..Langsung saja untuk cara kerjanya , agan dan agan wati harus melakukan :
- yang pastinya pergi ke blogger.com
- lalu pilih tataletak
- lalu add gadget
- cari aplikasi html/javascript
- dan silahkan copas saja code yang ada di bawah ini !!nih ..nohh
<style>
#menunavigasihorisontal {
background:#8B0000 ;
width: 100%;
color: #FFF;
margin: 10px 0;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px; }
#bb2nav {
margin: 0;
padding: 0;}
#bb2nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;}
#bb2navli {
list-style: none;
margin: 0;
padding: 0;}
#bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {
color: #FFF;
display: block;
font:bold 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 11px 12px;
text-decoration: none;
border-right:0px solid #627AAD;}
#bb2nav li a:hover, #bb2nav li a:active {
background: #98FB98;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 11px 12px;}
#bb2nav li {
float: left;
padding: 0;}
#bb2nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;}
#bb2nav li ul a {
width: 140px;}
#bb2nav li ul ul {
margin: -25px 0 0 161px;}
#bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav
li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {
left: -999em;}
#bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li
li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav
li li li.sfhover ul {
left: auto;}
#bb2nav li:hover, #bb2nav li.sfhover {
position: static;}
#bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {
background: #8B0000;
width: 120px;
color: #FFFFFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 1px 0 0 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
-moz-border-radius:4px;
-webkit-border-radius:4px;}
#bb2nav li li a:hover, #bb2nav li li a:active {
background: #98FB98;
color: #FFF;
display: block;}
#bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li
a:visited {
background: #98FB98;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
margin: 1px 0 0 -14px;}
#bb2nav li li li a:hover, #bb2nav li li li a:active {
background: #627AAD;
color: #FFF;
display: block;}
</style>
<div id='menunavigasihorisontal'>
<ul id='bb2nav'>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>Amengan</a>
</li>
<li>
<a href='#'>Pangajaran Sakola▼</a>
<ul>
<li><a href='#'>Produktif</a></li>
<li><a href='#'>Normatif</a></li>
<li><a href='#'>Adaptif</a></li>
</ul>
</li></ul>
</div>
- Terakhir ..kalian simpan saja , dan lihat hasilnya ..
Mungkin untuk postingan sekarang hanya sampe sini , untuk kritik , saran atau pertanyaan dan lain lain , silahkan komen aja !! salam Blogger Sejati .!!
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon