Demonya bisa dilihat disini
Cara membuatnya :
1. Login blogger
2. Rancangan, Edit Html
3. Cari kode ]]></b:skin>
Dan Simpan kode berikut diatasnya :
/* ---------------
Menu navigasi CSS Mac Dock with jQuery
---------------------------------- */
.dock {
position: relative;
height: 50px;
text-align: center;
}
.dock-container {
position: absolute;
height: 50px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVrIiyJzJ5CebBw4yoWRjOqFNT4y-3HGbAB51ApszTcN0eTmmOpbvfWUtsfHoo8PlsWuPEya71IrSduFbHt0zLZ8aquqsqfGemAosww5ZT43sqTFTDDh2zTov7_S-2tFz2FIppe3uoiMU/s1600/dock-bg2.gif);
padding-left: 20px;
}
a.dock-item {
display: block;
width: 40px;
color: #000;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
.dock-item span {
display: none;
padding-left: 20px;
}
dan simpan script berikut diatas kode </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://kangdadang.googlecode.com/files/interface.js"></script>
Selanjutnya simpan script berikut diatas kode </body>
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);
</script>
Cara pemanggilannya pada Html :
<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUpYtBsWmUBilQQNg_d6HaELpRh_zX5bmTjx2xdGnoh8heVl_uFVFWlRq3vqvNbDIy05-IHKEwb3XqWWTgxTeu3kNKUY1R2nDHR8kk2o_G7KwmzqTYLhbvv2CHyEXReJeL3DahqZvdZPM/s1600/home.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCLV-BfHf1Wuq1GWK6LXyqTjdH7CGdyx5rLqaIWkU4bpsmVKwHY843z9Wo9nUbspvaKdWC8yLxfTI8Rs_R6MCC_jj-10czUSeFZdyo81wqOHA1LwOdd_wQOBSeb3cc1q3TejYUaDdX9iU/s1600/email.png" alt="contact" /><span>Contact</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8cGKRPEnEB2Aa-BGFuCDdb7-LznPwz31q1oB3mTJQUhkmZjlk1hhm2vfzOKzEfkb2XnWEoSlS5-64m7yC18kKhTkj47i0MwSBEVrA2vDd5Y_4RcmNIvXZUPZnfPLAIaZwjWW-l-Iag6c/s1600/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-pxJp_NKIyjgrOSoRSs81Yns1fSpLuQpw_AO3Evb6OUYgCsov7QXZWZFNOexhxzybMSITv9ftQmvW-P5s73rbCXfOVXRkOvsaVH4mkDBhx15XGUufOdw-gSicKMYcBJXRxmaIxtRbbTw/s1600/music.png" alt="music" /><span>Music</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig5VCncWU1_qcOM8V2pmLEnV__gXCM8sfJgAY0ulPuNZ-yuuQrHpQrT0zfHVUJSWoaqLP15Ox9oMxIp92QvMx9It-lHVokt473sTJwOL4nvWKTdhIRR-SzBmcw8mQyIwNNmGz2LkwaVJk/s1600/video.png" alt="video" /><span>Video</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEHDR6OOVBCRWQKbwT35odCJqzH07Kz7H1VKb-SBOoirxmjIz8vadkq1ES3A29on_k_OqSVnDIVlR_fiXqY5juvTkD2iCL9bmQSOiSvuFWyifNRjhuXMjpV5jJLNwgAujyZFwQVGcW0OY/s1600/history.png" alt="history" /><span>History</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi16v0zGELBsmUMJj3doNZCL0yUr0VsyZgPqTOJ4987c1b9ADYPHqmJ2lLytr5rSQ6eQ3074hx-OCBIbZoydEs1lrbq6p-SufH1oG2JPbZs8GxqBiy7Q3_XkxAWFNbDhTmHqov5G3wQ7ko/s1600/calendar.png" alt="calendar" /><span>Calendar</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv6xW_76z-3srWDUQzLotjuK8H7VmmhNlVVURevGCW9sx2wLqXP95e8WbH1EOSOfvPQes60p9eWwballLfO8HIKT99jmQlIFasntZqZrhuCLZfpLL2uPdEn6pTnX24xtpqhQ2nrsVZvik/s1600/rss.png" alt="rss" /><span>RSS</span></a>
<a class="dock-item" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfAC3Ig8R-gQKlhpKv5wrftqtd0MstTJxOyHt_fEby5PS76BgY9woC7onAX6iikbi2SSiQgsFpw9oqCozphpKJhkDQxv2ExQzQa6LpyBjx6KnsFUvcXvNegaHmnqTv4zRJHGXt2KV_kJ4/s1600/rss2.png" alt="rss2" /><span>RSS2</span></a>
</div>
</div>
seleai... semoga bermanfaat,, dan semoga kawan bisa membuatnya kembali lebih bagus dari ini,, menjadi pengembangan nya yang lebih baik,,,
Happy Blogging.....
Posting Komentar