Membuat icon menu animasi di blog - JQUERY

saya jalan2 lagi ke blog orang, eh ternyata liat icon animasi yang keren bisa di buat di blog, tapi ini dari JQUERY.

Kelebihan : Tampilannya kren
Kekurangannya : mungkin membuat blog sedikit lambat, tp jgn kawatir anda bisa mempercepat loading blog anda dengan menggunakan cara ini 15 Cara Optimasi Blog Agar Tampil Lebih Cepat

karna menurut saya lebih banyak untungnya saya coba share untuk teman teman blogger semua

* Login ke Blogger lalu masuk ke "Rancangan" -> "Edit HTML"
* paste kode dibawah ini dibawah </body>

<script src='http://motaro44.freetzi.com/motaroquery.js' type='text/javascript'/>
<script src='http://motaro44.freetzi.com/interfacenyamotaro.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(
function()
{
$(&#39;#dock&#39;).Fisheye(
{
maxWidth: 50,
items: &#39;a&#39;,
itemsText: &#39;span&#39;,
container: &#39;.dock-container&#39;,
itemWidth: 90,
proximity: 90,
halign : &#39;center&#39;
}
)
}
);

</script>

<style type='text/css'>
.dock {
position: relative;
height: 50px;
padding-left:0px;
margin-top:50px;

}
.dock-container {
position: absolute;
height: 50px;
padding-left: 20px;

}
a.dock-item {
display: block;
width: 60px;
color: #adf558;
position: absolute;
top: 20px;
text-align: center;
text-decoration: none;
font: 14px Arial, Helvetica, sans-serif;
}

.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}

.dock-item span {
display: block;
padding-left: 20px;
}
</style>

<div class='dock' id='dock' style='display: block;'>
<div class='dock-container' style='left: -7.48972px; width: 814.979px;'>
<a class='dock-item' expr:href='data:blog.homepageUrl' style='width: 90px; left: 0px;'><img alt='home' src='http://1.bp.blogspot.com/_rJyl7MtUcdY/TAyA07avoHI/AAAAAAAAAlA/3TtIsI-_vBg/s320/homeijo.png'/><span style='display:block;'>Home page</span></a>

<a class='dock-item' href='link 2' style='width: 90px; left: 90px;'><img alt='Gi���¡���»�¯�¿�½i thi���¡���»�¯�¿�½u' src='http://i342.photobucket.com/albums/o433/bkprobk/about.png'/><span style='display:block;'>Introduce</span></a>

<a class='dock-item' href='link 3' style='width: 90px; left: 180px;'><img alt='D���¡���»�¯�¿�½ch v���¡���»���¥' src='http://1.bp.blogspot.com/_rJyl7MtUcdY/TAyC6lEcjKI/AAAAAAAAAlo/0BVFRFGBsi8/s320/dichvuijo.png'/><span>Service</span></a>

<a class='dock-item' href='link 4' style='width: 90px; left: 270px;'><img alt='Site ����¯�¿�½������£ thi���¡���º���¿t k���¡���º���¿' src='http://3.bp.blogspot.com/_rJyl7MtUcdY/TAyCmgAWQ8I/AAAAAAAAAlg/8RPcu3vqLOU/s320/sanphamijo.png'/>Customer</a>

<a class='dock-item' href='link 5' style='width: 90px; left: 360px;'><img alt='Template' src='http://i342.photobucket.com/albums/o433/bkprobk/template.png'/><span style='display: block;'>Template</span></a>

<a class='dock-item' href='link 6' style='width: 90px; left: 450px;'><img alt='history' src='http://1.bp.blogspot.com/_rJyl7MtUcdY/TAyCUc_lnwI/AAAAAAAAAlY/qAel-yDD4eA/s320/historyijo.png'/><span style='display:block;'>Advisor</span></a>

<a class='dock-item' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' style='width: 134.979px; left: 540px;'><img alt='calendar' src='http://2.bp.blogspot.com/_rJyl7MtUcdY/TAyBoe8GjcI/AAAAAAAAAlI/6m2y3iHvTyQ/s320/doitacijo.png'/><span style='display:block;'>RSS</span></a>

<a class='dock-item' href='link 8' style='width: 140px; left: 674.979px;'><img alt='rss' src='http://2.bp.blogspot.com/_rJyl7MtUcdY/TAyCGGEDiQI/AAAAAAAAAlQ/nCHjMSTA3y4/s320/emailijo.png'/><span style='display:block;'>Contact</span></a>

</div>
</div>

Terakhir, jangan lupa simpan template!
taraaa.... dah jadi deh simple kan...
untuk pertanyaan silahkan komen aja ea... hihi

Sumber : MOTARO BLOG