Cara Membuat Menu Dock Di Blog ~ Bithoo

Menu dock adalah menu navigasi yang mempunyai animasi. Apabila cursor anda berada diatasnya maka menu dock akan bergerak dan membuat zoom.

Jika anda tertarik untuk membuatnya ikuti aja trik berikut ini>......
1. Login ke blogger
2. Pilih Tata Letak dan klik Edit HTML
3. Klik Expand Widget Template
4. Tambahkan kode ini dibawah kode <head>

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

5. Tambahkan kode ini dibawah ]]></b:skin>

.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;
}

6. Terakhir cari kode <body> dan tambahkan kode dibawah ini dibawah kode ini:

<div class='fisheye' id='fisheye'>
<div class='fisheyeContainter'>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSZPxOg7rSsDsZ6E33puEvkeIE3KeKWMx60lXV6nisO4-S4h62-fnooC417w_xyPGRf-GTf88CBcy2v5hv-CKRSghI4kj0WWxDEZg2H8F7qL4HddOyiLgODrn0wwa2uqmULbMjfTYt/s1600/music-trans.png' width='30'/><span>Home</span></a>

<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXBn_vRfX76_Atbe9j5U1ona5uhy7FYeEbU9-rmoytS182mMak8qkw5lwwA8x1D9-EKdJ9eHJLEPjLw7z8zbBVtMFATG6n_4huah-hABGriozJvDY583GyeFdJsZvXSqm7OM8siQNy/s1600/rss2-trans.png' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS5YZiSLm8LjMQCTWiSgk9iyd9MyGUcIJK6tEXlwpwsal1CgJSBcl0dmrmjXAJVUHgbWiISIkT1bOm3mFLvz54R1owRA_oHDLQPSMAPDUjweShq_8hjiQ3knEQpNFckiGHR1n6lZXX/s1600/link-trans.png' width='30'/><span>Display</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbVUb5f_2IzOvxGJP-kQUHfH4p4DsOtKhsECxpcvVGe4HVhiGyJm_N1sgdZuFn8WyTDP-aHnsCNTzJlpLnDM9zSHHww8EHVnRHvBd3UM59B31jnaTp6vm3RiZqlMhk422SIX8tp8kV/s1600/home-trans.png' width='30'/><span>Clock</span></a>

<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJzK-U6rItRmXs8ERcuxjbbhrDOlW9rETetJEaSiNKcuRb078nDmf7DmfkjVMpNscuOcWhYjSFs9nKgAJ_JGY4glUXBNm2uCVi8WgA7ho_QHeMbIrkNXEada7qhEB0j6CzYencPkzc/s1600/history-trans.png' width='30'/><span>Web</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqKUdc5bMZ4isSXYhvdgEcKfMzMFMKyAD-iXsv0OXTHj2Ao8AXQmATTwj_dYejRjxu5n77NPb6kpiWylK2i7tbwIXXlM3OTstz840aM_GGuQOUfjyy5TkAr_aB4mM2yDTScglr_YYl/s1600/email-trans.png' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcErGVPku11-3xiPvwNPEN_RPoFvFg_Q1HUD4WH2AqFC1pXA5CCUHAL5kEoNXoIvBx_75q9MyFgzPFxRbsOW0E656eMdooLteyXGWWz0TqfrSV4eqXeSWIFjBGKKEu3oPh4F7vBbug/s1600/video-trans.png' width='30'/><span>Email</span></a>

<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG7-DNGPcuEb0YHlxQb0ESQ6vUcQx8115IEOmOCYylqnBEWtBX7TAVbYGPDnK8_UASDGMlH52LRUg_j_RKI_M9Zz5OlBsOju3hkFhdwM9pBaB-na0_24h3hlpsg4ViYyGtNGLNA40O/s1600/rss-trans.png' width='30'/><span>Display</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEOxhUtfbLRZ9F4ATVxgZIDyg55PC_Ma2E0MqruCjFV2voMBN0S0yxWsV6Eb5lQ7cXtvj3NEnza2-apZPgxUQB6Su0z-SMNQEdRuf7UC7cGuFY_hUsrqDDtZOAWqvJiPvxkZ50Q3Df/s1600/email-trans.png' width='30'/><span>Clock</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSfWM5N1Pd0cdcfQr6Por1W_ZLlliABZJe33qjLpfS-YU1-yGKDCKwGNtVhU9N5dtH-54reCJ6bJgcutC3OZcxl8GfhftKkru7jkhnqwIn1hAfhQMtya7nw1wQl9vDvGuPUIU7CGEj/s1600/calendar-trans.png' width='30'/><span>Web</span></a>

<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Ln2FzWzsaAViAoxuDBGah582hV5uWr2YAedBtWlfRLJzLniz8wWVsJfoyixp39vG1X63XW-cpLPbaz3unwu2SpTJD7P6JXbmVR02o0wmUCF-C1rka4MmWhVwy7tQLDIb_R4ibC9G/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. Terakhir simpan template anda....

Selamat mencobanya!!!!