Membuat menu animasi dengan CSS

menu dalam blog memang sangat membantu bagi orang yang membuka blog anda. kakrena dengan adanya menu pembaca bleg anda dapat mencari apa yang pemngunjung mau lihat. selain itu dengan adanya menu pengunjung blog anda dapat mengetahui konten - konten yang da dalam blog anda. tampilan menu dalam blog anda harus diperhatikan. kemenarikan tampilan menu blog anda dapat menarik pengunjung untuk membuka lebih jauh konten blog anda. ini adalah satu cara untuk mempercantik tampilan menu blog anda

• login ke akun blog anda
• masuk ke templates kemudaian pilih edit Html
• masukkan kode dibawah ini sebelum kode ]]></b:skin>

* {
    padding: 0;
    margin: 0;
}

#topBar {
    height: 30px;
    background: #efebd9;
    font-family: Palatino, Times, serif;
    line-height: 30px;
}

#topBar a{
    text-decoration: none;
    color: #544738;
}

#topBar a:hover{
    text-decoration: underline;
}

ul, li {
 margin: 0; padding: 0;
 overflow: hidden;
}

ul li {
 float: left;
 list-style: none;
 margin-right: 1em;
}


/*Fonts*/
@font-face {
    font-family: 'KulminoituvaRegular';
    src: url('kulminoituva-webfont.eot');
    src: local('‚ò∫'), url('kulminoituva-webfont.woff') format('woff'), url('kulminoituva-webfont.ttf') format('truetype'), url('kulminoituva-webfont.svg#webfontHNAi9IoX') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*Anitmation
li a:hover {
-webkit-animation-name: cssAnimation;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease
}
@-webkit-keyframes cssAnimation {
from {
-webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);
}
to {
-webkit-transform: rotate(350deg) scale(1.1) skew(1deg) translate(0px)
}
}
*/

.odd a:hover {
    -webkit-transition:All .5s ease-in-out;
    -moz-transition:All .5s ease-in-out;
    -o-transition:All .5s ease-in-out;
    -webkit-transform: rotate(-10deg) scale(1.2);
    -moz-transform: rotate(-10deg) scale(1.2);
    -o-transform: rotate(-10deg) scale(1.2);
}

.even a:hover {
-webkit-transition:All .5s ease-in-out;
-moz-transition:All .5s ease-in-out;
-o-transition:All .5s ease-in-out;
-webkit-transform: rotate(10deg) scale(1.2);
-moz-transform: rotate(10deg) scale(1.2);
-o-transform: rotate(10deg) scale(1.2);
}

#text h1{
    text-align: left;
    margin-top: 15px;
    margin-left: 10px;
}

#text p{
    font-family: helvetica, sans-serif;
    text-align: left;
    font-size: 12px;
    margin: 10px 0 50px 10px;
    line-height: 20px;
    width: 780px;
   
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
}

* Dan langkah terakhir letakan kode dibawah ini di Gadget kalian di Elemen Laman caranya yaitu:
- Tambah Gadget
- Dan pilih HTML/JavaScript Tambah

 <div id="container">
        <ul id="nav">
            <li class="odd"><a href="http://pradipha.com/">Home</a></li>
            <li class="even"><a href="http://alamat-url">About</a></li>

            <li class="odd"><a href="http://alamat-url">Blog</a></li>
            <li class="even"><a href="http://alamat-url">Contact</a></li>              
        </ul>
      
      
        <div id="work">
        </div></div>

* ganti tulisan berwarna merah dengan alamat url masing masing