CARA MEMBUAT MENU VERTIKAL KEREN DI BLOGSPOT

OK, Langsung aja ya gan menuju pembahasan kita, ga usah basa basi lagi,


1.Masuk Blogger.com -->Klik Rancangan -->Pilih tab Edit HTML.
2.Download Template Lengkap Sebelum mengedit template Anda.
3.Beri centang pada kotak Expand Template Widget.
4.Cari kode ]]></b:skin> (untuk mempermudah pencarian tekan tombol F3 dan masukkan kode yang dicari pada kolom pencarian)
5.Selanjutnya taruh kode dibawah ini tepat di atas kode ]]></b:skin> yang baru anda temukan tadi.



.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://i580.photobucket.com/albums/ss241/nobhita/green1.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://i580.photobucket.com/albums/ss241/nobhita/green2.gif');

}


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

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

6.Save template.Setelah anda menyimpannya anda harus kembali lagi pada halaman Rancangan ->Pilih dan klik Tambah Gadget di lokasi yang anda inginkan,selanjutnya pilih dan klik HTML/JavaScript dan masukkan kode dibawah ini kedalamnya.

<ul id="vertical menu Edit By antok" class="glossymenu">

<li><a href="/">Home</a></li>

<li><a href="http://roningasinanblog.blogspot.com/">Ubah dgn judul Menu</a></li>

<li><a href="http://roningasinanblog.blogspot.com/">Ubah dgn judul menu</a></li>

<li><a href="http://roningasinanblog.blogspot.com/">Ubah dgn Judul Menu</a></li>

</li>

</ul>

7.Simpan dan lihat hasilnya untuk Langkah-langkah membuat menu vertikal pada blog.
Ket:Untuk kode dengan warna merah ganti dengan Url/link halaman yang anda tuju dan kode dengan warna biru di atas boleh anda edit untuk menyesuaikan tampilan halaman blog. 

Ditulis Oleh : Unknown // 21:25
Kategori:

0 komentar:

Post a Comment

Tinggalkan komentar anda disini ..... !