Jumat, 19 April 2013

Membuat Menu Vertikal

Filled under:

Sebelumnya kita pernah membahas tentang membuat menu horizontal, nha sekarang mari kita mencoba membuat menu vertikal. Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal (ya iyalah). Contohnya seperti gambar disamping itu. Beginilah cara membuatnya :

1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Pokoknya ditaruh di dalam Barisan kode CSS deh.

.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 :
blue1.gif
blue2.gif
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:
<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>

Kode yang berwarna merah adalah linknya dan yg warna biru adalah teks yang ditampilkan. Kalau mau menambahkan menu tingal buat lagi kode seperti yg berkedip2 dibawahnya.

Dah gitu aja. Gampang kan???? :D

3 komentar:

  1. "Buat Anda Yang Pecinta "" GAME "",
    BOSAN !!!!!

    Anda Bermain "" GAME "" Yang Tidak Bisa Menghasilkan Uang...
    Kami Disini Memberikan "" TIPS "" Buat Anda, Agar Anda Tidak "" Menyesal "",
    Karena "" GAME "" Ini Dapat Berikan Uang Yang Banyak Kepada Anda, Bahkan Sampai ""PULUHAN JUTA""...
    Bahkan "" GAME "" Ini, Ada ""PROMO BUAT ANDA SEMUANYA"", Pengen Tahu "" GAME "" Apa Itu ???
    (PIN BBM : 7AC8D76B)"













    BalasHapus
  2. www,s1288poker,com: Bandar Taruhan Poker online yang menyediakan layanan mirip dengan salah satu permainan situs jejaring sosial yang telah banyak dimainkan dan diminati di Indonesia dan kami. Melakukan semua trasaksi menggunakan mata uang rupiah, Hanya dengan Minimal Deposit Rp.10.000 Saja dan Minimal Withdraw Rp.20.000, anda sudah dapat menikmati permainan poker dari kami. (PIN BBM : 7AC8D76B)













    BalasHapus
  3. S1288poker situs agen permainan Kartu Remi & Kartu Domino online uang asli Terbaik dan Terpercaya di Indonesia. Kami hadir untuk para pencinta permainan judi kartu online uang asli dengan berbagai Kemudahan dan Keamanan dalam bertransaksi. Sekarang bermain judi kartu gak pake pusing lagi, Anda cukup DAFTAR->DEPO->MAIN dan dapatkan berbagai bonus berlimpah dari kami. Permainan seru TANPA BOT, TANPA ADMIN, 100% MEMBER VS MEMBER dengan Pelayanan Transaksi 24 jam Deposit & Withdraw cepat dan aman hanya di S1288poker...yang terbaik untuk anda (PIN BBM : 7AC8D76B)













    BalasHapus

silahkan berkomentar dengan baik di blog ini.
blog gratisan update memakai sistem dofollow