CSS Dock Menu, memang sangat cantik jika di miliki dalam sebuah blog karena menu ini sama persis menu di Operating System [ OS ] pada umunya, Misalnya Rocket Dock, Object Dock, dan lain lain
CSS Dock Menu dapat ditemukan dengan mudah di internet. Ada banyak varian menu Dock. Salah satunya yang dibuat oleh Ndesign-studio.com. Mungkin Anda pernah melihat gambar di bawah ini pada Windows, Macintosh dan beberapa OS lain [Operating System]
Cara kerjanya menu ini, jika Anda mengarahkan kursor mouse ke menu ikon, maka akan ada perubahan ukuran ikon. baiklah daripada penasaran lebih baik kita segera mulai cara membuatnya:
Step One :
-Log in to Blogger with your id.
-Please go to Layout.
-Choose Edit HTML.
-Backup the template by clicking Download Full Template.
-Masukan script dibawah ini tepat dibawah kode <head> sehingga seperti ini :
<head>
<script src='http://davitblog.googlecode.com/files/jquery.js' type='text/javascript'></script>
<script src='http://davitblog.googlecode.com/files/interface.js' type='text/javascript'></script>
Step Two:
Masih di Edit HTML, sekarang cari kode ]]></b:skin> dan tempatkan kode berikut di atasnya.
Sehingga akan tampak seperti di bawah ini.
.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;
}
]]></b:skin>
Step Three:
Masih di Edit HTML, sekarang kita akan menaruh id untuk CSS Dock Menu.
cari kode ini:
<div id='header-wrapper'>
.........
.........
</b:section>
</div>
Dan masukan kode berikut di bawahnya, sehingga menjadi:
<div id='header-wrapper'>
.........
.........
</b:section>
</div>
<div class='fisheye' id='fisheye'>
<div class='fisheyeContainter'>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' width='30'/><span>Calendar</span></a>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' width='30'/><span>History</span></a>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' width='30'/><span>Music</span></a>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' width='30'/><span>Video</span></a>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' width='30'/><span>Link</span></a>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' width='30'/><span>Portofolio</span></a>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' width='30'/><span>Posts RSS</span></a>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' 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>
Keterangan :
your_site : Silahkan Ganti dengan alamat blog sobat/ link yg akan di tunjuk
link_image.png : Silahkan Ganti dengan alamat gambar icon milik sobat, misalnya gambar Rumah untuk menu Home, dan bisa di upload ke photobucket
Nah selesai deh,,, gampang banget kan..
