• Selasa, 26 Juni 2012

    Cara membuat Menu Vertikal di Blog


    Cara buat Menu Vertikal Di Blog
     Membuat Menu Vertikal cara membuatnya adalah sbb :

    1. Login ke blogger trus pilih "Layout-->Edit HTML"
    2. Silkan salin/ copy dan masukkan kode HTML berikut sebelum kode ]]> atau sebelum kode . Pokoknya ditaruh di dalam Barisan kode CSS, ini kodenya :
    .glossymenu, .glossymenu li ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
    border: 1px solid black;
    }
    .glossymenu li{
    position: relative;
    }
    .glossymenu li a{
    background: white url('http://kendhin.890m.com/blog/vertical/blue1.gif') repeat-x bottom left;
    font: bold 12px Verdana, Helvetica, sans-serif;
    color: white;
    display: block;
    width: auto;
    padding: 5px 0;
    padding-left: 10px;
    text-decoration: none;
    }
    .glossymenu li ul{
    position: absolute;
    width: 190px;
    left: 0;
    top: 0;
    display: none;
    }
    .glossymenu li ul li{
    float: left;
    }
    .glossymenu li ul a{
    width: 180px;
    }
    .glossymenu li a:visited, .glossymenu li a:active{
    color: white;
    }
    .glossymenu li a:hover{
    background-image: url('http://kendhin.890m.com/blog/vertical/blue2.gif');
    }

    * html .glossymenu li { float: left; height: 1%; }
    * html .glossymenu li a { height: 1%; }


    Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini :
    .glossymenu li a{
    background: white url('http://kendhin.890m.com/blog/vertical/red1.gif') repeat-x bottom left;

    dan
    .glossymenu li a:hover{
    background-image: url('http://kendhin.890m.com/blog/vertical/red1.gif');


    Pilihan Warna menu vertikal :


    green1.gif
    green2.gif
    red1.gif
    red2.gif
    pink1.gif
    pink2.gif
    black1.gif
    black2.gif


    3. Kemudian di save.
    4. Lalu pergi ke menu "Page Elements"
    5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:


    Kode yang berwarna merah adalah linknya dan yg warna biru adalah teks yang ditampilkan. Kalau mau menambahkan menu tingal buat lagi kode seperti dlm kurung di bawah ini.
    (
  • http://getebook.co.cc">judul yg diinginkan
  • )


    Sumber : http://zamrudblog.blogspot.com/2012/06/membuat-menu-vertikal-di-blog.html

    0 komentar:

    Posting Komentar

    Silahkan beri komentar dengan bahasa yang santun, tidak porno dan jangan melanggar sara, terima kasih.

    Terima Service tv panggilan di Sukabumi - 085863334821