Membuat icon menu animasi di blog - JQUERY



haloo semua ..hemz...
Menu yang atraktif pasti lebih disukai daripada menu biasa, salah satunya dengan icon gambar.
Icon Gambar yang sesuai dapat membercantik tampilan blog kita.Tapi bukan cuma sekedar menu biasa! menu kali ini akan membesar jika diekati oleh kursor.
seperti tampilan menu yang aku pakai..
pengen tau cara pembuatannya.. okey
kita bahas disini..

* 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

0 komentar:

:nangis :rate :lebay :hoax :nyimak :hotnews :gotkp :wow :pertamax :lapar :santai :malu :ngintip :newyear
:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n:

Posting Komentar

 
Copyright © Motaro BLog

Selamat Datang

Selamat datang di Kotretan motaro - saya senang Anda berada di sini, dan berharap Anda sering datang kembali. Silakan berselancar di sini dan membaca lebih lanjut tentang artikel kami. Ada banyak hal tentang kami, Anda mungkin akan menemukan sesuatu yang menarik. Selengkapnya tentang kami

Sepintas Tentang Kotretan motaro blog

Nama saya mochamad taufik romdony, saya hanya seorang biasa

Info
chimney