Membuat menu animasi dengan CSS ~ TEKNOLOGI BISNIS & HIBURAN

Thursday 19 April 2012

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>