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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdgeL5S_QZ4Hzshk4PBBwdSUwB15lfDHb6ODKqw6PCH_SFpktS7bN55LkbpRJuVhCPQnjeq7mn2sEvF9dQ8FgAi9-sh-LjPzpOtMvdYkzKyBkjAQraOqNMLJnZ1pQPzqjlAL1X9sJ2/s1600/music-trans.png' width='30'/><span>Home</span></a> <a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtifMvUEm1VZBLxsTDijUtKgdiLm8XQDoQQ_bUv7KedBlfpWhO4FQOivS5BD0ZSBdJLysMYh6aB_gLtxh9ycrZGtXMdosJzJNzn0e88tfmqDo8Bc0OK_4IT-NER9ksQ-JOxAzgJVD2/s1600/rss2-trans.png' width='30'/><span>Email</span></a> <a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN1YaO_wxCanhvIIckiGc9CffqICdSlKgwLabRnOaegcftFelZIl4nei-5-ERnDM7D5D-_slLquSreCk-7ePS9gRqOX5lZcJgE_Zs1XpoiQkS86BHHsIz0FbRoPkJ5TOIUvqaN6bvq/s1600/link-trans.png' width='30'/><span>Display</span></a> <a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxNIKb3PKiZvtf35mvIp3-buP29dxFiStPHjOQXuYaTgq5qV5SJG3su4afppbWp5INUQHpazwVxYITzs5gZAm7dhnsBWEZV8NmJwYiU2UFOTVCKjLLy3cl0in59nKDOfXlXi1XaNW4/s1600/home-trans.png' width='30'/><span>Clock</span></a> <a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH4nfIZbkAPHO3e025wP2-KEkWiApaA8GJ2s52AUE4iw2jSoc4M9K48b8JaiksAFAovO_hKXV15JILFJy19rlD53aKll9Z_2WNqpULuFO3yJN34KuUwnUI5QxWNcLlJZ5g98sNC5KJ/s1600/history-trans.png' width='30'/><span>Web</span></a> <a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmVQ2fEfA5a-gt56Ahj0VozNy3iVYRf9RV1OB8fHO9q_hB9J7q07aAkBk8s1keTIjgsT2m4PYExAg5d6n2l7yY7Qf0xlmLDx1P-v3B3Srr9ots213vTeRbSaHxG6pihWZ57hyfzzoX/s1600/email-trans.png' width='30'/><span>Home</span></a> <a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpsaNmVJqqqNXV72TQBZS8PN6EE6c9wwI4xMN6AMLOyL3MRM9rW56WVIygyo2_UKRq3IGVoAE-mpGFxa8MbChXOud4OIlQ0ZhrjppaYrkV95k7gnMSBfH5HP5I0P5XHtnrxTsjetkD/s1600/video-trans.png' width='30'/><span>Email</span></a> <a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvZ6Yorx1-mHd8ptVIyAH8KsalJZaFC89wlQ0rRt9rSFxN-W2dk4RaJuu9fhJSJWEha3mdq0xAbRMPBlzz4ECpNLC6Wz-GMTspJANKdDUGEgTboT0vnE5zXovHkJh4aTMexOE2IoEs/s1600/rss-trans.png' width='30'/><span>Display</span></a> <a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcnVOVhasqLmqtZrRU3rmiaWykzvBWTcBMNZSRNgklKdL0MfO1L343gX5ORyYIAJGAvGUHB9pVCUpoWmXE_RKVJVfshd5oyJv5EcMqVQy3JGOkrff4HCFmcuN72gn9rI8KN-dG0ZyX/s1600/email-trans.png' width='30'/><span>Clock</span></a> <a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaJoh6YSD9mwB15Drjz7GLk58EBgVDq1N8koKdWk-F2vBiomWbU5mWTZrpvzfYnn82qvIln4SOnf-TXxt0lIbf65tMzEA1X_UAj5AgPp_74FKiEgZ0gASYVTZAVqNt4cqvwZkV-Bm_/s1600/calendar-trans.png' width='30'/><span>Web</span></a> <a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLZiFJIrdWKrSQ5JbAKspMuMs-UzuFElmXAEFj3Bjuy1-A8sCckg7TbUlsZer-JeVZ8Ox7ho55Pf6erwYaVC2ciqe-SCJlM-95RRE9roFf_UHBQeQ_YDzNlIsrIoMLPwOX5ZpGjiQ1/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..???