Membuat Menu Chunky CSS3

Menu adalah bagian dari yang terpenting bagi pembuatan web atau blog. tanpa menu jangan harap web atau blog anda disegani oleh pengunjung. Maka dari itu kami akan memberikan suatu cara atau trik Membuat Menu Chunky CSS3 dengan menu tersebut web atau blog anda sedikit banyak terbantu. Akan tetapi sebelum anda melakukan trik tersebut, alangkah baiknya anda lihat dulu demo, agar tau bentuk dan model menunya seperti apa.

D E M O

Setelah anda melihat demonya, kalau anda tertarik dengan Menu Chunky CSS3 saya akan memberikan triknya berikut ini :

Langkah 1

Silahkan Copy Code Css Di bawah ini dan Letakan Di atas Code ]]></b:skin>

#top_navigation {
background : transparent;
width: 800px;
height : 77px;
list-style : none;
margin-top : 7px;
margin-bottom : 11px;
width : 100%;
}
ul.nav {
background : transparent;
width: 800px;
height : 57px;
line-height : 31px;
list-style : none;
padding : 0 10px;
font-size : 14px;
}
ul.nav li {
display : inline;
padding : 0;
background : transparent;
}
ul.nav a {
background : transparent;
height : 30px;
font-size : 16px;
color : #808080;
float : left;
padding : 11px 19px 11px 16px;
text-decoration : none;
border-top: 1px solid #252525;
border-bottom : 4px solid #252525;
border-left : 1px solid transparent;
border-right : 1px solid transparent;
border-radius : 4px;
-moz-border-radius : 4px;
-webkit-border-radius: 4px;
}
ul.nav a:hover {
background : #252525;
border-top : 1px solid #252525;
border-bottom : 4px solid #000;
border-left : 1px solid #252525;
border-right : 1px solid #252525;
color : #FFF;
padding : 11px 19px 11px 16px;
border-radius : 4px;
-moz-border-radius : 4px;
-webkit-border-radius: 4px;
}

Langkah 2
Simpanlah Templates anda yang baru saja ditambahkan CSS3

Langkah 3
Copy Code HTML Di bawah ini dan Letakan Di Add Gadget ->> HTML/Javascript

<div id="top_navigation">
<ul class="nav">
<li><a href="#"> Home </a></li>
<li><a href="#"> Your Blog </a></li>
<li><a href="#"> About You </a></li>
<li><a href="#"> More stuff </a></li>
<li><a href="#"> Contact </a></li></ul></div>

Langkah 4
Sampai disini dulu trik kali ini selamat mencoba

&lt;p&gt;Your browser does not support iframes.&lt;/p&gt;