Membuat Dock Menu

Akhirnya bisa posting juga Setelah didera kesibukan yang sangat akibat tugas kuliah yang menumpuk. Ya Untuk kali ini saya hanya ingin berbagi tentang cara bagaimana membuat dock menu. Mau tahu caranya..??? ya udah lanjut aja yuk..!!!!

1. login ke blogger
2. Pilih tataletak
3. Edit HTML
4. klik expand template widget
5. cari kode </head> setelah itu copy dan pastekan code dibawah ini sebelum kode </head>

<script src='http://ebenk789.byethost12.com/jquery.js' type='text/javascript'/> <script src='http://ebenk789.byethost12.com/interface.js' type='text/javascript'/>


6. Cari kode ]]></b:skin>
7. Copy dan pastekan kode dibawah ini sebelum kode ]]></b:skin>

/-----start dockmenu by www.ebenk789.co.cc -------/
.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; } /*---selesai dock menu ----------------------------------------------- */


8. Save Templates
9. klik Elemen Halaman lalu tambah gadget HTML/JAVASCRIPT
10. Copy dan pastekan Code dibawah..!!! Lalu save

<div class='fisheye' id='fisheye'> <div class='fisheyeContainter'> <a class='fisheyeItem' href='#'><img src='http://4.bp.blogspot.com/_Yhcwq7ZzbIw/SUACQn-ny4I/AAAAAAAAAUc/yy_PBS_YWrc/s1600/music-trans.png' width='30'/><span>Home</span></a> <a class='fisheyeItem' href='#'><img src='http://2.bp.blogspot.com/_Yhcwq7ZzbIw/SUACbeYOO5I/AAAAAAAAAUk/_Zfiy_TiZtA/s1600/rss2-trans.png' width='30'/><span>Email</span></a> <a class='fisheyeItem' href='#'><img src='http://2.bp.blogspot.com/_Yhcwq7ZzbIw/SUACQeWOkPI/AAAAAAAAAUU/-1lW9Q0I4-A/s1600/link-trans.png' width='30'/><span>Display</span></a> <a class='fisheyeItem' href='#'><img src='http://1.bp.blogspot.com/_Yhcwq7ZzbIw/SUACQfGZMrI/AAAAAAAAAUM/7HS7vAdCjls/s1600/home-trans.png' width='30'/><span>Clock</span></a> <a class='fisheyeItem' href='#'><img src='http://3.bp.blogspot.com/_Yhcwq7ZzbIw/SUACP2ct3iI/AAAAAAAAAUE/Wq7jf6tILFE/s1600/history-trans.png' width='30'/><span>Web</span></a> <a class='fisheyeItem' href='#'><img src='http://1.bp.blogspot.com/_Yhcwq7ZzbIw/SUACP5KHlaI/AAAAAAAAAT8/0PJpHH9DzLE/s1600/email-trans.png' width='30'/><span>Home</span></a> <a class='fisheyeItem' href='#'><img src='http://1.bp.blogspot.com/_Yhcwq7ZzbIw/SUACP6w_J0I/AAAAAAAAAT0/RXNWTRfB9po/s1600/video-trans.png' width='30'/><span>Email</span></a> <a class='fisheyeItem' href='#'><img src='http://3.bp.blogspot.com/_Yhcwq7ZzbIw/SUACPp7mBQI/AAAAAAAAATs/UKxtQ51vOF0/s1600/rss-trans.png' width='30'/><span>Display</span></a> <a class='fisheyeItem' href='#'><img src='http://4.bp.blogspot.com/_Yhcwq7ZzbIw/SUACBJFd9ZI/AAAAAAAAATk/oJ5lL_SGpFI/s1600/email-trans.png' width='30'/><span>Clock</span></a> <a class='fisheyeItem' href='#'><img src='http://3.bp.blogspot.com/_Yhcwq7ZzbIw/SUABzssGnaI/AAAAAAAAATc/hxJx2j7VRQA/s1600/calendar-trans.png' width='30'/><span>Web</span></a> <a class='fisheyeItem' href='#'><img src='http://4.bp.blogspot.com/_Yhcwq7ZzbIw/SUABnXdQNdI/AAAAAAAAATU/jPWR6TthALk/s1600/portfolio-trans.png' width='30'/><span>Web</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>


Gimana.??? Mudah kan..???

8 comments

hehehe... artikel bagus bro...

Reply

bro.. kasih tips donk, gimana buat scroll box buat label/categories. tuh scroll box yg seperti di "Tulisan Terbaru." mau donkk.. thx

Reply

hai

saya mau tanya, gimana yah cara bikin button menunya kaya yang yg ada di blog kamu ini yg kaya gini :

Home * Tutorial blog * Download Software * Tips Komputer * About Us
trus templatenya dapet di mana yah

makasih
beat-musikmedia.blogspot.com

Reply

Boz Tutor nya udah ga bisa dipake nii..
Coz .."http://iblographics.com/jquery.js" udah ga ada..gmana nii CSS q jdi rusak

Reply

cara buat Task Bar kaya gini http://nono-zone.co.cc/

Reply

siipp dagh...... bisa di coba ich...

Reply

Nah, ini dia yg dicari, akhirnya ketemu juga
thanks bro buat infonya

Reply

@ all: maaf apabila sebelumnya kode tidak dapat berjalan baik, tetapi hal ini sudah saya perbaiki jadi silahkan dicoba kembali :)

Reply

Post a Comment