Tutorial Blog

Cara Membuat Menu Vertikal (Vertical) Di Blog

menu blog vertikal blueprev

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 :

blueprev blue1.gif
blue2.gif
greenprev green1.gif
green2.gif
redprev red1.gif
red2.gif
pinkprev pink1.gif
pink2.gif
blackprev 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???? 😀

Bagikan Postingan Ini:

Avatar

Bloggermyid

Bloggermyid.com merupakan sebuah platform online yang menyajikan beragam informasi teknologi, tips dan tutorial seputar komputer, internet, jaringan dan android. Serta informasi menarik lainnya mengenai perkembangan teknologi terkini.


Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

Eksplorasi konten lain dari Bloggermyid

Langganan sekarang agar bisa terus membaca dan mendapatkan akses ke semua arsip.

Lanjutkan membaca