Rabu, 08 Juni 2011

Membuat menu Vertical pada Blog

Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar secara vertikal. Contohnya seperti gambar disamping itu. Cara membuatnya :


1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kede berikut sebelum kode </head>

<script src='http://blog.superinhost.com/vertical/verticalmenu.js' type='text/javascript'/>

3. Setelah itu masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Taruh di dalam Barisan kode CSS.
.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://blog.superinhost.com/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://blog.superinhost.com/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 ingin memilih menu warna merah maka kodenya menjadi seperti ini :
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;
dan

.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/red.gif');

4. Kemudian di save.

5. Lalu ke menu "Page Elements"

6. Pilih "Add Page Elements -->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 tinggal buat lagi kode <li><a href="URL blog anda">Free Ebook</a></li>. begitu seterusnya,kalau mau menunya nambah.ok ... sip kan..

Selamat mencoba

















assalamualaikum,


selamat datang di rumah saya, terima kasih saya kepada anda karena mau mampir ke sini.
cuma satu pesan saya kepada anda,sebelum memasuki gerbang blog ini.... anda boleh menghina, mengejek blog ini,apapun itu,semua saya terima...tapi mohon tinggallkan komen dan beri saya saran atau pun tips... karena saya pun masih belajar, maklum mas, new bie....heeeeeeee....he.......

terima kasih , assalamualaikum.......

                                                 arif kurnia