Cry Ant Crew
Would you like to react to this message? Create an account in a few clicks or log in to continue.


We are Just Computer Freaker
 
IndeksPencarianLatest imagesPendaftaranLogin
Login
Username:
Password:
Login otomatis: 
:: Lupa password?

 

 Membuat Menu Vertikal (Vertical)

Go down 
PengirimMessage
xLUTFIx
New Member
New Member



Jumlah posting : 36
Join date : 07.10.12

Membuat Menu Vertikal (Vertical) Empty
PostSubyek: Membuat Menu Vertikal (Vertical)   Membuat Menu Vertikal (Vertical) EmptyTue 30 Oct 2012 - 17:02



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???? Bahagia

Sujud Merokok Tembak Takut lol! Belajar Tembak Sleep cheers drunken Lompat
Kembali Ke Atas Go down
 
Membuat Menu Vertikal (Vertical)
Kembali Ke Atas 
Halaman 1 dari 1
 Similar topics
-
» Cara Membuat Menu Tab View
» Cara Membuat Dropdown Menu
» Cara Membuat Menu DTree
» Membuat Progres Bar di VB6
» Membuat Form Transparant di VB6

Permissions in this forum:Anda tidak dapat menjawab topik
Cry Ant Crew :: Information Technology :: Design & Art :: Animation-
Navigasi: