Dari namanya memang sangat lucu "Duck Menu". Jika diterjemahkan menjadi menu bebek (udah kaya makanan aja, hehehhe). Tapi yang pasti TIPS untuk Blogger tidak ppintar masak memasak sehingga tidak memberikan tips untuk makanan. Ok sobat blogger.
Tips kali ini, kita akan membuat menu navigasi lagi, setelah sebelumnya saya pernah memberi tips yang sama dalam membuat menu navigasi, yaitu:
4. dll
kali ini saya akan memberikan tips membuat menu navigasi deng gaya "Duck Menu". Lebih jelasnya icon menu ini akan terlihat seperti gambar di bawah ini:
 | |||||
| Example of Duck Menu |
1. Setelah login, sobat pergi ke Template blog sobat, silahkan pilih Edit HTML.
2. kemudian cari kode <head>.
3. Letakkan kode berikut ini di bawah kode <head>.
4. kemudian cari kodde ]]></b:skin>. Kemudian letakkan kode berikut di atas kode ]]></b:skin>.<script src='http://iblographics.com/jquery.js' type='text/javascript'/> <script src='http://iblographics.com/interface.js' type='text/javascript'/>
/* Dock menu by www.iblographics.com
----------------------------------------------- */
.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;
}
/* Fin del dock menu
----------------------------------------------- */jika Anda memiliki expirence dengan html, Anda akan dapat menambahkannya mana pun Anda inginkan,
jika Anda tidak memiliki, Anda akan menambahkan ke tempat default, (atas blog).
5. Jika sudah,silahkan cari kode <body>.
6. Letakkan kode berikut ini di atas kode <body>.
<div class='fisheye' id='fisheye'>
<div class='fisheyeContainter'>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiZA3z8onQCOQKu2tj_i-spDjWoO5o3vJDpfIc22rALpZ7HPq7i9AW-AQk3IC8Lr9oqWEZkoYiPIwtcrNz2QSNF_3dWZEtM9nR_RVc-YcFBOzgioGGPhsOEXfgmlaw6MitRRJE-jQG/s1600/music-trans.png' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJWnYOWeN-VnuHTYHgsjh5KS7rb4doEcvJL6xWcKMH7mIO5i-avX7bthtDo6DBYVRZAAkVvSbPT7henk7ihvuaPn6QGNtQnGq04Q4UY5-KUehCmQF0j1bwf8pVSYKonXKYfQ4wEVuX/s1600/rss2-trans.png' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimZSviTHfTcy_Z6_YaGv3cXqjGtmXKss8gCwlh0vp4m6TiCUYVMmzj3CHOQn0VTzzltDGaRGuVSG_9p2OtHYy__alv_WfjH7ORcC24b54bSvWw4hoHm9HwlR3Md3CSHbVztYU9iujp/s1600/link-trans.png' width='30'/><span>Display</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVICE9y3mZg9a9ttYJY0PExcYt8j-QCDQk3JRjUMlu3J1SNQ3_4DdW7BkP_yBd7Way51BlSuUcIyZBnL_bG0DAkCbKH0Z0Gaxzs-rSmKP4iYVKXOmhYBmUQvlmXBc2h-f7eQ8jnOy7/s1600/home-trans.png' width='30'/><span>Clock</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXqHje61YVBWnW1IsBU78qyvezxUbLndqS8OxCt2dk6naY6N9ZWsVNYXo4c1SRH0-MNWEcKZYddyXJklwcyl2QG-JGFKpU9HpHaCq2LjxyE2ddd0E-05pGRM_d1OzPFP3ayQOY8WGl/s1600/history-trans.png' width='30'/><span>Web</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiJiQ1fGxBXMlhnz0o9p4iXAXiZD0WlLy-ZJQEhPb00QoxYpjkcVKyiucSp4WFHM2F-dSpCTu3txkorrmh6XbpFyNAqsGz6Lx7eHhcca4lPeo77lTJUi0nOnmhXyUT2WiBLudrj2hx/s1600/email-trans.png' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitk3VuKDBL8pRYPTkm2ja5oNGVF4Eb5glxOXJQPhWg8pj93iYrsoJNd6YWdw5n5TkSZN0ZQJfJN4NPu-WOqH3-wzbPMUL0GVcZv2f2vWbB0vbGTJdBA6DlDbK6f-eya3q03vwz0HDf/s1600/video-trans.png' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizB8vi5TyBvvicxrR-0B4cLRKWar1TXHX4X8YcI0wmuHvuGZzWdEn4NzmPdljdJjhtS4NGkMwHFWn85YuV8BKVzuGNno5j8xP6D-s3VVChMGpFFWQ98Nr031kjCb7ev0pnvFoMg4Bp/s1600/rss-trans.png' width='30'/><span>Display</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTrNWdj-2Smur-bB431r0YTowwmCIW08wTM6WcQGUMvSEF3J60-f5o8NA8AI0gPjtfVmwIfEi_caFT9iABRVqq08PS9UpqzNRTegQLWQ3SEy-AOMQmftbHKsimKg_CHpohsduV3BlT/s1600/email-trans.png' width='30'/><span>Clock</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHA6w3dP-EEQwiV76aMQzp8uBRjfM_EDYX8ZUeu_9tcGFpTlwFG-bx9CEQLq15nMgRSaVu4FrXLLS8PtA3KEbEgu2eKrEAQxKp4zsCTbzGr3cMsoJKVt5sVzTfbWIYmEGDIoAoaERE/s1600/calendar-trans.png' width='30'/><span>Web</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW6PnCZAazaBtSiRRJyaC_iFQCIZBa_RF-gW8aZ_YuWXtl87u4a1GQ-S0Fga3UhnW9yZAoXgCtisIIeBeYSAPCjDhLvItsjwR8aJJPiBRVGez91wZI1fSVi7CMHTlMVF8xk6cnZRNB/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>7. Setelah selesai, silahkan Simpan Template.
Selesai, semoga dapat menbantu sobat blogger, dan mohon maaf jika ada salah. (Jkt/2012)
Posting Komentar