RSS2.0

CSS Dock Menu

Sabtu, 06 September 2008

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' type='text/javascript'/>
<script src='http://google.pages.com/interface.js' type='text/javascript'/>
<link href='http://google.pages.com/style.css' 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 class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/home.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/email.png" alt="contact" /><span>Contact</span></a>
<a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
<a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/music.png" alt="music" /><span>Music</span></a>
<a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/video.png" alt="video" /><span>Video</span></a>
<a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/history.png" alt="history" /><span>History</span></a>
<a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/calendar.png" alt="calendar" /><span>Calendar</span></a>
<a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/rss.png" 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.


Baca yang Lainnya



11 komentar:

RainTurb mengatakan...

kok di box adress nya bisa jadi gambat T sich??? boleh tau g secretnya pa an ???

Tips Blogspot mengatakan...

@RainTurb : Coba Kmu lihat Artikel saya yang berjudul Mengganti Icon Adress bar pada blogger.. disana akan ada cara bagaimana mengganti icon pada box seperti punya saya..

Ade Sanusi mengatakan...

Mas Saya Juga Udah Pernah Pakek dulu Cuman Berat/Lama Buat Loadingnya :D di sini Klik

anto mengatakan...

iya neh berat, gmn ya supaya ga berat? ini alamatnya http://masisman.blogspot.com/

kadang muncul kadang jg gak muncul iconnya, mungkin krn bandwith di google.pages nya terlalu berat,

rudi sahrizal mengatakan...

mantap abis, tq ya bozz,,,,, punyaku lancar.... mungkin klo temen2 bukanya berat,bisa jadi bandwith untuk aksesnya tuh.... coba deh liat punya aq http://www.koleksipoto.co.cc

sandy mengatakan...

berat...

DoFollow Blogger Indonesia mengatakan...

Sip lah...

Nikmaya John mengatakan...

Jadi lebih keren ni blog nya,,, mantappp.....

tutorial blogger mengatakan...

numpang co-pas ya.. buat belajar.
heheheheheee

Kevin Go mengatakan...

susah! tp walau susah apa salahnya mencoba? namanya juga belajar?

Vimax Original Pembesar Mr.P Herbal mengatakan...


artikelnya sangat membantu gan thanks for sharing
kunjungi web kami gan => www.vimaxkapsuloriginal.com

Posting Komentar

Setiap Kali anda berkomentar maka anda akan mendapatkan link balik dari saya...

Terima kasih atas KOMENTAR-nya

Terjemahkan