Home » » Cara Membuat Dock Menu Horizontal di Blog

Cara Membuat Dock Menu Horizontal di Blog

Redi Apri Handoko | 19.15 | 0 comments
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>
<script src='http://blogtrikdantips-blogspot.googlecode.com/files/interface.js' type='text/javascript'></script>
5. Tambahkan kode dibawah ini diatas kode ]]></b:skin>

/* 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'>
.........
.........
</b:section>
</div>
7. Setelah ketemu kode diatas letakkan kode berikut ini dibawah kode diatas

<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....

Selamat mencobanya dan Good Luck!!!!
Berbagi Dengan Teman:

Posted by : Redi A.H ~ / Tutorial windows, SEO , Info gadget, Download game

Artikel Cara Membuat Dock Menu Horizontal di Blog Di posting oleh Redi A.H pada 11 Jul 2009. Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kontak atau komentar. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog sobat, hanya mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini. Terimakasih. Happy blogging!!!

0 comments:

Posting Komentar

Terimakasih atas kunjungan anda semua, sebelumnya mohon maaf kami tidak menerima komentar yang berbau tentang pornografi.
TERIMAKASIH atas partisipasinya.

 
Site Meter :
Copyright © 2011. Tutorial Windows 7 - All Rights Reserved
Proudly powered by Blogger
Thank You For Google