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

Share this post

loading...

Berlangganan artikel terbaru via email (GERATIS):