ping fast  my blog, website, or RSS feed for Free free search engine submission

Sabtu, 28 Januari 2012

cara membuat menu vertikal di blog


membuat menu vertikal ini bermaksud atau tujuannya adalah apabila anda ingin menambahkan menu-menu yang menurut anda spesial agar mudah terlihat karena terpampang dengan jelas dan mudah di klik oleh pengunjung blog anda, karena biasanya yang memasang menu vertikal ini adalah blog-blog yang ingin menawarkan sesuatu, jadi menu verikalnya tidak akan banyak, mungkin hanya 4 sampai 5 menu saja.untuk membuat menu vertikal ini, ikuti langkah-langkahnya berikut ini :

1. anda login dulu ke blog anda apabila anda belum masuk

2. copy code di bawah ini dan paste kan sebelum kode ]]></b:skin> atau sebelum kode </style>.

.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%; }

keterangan :
untuk yang saya beri warna biru itu adalah warna background menu nya, dan itu bisa anda ganti sesuai selera anda.
jika sudah selesai anda bisa klik save template

3. sekarang anda klik rancangan, terus klik add gadget atau widget

4. pilih HTML/JavaScript

5. kemudian copy code di bawah ini dan paste kan

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Ipad</a></li>
<li><a href="http://gantatriplex.blogspot.com">Handphone</a></li>
<li><a href="http://gantatriplex.blogspot.com" >Laptop</a></li>
<li><a href="http://gantatriplex.blogspot.com">Free Ebook</a></li>
</ul>

keterangan :
yang warna biru adalah teks yang di tampilkan dan dapat anda ganti sesuai keinginan atau kebutuhan anda
yang warna hijau anda ganti dengan link anda

6. setelah itu klik simpan/save

semoga berhasil....

Tidak ada komentar:

Posting Komentar

Terimakasih saya ucapkan..
karena anda telah memberikan komenter pada artikel ini..
gabung dengan saya di facebook.com >> http://www.facebook.com/ganta.a.tasya
gabung dengan saya di twitter.com >> http://twitter.com/GantaArgaTasya
gabung dengan saya di blorner.com >> http://blorner.com/GATOT12/
gabung dengan saya di Google+.com >> http://plus.google.com/111785983690816699275/posts
gabung dengan saya di digg.com >> http://digg.com/gatots
gabung dengan saya di bloggers.com >> http://bloggers.com/GATOT12
gabung dengan saya di planet-blog.com >> http://www.planet-blog.com/user/6855

Related Posts Plugin for WordPress, Blogger...

 
Design by Gatot Susilo | Bloggerized by Gatot Susilo - Premium Blogger Themes | Best Web Hosting
Facebook Twitter Yahoo! Feeds Myspace