Apakah anda pernah melihat tampilan menu dikomputer seperti diatas? Gambar diatas adalah sekilas contoh CSS Dock Menu. Dock Menu seperti halnya dengan Menu Mac di komputer tapi menu tersebut bisa diterapkan didalam blogger ternyata. hehehe, baru nyadar nie. Kita akan melihat perubahan size bila kursor mouse kita arahkan ke icon Dock Menu tersebut. Wah tampilannya jadi stylist dan elegan nie. Salah satu situs yang menyediakan open source atau tutorial ini adalah Ndesign-studio.com. Untuk demonya lihat disini. Tutorialnya sangat simple dan mudah diterapkan. Lebih baik saya jelaskan sekarang tutorialnya.
Langkah Pemasangan Dock Menu :
1. Download file CSS dock menu zip package.
2. Unzip filenya
3. Didalam folder CSS Dock Menu anda akan menemukan folder JS. Disitu ada Jquery.js dan Interface.js. Tugas anda sekarang adalah mengupload kedua javascript tersebut ke host directory anda masing-masing. Kalo saya memakai geocities.com.
4. Buka kembali CSS Dock Menu, anda akan temukan file iepngfix.htc dan style.css. Upload lagi file tersebut ke directory anda.
5. Nah dah selesai. Selesai proses upload maksud saya hehehe...Bernafas sejenak
Sekarang Cara Pasang di Blogger :
1. Masuk Edit HTML, jangan lupa expand widget template. Kemudian cari kode <head> dan letakkan kode script berikut dibawah kode <head> . Kurang lebihnya seperti ini
Sumber : 1. http://www.ndesign-studio.com
2. o-om.com
OK, selamat mencoba...happy blogging with NdyTeeN
1. Download file CSS dock menu zip package.
2. Unzip filenya
3. Didalam folder CSS Dock Menu anda akan menemukan folder JS. Disitu ada Jquery.js dan Interface.js. Tugas anda sekarang adalah mengupload kedua javascript tersebut ke host directory anda masing-masing. Kalo saya memakai geocities.com.
4. Buka kembali CSS Dock Menu, anda akan temukan file iepngfix.htc dan style.css. Upload lagi file tersebut ke directory anda.
5. Nah dah selesai. Selesai proses upload maksud saya hehehe...Bernafas sejenak
Sekarang Cara Pasang di Blogger :
1. Masuk Edit HTML, jangan lupa expand widget template. Kemudian cari kode <head> dan letakkan kode script berikut dibawah kode <head> . Kurang lebihnya seperti ini
<head>2. Masih di Edit HTML, cari kode </body> dan letakkan kode berikut diatas kode </body> :
<script src='http://www.geocities.com/attintha/jquery.js' type='text/javascript'/>
<script src='http://www.geocities.com/attintha/interface.js' type='text/javascript'/>
<link href='http://www.geocities.com/attintha/style.css' rel='stylesheet' type='text/css'/>
<script type="text/javascript">3. Langkah pemasangan Dock Menu. Menu ini dapat anda letakkan diarea sesuai dengan keinginan anda. Bisa diletakkan di elemen blogger atau di Edit HTML. Berikut proses pemanggilan menu tersebut :
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);
</script>
</body>
<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="http://www.ndyteens.blogspot.com"><img src="http://www.geocities.com/attintha/home.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="http://www.ndyteens.blogspot.com"><img src="http://www.geocities.com/attintha/email.png" alt="contact" /><span>Contact</span></a>
<a class="dock-item" href="http://www.ndyteens.blogspot.com"><img src="http://www.geocities.com/attintha/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
<a class="dock-item" href="http://www.ndyteens.blogspot.com"><img src="http://www.geocities.com/attintha/music.png" alt="music" /><span>Music</span></a>
<a class="dock-item" href="http://www.ndyteens.blogspot.com"><img src="http://www.geocities.com/attintha/video.png" alt="video" /><span>Video</span></a>
<a class="dock-item" href="http://www.ndyteens.blogspot.com"><img src="http://www.geocities.com/attintha/history.png" alt="history" /><span>History</span></a>
<a class="dock-item" href="http://www.ndyteens.blogspot.com"><img src="http://www.geocities.com/attintha/calendar.png" alt="calendar" /><span>Calendar</span></a>
<a class="dock-item" href="http://www.ndyteens.blogspot.com"><img src="http://www.geocities.com/attintha/rss.png" alt="rss" /><span>RSS</span></a>
</div> </div>
Sumber : 1. http://www.ndesign-studio.com
2. o-om.com
OK, selamat mencoba...happy blogging with NdyTeeN
Posted by: Andi Setyoko
Berita Harian, Updated at: 9:52 PM
