Sedikit Info Seputar
Cara Memasang Menu navigasi CSS Mac Dock with jQuery
Terbaru 2017
- Hay gaes kali ini team Android Apps For Free, kali ini akan membahas artikel dengan judul Cara Memasang Menu navigasi CSS Mac Dock with jQuery, kami selaku Team Android Apps For Free telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Android Apps For Free. semoga isi postingan tentang
Artikel tips blogspot, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul:
Berbagi Info Seputar
Cara Memasang Menu navigasi CSS Mac Dock with jQuery
Terbaru
link: Cara Memasang Menu navigasi CSS Mac Dock with jQuery
Berbagi Cara Memasang Menu navigasi CSS Mac Dock with jQuery Terbaru dan Terlengkap 2017
Ok sob kali ini aku akan sedikit berbagi tentang
- 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> :
Selanjutnya simpan script berikut diatas kode </body> :
$(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" href="http://dimashredevil.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB6UDdMo_wsl9iU3coRmE-W2LZ5PtUUKD3ODHf4gXwXXuIaBhuysjso3f60ZwhoX66ncLdP07wzM1a1DVkmwSnmtUD81WOHu-Qnkh9yRMl3woyE8flqa9jdeVvHX8pdpMkMSRe02xFL5w/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>
dan yang berwarna merah url gambar anda
Save dan lihat hasil nya...........selamat mencoba sob