Req Najiyah: tutorial navigation touch hover image

Hai! sebenernya Najiyah udah request ini duluuuuuu..... banget! tapi, ya.... bisanya sekarang... hehe.... read more yuk!

Kode>>>

<style type="text/css">
#side{
margin-right:-1px;
width:250px;
height:150px;
overflow:hidden;}
#text
{text-align:center;
width:250px;
height:200px;
padding:5px;
overflow:auto;
color:#363636;
background-color:#fff;}
#picture
{margin-left:-280px;
width:280px;
height:220px;
overflow:hidden;
-webkit-transition: opacity 0.9s linear;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;}
#side:hover #picture
{margin-left:-550px;}
</style>
<table id="side" border="0" cellpadding="0" cellspacing="0" ><tr>
<td><div id="text">
This is pinkie Wonderland<br>

<div class="sidebar2">
<center>
<style>
.kevo{
width:50px;
padding:4px;
margin:2px;
background:#FFC0CB;
font:8px tt;
text-align:center;
Text-decoration:none;
color:#888;
text-transform:uppercase;
display:inline-block;
height:28px;
padding-top:25px;
-moz-border-radius: 1em 4em 1em 4em; border-radius: 1em 4em 1em 4em;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
transform: rotate(0deg) ;
-webkit-transform: rotate(0deg) ;
-moz-transform: rotate(0deg) ;
-o-transform: rotate(0deg) ;
-ms-transform: rotate(0deg) ;
}
.kevo:hover{transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;
}
@font-face {
font-family:tt !important;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important;
}
</style>


<a class="kevo" onClick="document.getElementById('content').innerHTML=document.getElementById('diari').innerHTML" title="post">entry</a>
<a class="kevo" onClick="document.getElementById('content').innerHTML=document.getElementById('profile').innerHTML" title="owner">about</a>
<a class="kevo" onClick="document.getElementById('content').innerHTML=document.getElementById('tutobies').innerHTML" title="stuff">Stuff</a>
<a class="kevo" onClick="document.getElementById('content').innerHTML=document.getElementById('exchange').innerHTML" title="link">Linky</a>
<a class="kevo"
document.getElementById('content')href="http://www.blogger.com/home">D'board</a>
<a class="kevo"
document.getElementById('content')href="http://www.blogger.com/follow-blog.g?blogID=Your Blog ID">Follow</a>
</div></center>
<br></center></div>
</td>
<td><div id="picture"><img src="http://41.media.tumblr.com/7cac0bb1c22312dab6ac977ecc8dfe88/tumblr_mgfmtwxxqy1r2r1gko1_500.png"></div></td>
</tr></table>
</div><br>

Hehe... tinggal kamu edit-edit lagi ya Najiyah! ^^