Cara Membuat Menu Vertikal

Posted by Zulfan Heri on Minggu, 30 Oktober 2011

  1. Masuk ke bagian Edit HTML
  2. Tambahkan kode css berikut ini sebelum kode ]]></b:skin>
    .clearit { 
        margin: 0; 
        padding: 0; 
        height: 0; 
        clear: both; 
    }

    /* BUBBLE PLASTIC VERTICAL MENU */
    .bubplastic.vertical { 
        width: 150px; 
        margin: 0px; 
        padding: 0px; 
        display: block; 

    .bubplastic.vertical ul { 
        display: block; 
        list-style: none; 
        margin: 0; 
        padding: 0; 

    .bubplastic.vertical ul li { 
        display: block; 
        float: left; 
        width: 100%; 
        margin: 0; 
        padding: 0; 
        background: transparent url(http://lh6.ggpht.com/_7Y9pl24WpQY/TCTaMf6oL6I/AAAAAAAAEOU/WMlVDrN8s8M/bg-bubplastic-button_thumb%5B5%5D.gif) top left no-repeat; 
    }
    .bubplastic.vertical ul li a { 
        display: block; 
        margin: 0; 
        width: 100%; 
        padding-left: 15px; 
        text-transform: uppercase; 
        font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif; 
        font-size: 70%; 
        color: #FFFFFF; 
        text-decoration: none; 
        background: transparent url(http://lh6.ggpht.com/_7Y9pl24WpQY/TCTaMf6oL6I/AAAAAAAAEOU/WMlVDrN8s8M/bg-bubplastic-button_thumb%5B5%5D.gif) top left no-repeat; 
    }
    .bubplastic.vertical ul li a span.menu_ar { 
        display: block; 
        margin: 0; 
        width: 100%; 
        height: 22px; 
        padding-top: 5px; 
        padding-right: 15px; 
        background: transparent url(http://lh6.ggpht.com/_7Y9pl24WpQY/TCTaMf6oL6I/AAAAAAAAEOU/WMlVDrN8s8M/bg-bubplastic-button_thumb%5B5%5D.gif) top right no-repeat; 
        cursor: pointer; 
    }
    /* BLUE HOVER */ 
    .bubplastic.blue ul li a:hover, 
    .bubplastic.blue ul li.highlight a { 
        background: transparent url(http://lh4.ggpht.com/_7Y9pl24WpQY/TCTaTTyG38I/AAAAAAAAEOk/s7mSQh3v_oo/bg-bubplastic-h-blue_thumb%5B3%5D.gif) top left no-repeat; 

    .bubplastic.blue ul li a:hover span.menu_ar, 
    .bubplastic.blue ul li.highlight a span.menu_ar { 
        background: transparent url(http://lh4.ggpht.com/_7Y9pl24WpQY/TCTaTTyG38I/AAAAAAAAEOk/s7mSQh3v_oo/bg-bubplastic-h-blue_thumb%5B3%5D.gif) top right no-repeat; 
    }
  3. Simpan Template.
  4. Masuk Ke Elemen Halaman.
  5. Klik Tambah Gadget pada bagian sidebar.
  6. Pilih yang HTML/Javascript, kemudian masukkan kode berikut kedalamnya :
    <div class="menu bubplastic vertical blue"> 
        <ul> 
            <li><span class="menu_r"><a href="http://miscah.blogspot.com/" target="_self"><span class="menu_ar">About</span></a></span></li> 
            <li><span class="menu_r"><a href="http://miscah.blogspot.com/" target="_self"><span class="menu_ar">Contact Us</span></a></span></li> 
            <li><span class="menu_r"><a href="http://miscah.blogspot.com/" target="_self"><span class="menu_ar">Advertiser</span></a></span></li> 
            <li><span class="menu_r"><a href="http://miscah.blogspot.com/" target="_self"><span class="menu_ar">Banner</span></a></span></li> 
            <li><span class="menu_r"><a href="http://miscah.blogspot.com/" target="_self"><span class="menu_ar">Link</span></a></span></li> 
        </ul> 
        <br class="clearit" /> 
    </div>
  7. Simpan.

Yang harus diganti adalah tulisan yang berwarna hijau dan merah. Selamat mencoba !

Penulis : Zulfan Heri ~ Share All Tutorial, Tips, Tricks About Blog and SEO

Artikel Cara Membuat Menu Vertikal Ini Diposting Oleh Zulfan Heri. Terimakasih Atas Kunjungan Anda Serta Kesediaan Anda Membaca Artikel Ini. Kritik Dan Saran Dapat Anda Sampaikan Melalui Kotak Komentar. Kebijakan Dan Privasi

:: Dodol Blog ::

{ 0 comments... Read Them Below or add one }

Posting Komentar

Silahkan sahabat berkomentar sesuai dengan artikel postingan di atas. Apabila ada postingan yang rusak atau tidak bisa terbaca mohon beritahu di Komentar ini.Trimakasih telah berkunjung & berkomentar

Penting... Maaf,Tidak Diizinkan Memberikan Atribut Pada Komentar Anda..