Cara Membuat Menu Vertikal (Vertical) Di Blog

Menu horizontal, nha kini mari kita mencoba menciptakan hidangan vertikal. Menu vertikal ini cocok kalau dipasang di sidebar alasannya ialah bentuknya berjajar sevara vertikal (ya iyalah). Contohnya menyerupai gambar disamping itu. Beginilah cara membuatnya :

1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan arahan berikut sebelum kode ]]></b:skin> atau sebelum arahan </style> . Pokoknya ditaruh di dalam Barisan arahan 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 menentukan warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif). Ganti arahan tersebut dengan pilihan warna dibawah ini. Misal kalau kau ingin menentukan hidangan warna merah maka kodenya menjadi menyerupai 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 hidangan 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 hidangan "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" lalu masukkan arahan berikut kedalamnya:

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://tipsmanfaatku.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 ialah linknya dan yg warna biru ialah teks yang ditampilkan. Kalau mau menambahkan hidangan tingal buat lagi arahan menyerupai yg berkedip2 dibawahnya.

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

Berlangganan artikel terbaru via email (GERATIS):

0 Response to "Cara Membuat Menu Vertikal (Vertical) Di Blog"

Post a Comment

Tata Tertib Berkomentar di Blog Assalam Link :
1. Kalimat/Kata-kata Tidak Mengandung Unsur (SARA).
2. Berkomentar Sesuai dengan Artikel Postingan.
3. Dilarang Keras Promosi Apapun Bentuk dan Jenisnya.
4. Link Aktif/Mati, Tidak Dipublikasikan dan Dianggap SPAM.
5. Ingat Semua Komentar Dimoderasi

Terimakasih Atas Pengertiannya.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Lihat Juga Di Sini & Terima Kasih Sudah Melihatnya
Loading...

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Loading...