TRANSLATE THIS PAGE

English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified

Sunday, October 17, 2010

CARA MEMBUAT MENU VERTIKAL


sekarang mari kita mencoba membuat menu vertikal. Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar secara vertikal . Contohnya seperti gambar disamping itu. Beginilah cara membuatnya :

1. Login ke blogger trus pilih "Design-->Edit HTML"
2. Masukkan kode dibawah ini diatas kode ]]></b:skin>












.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7ljns0h8IQxpyacYmuZ5eKF-voKJmBAOMyLgJAzAZqULmv_mRzkky5m_r9cLrBeYPRDOdnk_pJ62kC37G3dOfr6saPRJVQmWiX0jxLQJl4DzycDrQJoHpZxvh4n8vfCUtMOCEQkpZbZ4/s1600/img02.jpg') repeat-x bottom left;
font: bold 11px 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://1.bp.blogspot.com/__LzE4TwGFEU/S7w-ugMg0gI/AAAAAAAAAcM/Y9oT4uhTXjw/s320/385512.jpg');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }



3. Kemudian di save.
4. Lalu pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:


<ul id="verticalmenu" class="glossymenu">
<li><a href="/">HOME</a></li>
<li><a href="http://rodiet.blogspot.com" target="new">READ MORE</a></li>
<li><a href="http://ppkn2.blogspot.com" target="new">RAR BERPASSWORD</a></li>
<li><a href="http://dadiramuan.blogspot.com" target="new">FILE RAR</a></li>
<li><a href="http://dadivirus.blogspot.com" target="new">BLACK AND WHITE</a></li>
<li><a href="http://manjania.blogspot.com" target="new">MARQUEE</a></li>
<li><a href="http://bio212.blogspot.com" target="new">UNIVERSAL</a></li>
<li><a href="http://rodiet.blogspot.com" target="new">READ MORE</a></li>
<li><a href="http://ppkn3.wordpress.com" target="new">DEVINISI</a></li>
<li><a href="http://pmp2.wordpress.com" target="new"> WORDPRESS</a></li>

</ul>




Artikel Lainnya Dibawah ini



0 comments:

SILAHKAN TINGGALKAN KOMENTAR DISINI NO SPAM..NO PORN... KRITIK DAN SARAN YANG MEMBANGUN SANGAT DIBUTUHKAN DAN BERMANFAAT.KOMENTAR YANG MENGHUJAT ATAU DENGAN KATA KATA KOTOR AKAN TERHAPUS DENGAN SENDIRINYA TERIMA KASIH

KOMENTAR TERAKHIR


MY FRIEND


ARAHKAN MOUSE KE IMAGE AKAN BERHENTI

Blogger templates


MAU SEPERTI DIATAS KLIK DISINI

CATEGORY

POSTING TERBARU

 
Back To Top - GURU PKn SMP PGRI 02 BATU - Template By Blogger Edited By Savalia