Tutorial Membuat Menu Di Blog

Inilah Tutorial Membuat Menu Di Blog .

Pertama kali bikin Blog pasti tampilannnya masih sederhana dan sesuai dengan template bawaan yang kita pilih pertama kali tanpa adanya Menu-Menu maupun Sub menu ataupun yang lainnya.

Sekedar berbagi aja bagi kawan-lawan yang memerlukan script untuk membuat Menu dibawah Header berikut saya tampilkan contoh Scriptnya :

                                                             Gbr. menu di bawah header

ikuti langkah-langkah di bawah ini :

1. Setelah login masuk ke dasbor blog anda

2. Pilih gadget yang ada di bawah header

3. Kemudian pilih html/java terus masukkan script di bawah ini ( judul di kosongin aja )

 <style>

    #menunavigasihorisontal {

        background: #848484;

        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: #2E9AFE;

        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: #EDEFF4;

        width: 120px;

        color: #3B5998;

        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: #627AAD;

        color: #FFF;

        display: block;}

    #bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li

a:visited {

        background: #EDEFF4;

        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='href='#'>Home</a>

</li>

              

                <li>

                  <a href='#'>download</a>

                </li>

<li>

                  <a href='#'>komik</a>

                </li>

<li>

                  <a href='#'>Software</a>

                </li>

<li>

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

Tulisan dengan warna merah adalah menu  hasil yang akan ditampakkan dibawah header. Terserah agan mau membuat berapa menu sesuai kebutuhannya. Selamat mencoba..!!!!!