cara membuat menu keren di blog

"Html membuat menu keren di blog...........

"ini dya....
"menu ini seperi biasa hanya menggunakan java schrept...........
"taruh dimanapun tak masalah....
"tetapi apabila menurut pendapat saya lebih baik ditaruh bagiann bawah entry....

"Dibawah ini Htmlnya...


<link href="css/style.css" rel="stylesheet" />
<style>
.slide-up-boxes a {
display: block;
height: 130px;
margin: 0 0 20px 0;
background: rgba(215, 215, 215, 0.5);
border: 1px solid #ccc;
height: 65px;
overflow: hidden;
}
.slide-up-boxes h5 {
color: #333;
text-align: center;
height: 65px;
font: italic 18px/65px Georgia, Serif;    /* Vertically center text by making line height equal to height */
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}
.slide-up-boxes a:hover h5 {
margin-top: -65px;
opacity: 0;
}
.slide-up-boxes div {
position: relative;
color: white;
font: 12px/15px Georgia, Serif;
height: 45px;
padding: 10px;
opacity: 0;
-webkit-transform: rotate(6deg);
-webkit-transition: all 0.4s linear;
-moz-transform: rotate(6deg);
-moz-transition: all 0.4s linear;
-o-transform: rotate(6deg);
-o-transition: all 0.4s linear;
}
.slide-up-boxes a:hover div {
opacity: 1;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
}
.slide-up-boxes a:nth-child(1) div { background: #c73b1b url(images/wufoo.png) 17px 17px no-repeat; padding-left: 120px; }
.slide-up-boxes a:nth-child(2) div { background: #367db2 url(images/diw.png) 21px 10px no-repeat; padding-left: 90px; }
.slide-up-boxes a:nth-child(3) div { background: #393838 url(images/qod.png) 14px 16px no-repeat; padding-left: 133px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script><script type="text/javascript" async="" src="//s3.buysellads.com/ac/bsa.js"></script><script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script type="text/javascript" id="_bsap_js_3469a2a501a9e18091036aa0c89f9dcb" src="http://s3.buysellads.com/r/s_3469a2a501a9e18091036aa0c89f9dcb.js?v=1332068400000" async="async"></script>


<div id="page-wrap">

<section class="slide-up-boxes">

<a href="http://altkom.blogspot.com/search/label/Blog?&max-results=5">
<h5>Belajar Blog</h5>
<div>Mengenal Cara Ngeblog dan Membuat Blog Menawan</div>
</a>
<a href="http://altkom.blogspot.com/search/label/Manusia?&max-results=5">
<h5>Manusia</h5>
<div>Lihat Cerita-Cerita Unik Manusia beserta Lingkungannya</div>
</a>
<a href="http://altkom.blogspot.com/search/label/Teknologi?&max-results=5">
<h5>Teknologi</h5>
<div>Lihat Berita-Berita Teknologi Terkini di Dunia</div>
</a>

</section>
</div>


"Perhatian....
"warna merah ganti dengan link blog anda...
"warna biru ganti dengan judul dan tulisan yang ingin anda buat......

"Semoga bermanfaat ..terimakasiiih....