Tuesday, 5 January 2010

Label Jadi Menu Navigasi

Blogger mania, biasanya kita menggunakan menu navigasi berdasarkan URL / link yang kita masukkan dengan beberapa URL / link blog yang kita punya, nah kali ini jika kita ingin mengoptimalkan blog kita, agar dapat dicari navigasinya berdasarkan label yang kita pasang ditiap postingan, maka perlu di ingat bahwa tiap posting diberi label.

kemudian kita bahas untuk memasang menu :

  1. masuk keblogger
  2. Tata letak
  3. edit HTML
  4. Masukkan kode berikut diatas kode ]]></b:skin>


    /* Navigation Menu
    ------------------------------------------------------*/
    #nav {
            background:#363636 url(http://3.bp.blogspot.com/_sunpK_FtO1E/SmMf4NmxtaI/AAAAAAAAAKw/GCICHlow_JU/s1600/menubg.png) repeat-x bottom;
        width: 980px;
        font-size: 12px;
        color: #a79578;
        font-weight: bold;
        margin: 0 auto 0px;
        padding: 0px auto 0px;
            height:35px;
    }
    #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:#363636;
        color: #FFF;
        display: block;
        font-weight: normal;
        text-transform: titlecase;
        margin: 0;
        padding: 7px 10px;
            border-right:1px solid #202020;
    }
    #nav li a:hover, #nav li a:active {
            background:#4B4949;
            color:#fff;
        margin: 0;
        padding: 7px 10px;
        text-decoration: none;
    }
    #nav li li a, #nav li li a:link, #nav li li a:visited {
        background: #202020;
        width: 150px;
        color: #FFF;
        font-weight: normal;
        text-transform: lowercase;
        float: none;
        margin: 0;
        padding: 7px 10px;
            border-right:1px solid #363636;
            border-bottom:1px solid #363636;
            border-left:1px solid #363636;
    }
    #nav li li a:hover, #nav li li a:active {
        background:  #363636;
        color: #FFF;
        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. Kode dibawah ini sebaiknya diletakkan dibagian atas kode <div id='outer-wrapper'>



    <div id='nav'>
          <b:section class='nav' id='nav' showaddelement='no'>
    <b:widget id='Label2' locked='false' title='Categories' type='Label'>
    <b:includable id='main'>
      <b:if cond='data:title'>
        <h2><data:title/></h2>
      </b:if>
      <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
        <b:if cond='data:display == &quot;list&quot;'>
          <ul>
          <b:loop values='data:labels' var='label'>
            <li>
              <b:if cond='data:blog.url == data:label.url'>
                <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
              <b:else/>
                <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
              </b:if>
              <b:if cond='data:showFreqNumbers'>
              
              </b:if>
            </li>
          </b:loop>
          </ul>
        <b:else/>
          <b:loop values='data:labels' var='label'>
            <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
              <b:if cond='data:blog.url == data:label.url'>
                <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
              <b:else/>
                <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
              </b:if>
              <b:if cond='data:showFreqNumbers'>
                <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
              </b:if>
            </span>
          </b:loop>
        </b:if>
        <b:include name='quickedit'/>
      </div>
    </b:includable>
    </b:widget>
    </b:section>
        </div>


    Pratinjau dulu, jika cocok maka simpan.
    Selamat mencoba dan
    Semoga berhasil !!
    agar leta


0 comments:

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More