Halaman

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


    Cara Membuat Menu Horizontal Bercabang Pada Blogger

    Kali ini saya membahas tentang cara membuat menu horizontal pada blogger dan kalau rekan-rekan cari di google search mungkin sudah banyak artikel tentang menu horizontal ini.
    Tapi saya membahas ini mungkin rekan-rekan ada yang belum tahu caranya membuat menu horizontal bercabang ini, mari kita ikuti cara membuatnya.

    Berikut ini gambar contoh dari menu horizontal bercabang




    Cara Membuat menu Horizontal Bercabang

    1.     Login ke account blogger anda
    Pilih Rancangan -> Tataletak -> Edit HTML

    cari kode berikut:

    ]]></b:skin>


    2.     Di bagian atas kode tersebut masukkan kode berikut





    4.     Klik tombol "Simpan Template"

    5.     Buka halaman  "Elemen Halaman"

    6.     Pada Elemen header , klik " Tambah Gadget"

    7.     Pada kotak dialog html/javascrpit masukkan kode html berikut:



    Lihat Demo

    catatan:
    Pada bagian : href="#" , tanda # anda ganti dengan url tujuan anda
    misalnya:
    http://trik-blogger-andreas.blogspot.com
    atau
    http://trik-blogger-andreas.blogspot.com/2010/07/cara-memasang-signature-pada-setiap.html
    teks setelah tanda # seperti Home, Menu 1, dst bisa anda ganti dengan teks sesuai dengan keinginan anda.

    9.     Simpan perubahan yang anda buat, jika tidak ada masalah maka akan tampil menu navigasinya

    Selamat mencoba semoga berhasil.


    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.....