Halaman

misther-junett.blogspot.com
  • Web
  • misther-junett
  • Selasa, 08 Maret 2011

    HOME , , Membuat Menu tombol menggunakan CSS3

    Membuat Menu tombol menggunakan CSS3


    Bagaimana cara membuat Menu tombol dengan CSS3 dengan efek berkilau..... untuk caranya yaitu sebagai berikut:
    Hasil tampilannya seperti ini:

    1. Login bloggger
    2. Masuk ke rancangan lalu masuk ke menu edit html
    3. Cari kode ]]></b:skin> (ctrl+F untuk mempermudah pencarian)dan taruh kode di bawah ini sebelum kode tersebut.

    #bgmenu {
    width:100%;
    height:30px;
    }
    #menu a {
    font:12px verdana;
    font-weight:bold;
    color:#000;
    text-shadow:0px 2px 3px #fff;
    text-decoration:none;
    }
    #menu a:hover {
    color:#fff;
    text-shadow:0px 2px 3px #000;
    text-decoration:none;
    }
    #menu li {
    margin-right:10px;
    float: left;
    list-style: none;
    }
    .abu{
    text-align:center;
    background:-moz-linear-gradient(top,  #999 , #666 );
    width:80px;
    padding:5px;
    margin-bottom:10px;
    -moz-border-radius:50px;
    -moz-box-shadow:0px 5px 8px grey;
    border:1px solid #0F0;
    }
    .kilau {
    background:#fff ;
    height:5px;
    margin:-5px 0px 15px 0px;
    padding:5px 5px 5px 5px;
    color:000;
    -moz-border-radius:20px;
    -moz-box-shadow:0px 2px 6px #999;
    opacity:0.6;
    }
    .text {
    margin-top:-25px;
    color:#000;
    font:14px trebuchet ms;
    font-weight:bold;
    opacity:0.9;
    }
    .
    Untuk selanjutnya Kemudian cari kode </head> , dan taruh kode di bawah ini setelah kode tersebut
    <div id="bgmenu">
    <ul id="menu">
    <li><div class="abu"><div class="kilau"></div><div class="text">
    <a href="#">Menu 1</a></div></div></li>
    <li><div class="abu"><div class="kilau"></div><div class="text">
    <a href="#">Menu 2</a></div></div></li>
    <li><div class="abu"><div class="kilau"></div><div class="text">
    <a href="#">Menu 3</a></div></div></li>
    <li><div class="abu"><div class="kilau"></div><div class="text">
    <a href="#">Menu 4</a></div></div></li>
    <li><div class="abu"><div class="kilau"></div><div class="text">
    <a href="#">Menu 5</a></div></div></li>
    </ul></div>
    yang berwarna biru (#, menu 1)silahkan kawa-kawan isi dengan alamat situs yang diinginkan dan juga Nama  menunya...........

    Selamat Mencoba.....


    Artikel Terkait

    Tidak ada komentar:

    Posting Komentar