Cara Memasang Menu navigasi CSS Mac Dock with jQuery
- 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;
}
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> :
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>
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);
</script>
<div class="dock-container">
<a class="dock-item" rel="nofollow" href="http://veromons.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMXwGXiqLdKPT6FE-N5HTqAaskc1MJj9cm-r4Lvle5fb10kJFKaQxkQLVJvvQoI8ZxYy1DV6G28VsX-ZGV8BTq9QQUwLyGPh-XfAeGUMesDGs3DS-q4-wkMv-k8w8TDNcLzvEvsO0s2Bc/s1600/home.png" alt="Home" /><span>Home</span></a>
<a class="dock-item" rel="nofollow" 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" rel="nofollow" href=" facebook.com/likemd"><img src="http://dimash.mw.lt/lg fb.png" alt="Facebook" /><span>Facebook</span></a>
<a class="dock-item" rel="nofollow" href="http://twitter.com/MDShare_"><img src="http://dimash.mw.lt/lg tw.png" alt="Twitter" /><span>Twitter</span></a>
<a class="dock-item" rel="nofollow" href="http://koprol.com/users/USERNAME"><img src="http://dimash.mw.lt/lg yho.png" alt="Koprol" /><span>Koprol</span></a>
<a class="dock-item" rel="nofollow" href="http://mdshare@yahoo.com"><img src="http://dimash.mw.lt/lg email.png" alt="Email" /><span>Email</span></a>
<a class="dock-item" rel="nofollow" href="http://youtube.com/user/miftahkerenzz"><img src="http://dimash.mw.lt/lg youtube.png" alt="Youtube" /><span>Youtube</span></a>
<a class="dock-item" rel="nofollow" href="http://xtgem.com"><img src="http://dimash.mw.lt/wap.jpg" alt="Wap" /><span>Wap</span></a>
<a class="dock-item" rel="nofollow" href="http://tips-social-media.blogspot.com"><img src="http://dimash.mw.lt/lg blog.jpg" alt="Blogspot" /><span>Blogspot</span></a>
</div>
</div>
dan yang berwarna merah url gambar anda
Save dan lihat hasil nya...........selamat mencoba sob
Another Linked
Home
Movie Wars
Tutorial and Software
Top