Membuat Dock Menu yang lebih elegan dengan gaya Macintosh

Dock Menu bergaya macintosh mungkin untuk sebagian blogger senior sudah tidak asing lagi tapi trik ini saya khususkan untuk blogger junior sama halnya sepeti say..
Coba sobat lihat gambar dibawah ini dan trik ini udah saya praktekan di blog saya yang
ini silahkan dilihat



Untuk yang mau mencoba dock menu bergaya macintosh yuk ikutin langkah langkahnya

Langkah 1.Login ke Blogger dengan akun sobat pilih Tata Letak/layout - Edit HTML - Expand Widget Template.
Catatan : Untuk menjaga jaga takut ada kesalahan silahkan sobat backup dulu dengan mengklik Download Full Template

Langkah 2.Coba sobat cari kode seperti dibawah ini
</head>

Langkah 3.Silahkan cari kode yang sepereti ini

Dan copy paste kode ini persis di atas kode tadi
<script type="text/javascript" src="http://dedehendriono.googlepages.com/jquery.js"></script>
<script type="text/javascript" src="http://dedehendriono.googlepages.com/interface.js"></script>
<link href="http://dedehendriono.googlepages.com/dock_style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]-->

Langkah 4.Untuk langkah ke empat cari kode yang seperti dibawah ini
</body>

Langkah 5.Selanjutnya sobat copy paste kode yang ada dibawah ini tepat
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
$('#dock2').Fisheye(
{
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>

Lalu simpan atau save template

Untuklangkah yang terakhir klik Page Elements terus klik Add a Gadget pilih HTML/JavaScript silahkan copy paste kode dibawah ini lalu save

<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com/home.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com/email.png" alt="contact" /><span>Contact</span></a>
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com//music.png" alt="music" /><span>Music</span></a>
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com/video.png" alt="video" /><span>Video</span></a>
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com/history.png" alt="history" /><span>History</span></a>
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com/calendar.png" alt="calendar" /><span>Calendar</span></a>
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com/rss.png" alt="rss" /><span>RSS</span></a>
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com/rss.png" alt="rss" /><span>RSS</span></a>
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com/rss2.png" alt="rss" /><span>RSS2</span></a>
</div>
</div>



Catatn untuk tanda # ini harus diganti dengan link yang di inginkan

Posted in: Info Terkini,Tip Blogging,Tip Trik Internet