Jomas Firdaus: Oinsa atu Halo Menu iha Blog nia Header

Wainhira ita vizita blog sira ne'ebe mak iha ninia Menu balu ne'ebe mak kapaz no furak, halo ita mos hakarak halo ita nia menu ne'e sai furak mos hanesan ne'e maibe, iha ita nia blog ne'e iha deit menu ne'ebe mak oferese husi template ida ne'ebe mak ita uza hela.
Tamba menu ne'ebe mak oferese husi template ne'e simples deit no la iha tan ninia sub menu. Ho ida ne'e ha'u mos hakarak halo artikel ida konaba oinsa mak halo menu blog nian sai furak no kapaz liu tan.
Iha menu ida ne'e ita sei la uja CSS maibe, ita uja deit mak Java Script tamba tuir esperiensia ne'ebe mak iha uza Java Script diak liu tamba la pengaruh ba iha ninia template no fasil liu atu halo.
Tuir mai ne'e dalan no metode ida ne'ebe mak simples atu halo :

Ba dala uluk presija atu loke ita nia DasBor ( Log in utiliza ita nia Email );
tuir mai klik iha Gadgate/ Tata Letak;
Hili tamba Gadgate/ Add Gadgate;
tuir mai hili HTML/ JavaScript;
kopia kode tuir mai ne'e no hatama iha Gadgate HTML/ JavaScript :

#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: white;
        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: brown;
        color: yellow;
        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: green;
        width: 120px;
        color: black;
        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: blue;
        color: #FFF;
        display: block;}
    #bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li

a:visited {
        background: silver;
        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: black;
        color: #FFF;
        display: block;}

</style>
    <div id='menunavigasihorisontal'>
              <ul id='bb2nav'>
<li>
                  <a href='#'>Inisiu</a>
                </li>
<li><a href='#'> Menu1 ▼</a>
<ul>
<li><a href='#'> SubMenu1 </a></li>
<li><a href='#'> SubMenu2 </a></li>
</ul>
</li>
<li>
                  <a href> Menu2 ▼</a>
                     <ul>
<li><a href='#'> SubMenu1 </a></li>
<li><a href='#'> SubMenu2 </a></li>
</li>
<li>
                  <a href='#'>Menu3 ▼</a></li>
<li><a href='#'> Menu4 ▼</a>
<ul>
<li><a href='#'> SubMenu1 </a></li>
<li><a href='#'> SubMenu2 </a></li>
</ul>
</li>
</ul>
</div>
<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #ff840a;

position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}

</style>

Hotu tiha Klik iha Save/ Simpan
Ikus liu hare'e ita nia Blog

Definisaun :

Buka liafuan # no troka ba enderesu blog, artikel ou website nian ida ne'ebe mak ita hakarak uza.
Buka Liafuan Menu1, Menu2, Menu3 no Menu4 no troka ba iha Label (Naran) Menu nian ne'ebe mak ita hakarak atu Hakerek.
Lia fuan SubMenu sira ne'e signifika katak Menu ida ne'e iha Menu Ida nia Okos.
Hakarak atu Hatama tan Menu ka SubMenu ! hakerek deit <li> Menu nia naran </li>
Atu hafasil hodi troka nia Kor sira, ha'u troka hotu ona ninia kor nia kode ba iha kor nia naran.

To'o iha ne'e dalan no metode simples ida konaba oinsa mak halo menu iha Blog nia Header.
Ha'u fiar katak ho artikel ida ne'e bele hatan no responde preokupasaun husi kolega sira ne'ebe mak durante ne'e hasoru problema konaba halo menu iha blog nia header ...
labele haluha Comentariu no Google+ wkwkwkwkwkwk

Jomas Firdaus

Oinsa atu Halo Menu iha Blog nia Header

Tidak ada komentar:

Posting Komentar