• Cara membuat Tab menu di blog

    Senin, 18 Juli 2011 | rivasweet
    di 09.03 |
    hello semua,,,,,,,,,,,,,,,,,,,nah ini postingan pertamaku nich,,,maaf yach mungkin masih amburadul karena q newbie nich..ya udah gak perlu panjang lebar langsung cekiddooot jja!!ok!
         Postingan ku kali ini mau ngebahas tentang cara membuat tab menu di blog..kalo yang masih belum tau and newbie boleh dicoba nich.
    Sebenarnya banyak cara untuk membuat tab menu pada Blog. cara membuatnya sangatlah mudah. Ikuti cara mudah berikut ini.
    1. Buka Account Blogger anda
    2. Klik Tataletak
    3. Klik Add Gadget
    4. Pilih Add Javascript/HTML
    5. Copy dan Paste code HTML berikut


    <style type="text/css">
    .h_mnu_01{
       width: 100%;
       font-family: Arial, Helvetica, sans-serif;
       font-size: 12px;
       font-weight: bold;
       font-style: normal;
       text-decoration: none;
    }
    .h_mnu_01 ul{
       margin: 0;
       padding: 0;
       float: left;
       width: 100%;
       background: #000000;
       border-top-width: 1px;
       border-right-width: 0;
       border-bottom-width: 1px;
       border-left-width: 0;
       border-top-style: solid;
       border-right-style: solid;
       border-bottom-style: solid;
       border-left-style: solid;
       border-top-color: #000000;
       border-right-color: #000000;
       border-bottom-color: #000000;
       border-left-color: #000000
    }

    .h_mnu_01 ul li{
    display: inline;
    }

    .h_mnu_01 ul li a{
       float: left;
       color: #FFFFFF;
       padding: 5px 11px;
       text-decoration: none;
       border-right-width: 1px;
       border-right-style: solid;
       border-right-color: #000000;
    }

    .h_mnu_01 ul li a:visited{
    color: #FFFFFF;
    }

    .h_mnu_01 ul li a:hover, .h_mnu_01 ul li .selected{
       color: #FFFF00 !important;
       padding-top: 5px;
       padding-bottom: 5px;
       background: #008000;
    }

    </style>
    </head>
    <body>

    <div class="h_mnu_01">
    <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">PROFILLE</a></li>
    <li><a href="#">PRODUCT</a></li>
    <li><a href="#">MY BLOG</a></li>
    <li><a href="#">ABOUT</a></li>
    </ul>
    </div>

    </body>
    </html>

0 komentar:

Posting Komentar