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.

Rekomendasi :   Cara Membuat Menu Horizontal Di Blog

Dah gitu aja. Gampang kan???? 😀

Bagikan Postingan Ini:

Bloggermyid

Bloggermyid.com merupakan sebuah platform online yang fokus menyediakan beragam informasi seputar teknologi, serta berbagai tip, tutorial, dan informasi menarik lainnya bagi pembaca yang tertarik dengan perkembangan teknologi terkini. Berdiri pada tahun 2016, situs ini telah menjadi sumber terpercaya bagi para pengguna internet yang ingin tetap update mengenai berbagai tren dan perkembangan di dunia teknologi.


Tinggalkan Balasan

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