Ok sob kali ini aku akan sedikit berbagi tentang
cara memasang navigasi CSS jQuery .ok cara nya sangat lah mudah dan simple aja kok.click
DISINI untuk melihat tampilan ok langsung ke
TKP aja sob silakan ikuti langkag-langkah berikut ini :
Cara membuatnya :
- Login blogger
- Rancangan, Edit Html, 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(http://red3vil.xtgem.com/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>
Dan cara pemanggilan nya melalui HTML
<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="
http://dimashredevil.blogspot.com"><img src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLmb7gP0UKf3OsSz0TKyQ8a_VZ6PeA8e08hnp8dxAfZbZvIvyb0YCGpQ5YifrW4bJjqrOoV8Ag4XE-HxC-waZ-i81io4lVgBHo3PVaOpDBpLIm8gSaLrTugZnAfei76viymSvppy4K80Q/s1600/home.png" alt="Home" /><span>Home</span></a>
<a class="dock-item" href="
http://www.blogger.com/profile/15357131409388946339"><img src="
http://dimash.mw.lt/lg profil.png" alt="Profile" /><span>Profile</span></a>
<a class="dock-item" href="
facebook.com/reddevil.detected"><img src="
http://dimash.mw.lt/lg fb.png" alt="Facebook" /><span>Facebook</span></a>
<a class="dock-item" href="
http://twitter.com/dim4sh"><img src="
http://dimash.mw.lt/lg tw.png" alt="Twitter" /><span>Twitter</span></a>
<a class="dock-item" href="
http://koprol.com/users/dim4sh"><img src="
http://dimash.mw.lt/lg yho.png" alt="Koprol" /><span>Koprol</span></a>
<a class="dock-item" href="
http://dimash_devil@yahoo.com"><img src="
http://dimash.mw.lt/lg email.png" alt="Email" /><span>Email</span></a>
<a class="dock-item" href="
http://youtube.com"><img src="
http://dimash.mw.lt/lg youtube.png" alt="Youtube" /><span>Youtube</span></a>
<a class="dock-item" href="
http://dim4sh.wapdale.com"><img src="
http://dimash.mw.lt/wap.jpg" alt="Wap" /><span>Wap</span></a>
<a class="dock-item" href="
http://red3vil-666.blogspot.com"><img src="
http://dimash.mw.lt/lg blog.jpg" alt="Blogspot" /><span>Blogspot</span></a>
</div>
</div>
CATATAN : untuk yang berwarna
hijau rubah dengan url anda
dan yang berwarna
merah url gambar anda
Save dan lihat hasil nya...........selamat mencoba sob