Menu Vertikal Cantik pada Blogspot

Link bar dibuat untuk memisahkan suatu kumpulan link-link yang penting dalam suatu widget. Nah, biasanya link bar juga ada di bawah header. Tapi yang akan kita pahami kali ini adalah link bar atau menu bar yang akan dipasang di sidebar. Cara memasang menu cantik ini juga sangat mudah, hanya butuh pengaturan saja.

Dengan melihat screenshot atau contoh widget ini, apakah anda tertarik untuk membuatnya? Menu ini bisa juga disebut sebagai vertical menu bar. Widget ini dapat membuat blog anda semakin cantik karena tampilan warnanya yang sengaja dibuat ceria. Berikut gambarnya:

Cara Langkah Panduan Trik Tips Tutorial Hack Membuat Memasang Menampilkan Vertikal Vertical tegak link bar Menu Cantik pada Blogspot blogger Lengkap Gratis Terbaru Update 2011

Pemasangannya sangat mudah. Ikuti langkah berikut ini:

  1. Login – Dasbor – Layout/Tata Letak – Elemen Halaman
  2. Klik Add Gadget/Tambah Gadget pada sidebar anda (sangat direkomendasikan)
  3. Kemudian pilih HTML/Javascript
  4. Taruh kode berikut di kolom content:
    <center><div id=”menu”>
    <ul>
    <li><a class=”current” href=”http://blog.umy.ac.id/tutorialblogging/”>home</a></li>
    <li><a href=”http://about.com”>about us</a></li>
    <li><a href=”http://google.com”>Google</a></li>
    <li><a href=”http://wikipedia.com”>Wikipedia</a></li>
    <li><a href=”http://blog.umy.ac.id/tutorialblogging/contact/”>contact us</a></li>
    </ul>
    </div></center>

    <style>

    /* ————————–
    AUTHOR : STYLED MENUS
    URL : http://www.styledmenus.com
    Copyrights by STYLED MENUS
    Widget From http://blog.umy.ac.id/tutorialblogging/
    —————————-*/
    *{
    margin:0;
    padding:0;
    }

    #menu{
    background:url(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXsev4OJbTI/AAAAAAAACBc/0EEtXs7ckkg/s1600/menu_026_bg.jpg) no-repeat;
    width:172px;
    height:191px;
    padding:15px;
    }

    #menu ul{
    list-style:none;
    padding:0 0 0 8px;

    #menu li{
    list-style:none;
    display:block;
    padding:10px 0;
    }

    #menu li a{
    list-style:none;
    display:block;
    background:url(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXseueLX9TI/AAAAAAAACBM/BQCk16wweRQ/s1600/menu_026_b.gif) no-repeat left center;
    color:#ffe991;
    font-weight:bold;
    text-transform:uppercase;
    font-size:11px;
    line-height:1.2em;
    text-decoration:none;
    padding:0 5px 0 25px;
    }

    #menu li a:hover{
    background:url(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXseuzcFbnI/AAAAAAAACBU/joYkQm6Lyns/s1600/menu_026_h.gif) no-repeat left center;
    color:#fff;
    text-decoration:none;
    }

    #menu li .current{
    list-style:none;
    display:block;
    background:url(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXseuzcFbnI/AAAAAAAACBU/joYkQm6Lyns/s1600/menu_026_h.gif) no-repeat left center;
    color:#fff;
    font-weight:bold;
    text-transform:uppercase;
    font-size:11px;
    text-decoration:none;
    padding:0 5px 0 25px;
    }

    #menu li a.current, #menu li a:hover.current{
    background:url(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXseuzcFbnI/AAAAAAAACBU/joYkQm6Lyns/s1600/menu_026_h.gif) no-repeat left center;
    color:#fff;
    text-decoration:none;
    }
    </style>

  5. Klik Simpan

Ganti tulisan berwarna merah dengan data anda dan yang berwarna biru adalah URL gambar, jika anda menginginkan gambar yang berbeda, ganti saja dengan gambar milik anda.

http://blog.umy.ac.id/tutorialblogging/

Be the first to comment

Leave a Reply

Your email address will not be published.


*


Skip to toolbar