Cara Membuat Dock Menu Horizontal di Blog
Dock
Menu adalah pilihan menu navigasi animasi dengan efek zoom. Efek zoom
ini membuat icon berubah dari ukuran normal ke ukuran yang lebih besar
apabila cursor mouse berada diatas icon dock menu. Dock Menu dapat juga
kita jumpai pada windows desktop, maupun OS lainnya. Kali ini blog trik
dan tips akan memberikan trik cara membuat dock menu vertikal pada blog.
Jika sobat tertarik untuk membuatnya ikuti aja trik berikut ini:1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Klik Expand Widget Template
4. Tambahkan kode dibawah ini dibawah kode <head>
<script src='http://blogtrikdantips-blogspot.googlecode.com/files/jquery.js' type='text/javascript'></script>5. Tambahkan kode dibawah ini diatas kode ]]></b:skin>
<script src='http://blogtrikdantips-blogspot.googlecode.com/files/interface.js' type='text/javascript'></script>
/* CSS Dock Menu
------------------------ */
.fisheye{
text-align: center;
height: 62px;
position: relative;
}
a.fisheyeItem
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
}
a.fisheyeItem2
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
bottom: 0;
}
.fisheyeItem img
{
border: none;
margin: 0 auto 5px auto;
width: 100%;
}
.fisheyeItem2 img
{
border: none;
margin: 5px auto 0 auto;
width: 100%;
}
.fisheyeItem span,
.fisheyeItem2 span
{
display: none;
positon: absolute;
}
.fisheyeContainter
{
height: 50px;
width: 200px;
left: 500px;
position: absolute;
}
#fisheye2
{
position: absolute;
width: 100%;
bottom: 0px;
}
6. Langkah selanjutnya yaitu kita menempatkan dock menu dibawah header blog, caranya cari kode dibawah ini:
<div id='header-wrapper'>7. Setelah ketemu kode diatas letakkan kode berikut ini dibawah kode diatas
.........
.........
</b:section>
</div>
<div class='fisheye' id='fisheye'>
<div class='fisheyeContainter'>
<a class='fisheyeItem' href='http://blogtrikdantips.blogspot.com/'><img src='http://i35.tinypic.com/2ly0ft3.jpg' width='30'/><span>Calendar</span></a>
<a class='fisheyeItem' href='http://blogtrikdantips.blogspot.com/'><img src='http://i33.tinypic.com/16lxy89.jpg' width='30'/><span>History</span></a>
<a class='fisheyeItem' href='http://blogtrikdantips.blogspot.com/'><img src='http://i37.tinypic.com/2dky845.jpg' width='30'/><span>Music</span></a>
<a class='fisheyeItem' href='http://blogtrikdantips.blogspot.com/'><img src='http://i36.tinypic.com/2qu2m4m.jpg' width='30'/><span>Video</span></a>
<a class='fisheyeItem' href='http://blogtrikdantips.blogspot.com/'><img src='http://i37.tinypic.com/2i7r283.jpg' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='http://blogtrikdantips.blogspot.com/'><img src='http://i38.tinypic.com/2virpcm.jpg' width='30'/><span>Link</span></a>
<a class='fisheyeItem' href='http://blogtrikdantips.blogspot.com/'><img src='http://i36.tinypic.com/2e5rw34.jpg' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='http://blogtrikdantips.blogspot.com/'><img src='http://i35.tinypic.com/2zhle2f.jpg' width='30'/><span>Portofolio</span></a>
<a class='fisheyeItem' href='http://blogtrikdantips.blogspot.com/'><img src='http://i34.tinypic.com/9beij4.jpg' width='30'/><span>Posts RSS</span></a>
<a class='fisheyeItem' href='http://blogtrikdantips.blogspot.com/'><img src='http://i37.tinypic.com/a0kq39.jpg' width='30'/><span>Comment RSS</span></a>
</div>
</div>
<script type='text/javascript'>
$(document).ready(
function()
{
$('#fisheye').Fisheye(
{
maxWidth: 15,
items: 'a',
itemsText: 'span',
container: '.fisheyeContainter',
itemWidth: 30,
proximity: 70,
halign : 'center'
}
)
}
);
</script>
7. Terakhir simpan template sobat....
Tidak ada komentar:
Posting Komentar
Silahkan Komentarnya Disini...................