Membuat Menu Vertikal Unik

BROWSE

Home Edit Edit Edit Edit Edit

Dalam Artikel sebelumnya saya telah mejelaskan tentang pembuatan menu vertikal, dan pada kesempatan kali ini saya juga akan menjelaskan tentang pembuatan menu vertikal tapi untuk kali ini tampilannya saya buat semenarik mungkin,,

Setelah melihat contoh di atas apakah anda tertarik untuk membuat nya,

Oke!! Langsung saja ikuti langkah-langkah dibawah ini :

Klik Elemen Halaman - Pilih Tambah Gadget - Klik HTML/Javascript - Copy paste kode Dibawah ini,, Setelah itu paste kan di halaman HTML/Javascript :

Ctt : Jika Anda Ingin Tidak Ada Judul di halaman HTML/javascript, isikan saja pada judul nya dengan kode

<style type="text/css">

/* Widget By space-blogg.blogspot.com */

#ddblueblockmenu{

border: 0px solid #000000; /*Main Border Color */

border-bottom-width: 0;

width: 100%;

}

#ddblueblockmenu ul{

margin: 0;

padding: 0;

list-style-type: none;

font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;

}

#ddblueblockmenu a{

display: block;

padding: 3px 0;

padding-left: 9px;

width: 94%; /*Widget By space-blogg.blogspot.com*/

text-decoration: none;

color: #ffffff;

background-color: #9966CC;

border-bottom: 3px solid #CCFFFF;

border-left: 10px solid #1958b7;

list-style-type:none;

}

* html #ddblueblockmenu a{

width: 94%;

width: 94%; /*Widget By space-blogg.blogspot.com*/

}

#ddblueblockmenu a:hover {

background-color: #FF0000; /*Widget By space-blogg.blogspot.com*/

border-left-color: #33FFCC; /*Widget By space-blogg.blogspot.com*/

}

#ddblueblockmenu div.menutitle{

color: #ffffff; /* Title Font Color */

border-bottom: 0px solid black;

padding: 1px 0;

padding-left: 5px;

background-color: #00CCCC; /*Widget By Wwww.kikiyo.co.cc*/

font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;

}

/* Widget By Wwww.kikiyo.co.cc */

.style1 {color: #00FF00}

.style2 {color: #FFFF00}

.style3 {

color: #0066FF;

font-weight: bold;

font-size: 18px;

}

</style>

<div id="ddblueblockmenu">

<div class="style3">BROWSE</div>

<ul>

<a href="http://www.Alamat-blog.Blogspot.com" target="_blank">Home</a>

<a href="http://www.Alamat-blog.Blogspot.com" target="_blank">Edit</a>

<a href="http://www.Alamat-blog.Blogspot.com" target="_blank">Edit</a>

<a href="http://www.Alamat-blog.Blogspot.com" target="_blank">Edit</a>

<a href="http://www.Alamat-blog.Blogspot.com" target="_blank">Edit</a>

<a href="http://www.Alamat-blog.Blogspot.com" target="_blank">Edit</a>

</ul>

</div>

Ket :

1.Tulisan yang berwarna biru Ganti dengan nama Blog anda atau Alamat Url Tujuannya..

2.Tulisan yang berwarna kuning Ganti dengan Nama Link tujuan atau nama judul

3.Tulisan Edit dapat anda ganti dengan Nama atau judul link tujuan anda 

Artikel Terkait:

Posted in: Tutorial Blog