CSS Dock Menu


Dock Menu Merupakan menu Horizontal yang disertai gambar-gambar dan apabila menunya disentuh maka akan menampilakan efek berubah size/ukurannya. Nah dibawah ini contoh gambar dari CSS Dock Menu ini. N-design-studio.com situs ini merupakan situs yang menyediakan Trick Dock Menu menggunakan script CSS. o-om.com saya jadikan sebagai rujukan untuk menuliskan artikel ini.. mungkin berguna untuk anda.

CSS dock menu

Untuk mengetahui bagaimana cara kerja CSS Dock Menu ini, silahkan klik disini! sebagai sample, dan mungkin saja anda tertarik untuk mencoba.

Langkah yang perlu dilakukan untuk membuat CSS Dock Menu ada pada blog anda ialah:

1. Download Script code CSS nya Disini!.

2. Lihat Disana anda Folder JS (terdapat 2 file Script) yaitu Interface.js dan jquery.js Buka Juga folder Images untuk mendapatkan icon menunya. Upload semua File tersebut dan simpan pada Host Directorynya masing-masing.. Boleh juga anda menyimpannya pada Google Page Creator

3. Kalau sudah menyelesaikan Semua pengUploadtan filenya.. Silahkan masukke langkah selanjutnya

Cara Pemasangannya Pada Blogger

1. Masukke Edit Html dan cari kode <head> Kalau sudah ketemu Letakkan script ini dibawahnya:

<head>
<script src=’http://google.pages.com/jquery.js&#8217; type=’text/javascript’/>
<script src=’http://google.pages.com/interface.js&#8217; type=’text/javascript’/>
<link href=’http://google.pages.com/style.css&#8217; rel=’stylesheet’ type=’text/css’/>

Warna ungu merupakan alamat directory, ubahlah alamat tersebut sesuai dengan path directory masing-masing

2. Selanjutnya cari kode </body> Letakkan script yang ada dibawah ini, diatas kode </body>. Seperti ini:

<script type=”text/javascript”>
$(document).ready(
function()
{
$(‘#dock’).Fisheye(
{
maxWidth: 50,
items: ‘a’,
itemsText: ‘span’,
container: ‘.dock-container’,
itemWidth: 40,
proximity: 90,
halign : ‘center’
}
)
}
);
</script>

</body>
</html>

3. Proses pemasangan menu terserah pada anda mau diletakkan pada Page Element atau edit html. Pasang kode ini disana :

<div id=”dock”>
<div>
<a href=”http://www.tipsblogspot.blogspot.com”><img src=”http://google.pages.com/home.png&#8221; alt=”home” /><span>Home</span></a>
<a href=”http://www.tipsblogspot.blogspot.com”><img src=”http://google.pages.com/email.png&#8221; alt=”contact” /><span>Contact</span></a>
<a href=”http://www.tipsblogspot.blogspot.com”><img src=”http://google.pages.com/portfolio.png&#8221; alt=”portfolio” /><span>Portfolio</span></a>
<a href=”http://www.tipsblogspot.blogspot.com”><img src=”http://google.pages.com/music.png&#8221; alt=”music” /><span>Music</span></a>
<a href=”http://www.tipsblogspot.blogspot.com”><img src=”http://google.pages.com/video.png&#8221; alt=”video” /><span>Video</span></a>
<a href=”http://www.tipsblogspot.blogspot.com”><img src=”http://google.pages.com/history.png&#8221; alt=”history” /><span>History</span></a>
<a href=”http://www.tipsblogspot.blogspot.com”><img src=”http://google.pages.com/calendar.png&#8221; alt=”calendar” /><span>Calendar</span></a>
<a href=”http://www.tipsblogspot.blogspot.com”><img src=”http://google.pages.com/rss.png&#8221; alt=”rss” /><span>RSS</span></a>
</div>
Warna Hijau Menunjukan alamat URL yang dituju ganti sesuai alamat URL yang anda tuju dan warna Merah Menujukkan path directory untuk warna merah ganti sesuai path directory anda.

Mengerti Programming dapat mempermudah anda mengerti pemasangan dan peletakkan script-script code.

Pos ini dipublikasikan di web desain dan tag . Tandai permalink.

Satu Balasan ke CSS Dock Menu

  1. Ping balik: Cara Membuat Css Dock Menu « ruin13

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s