 |
| Gambar menu navigasi dengan animasi |
Pada tutorial kali ini, saya akan coba membahas, bagaimana caranya membuat menu navigasi yang menarik dengan animasi secara horizontal, dan Apabila cursor anda berada diatasnya maka menu navigasi akan bergerak dan membuat zoom.
Berikut ini cara pembuatannya :
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
{
6. Terakhir cari kode <body> dan tambahkan kode dibawah ini dibawah kode <body>
<div class='fisheye' id='fisheye'>
<div class='fisheyeContainter'>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTjOPV6jCDdSAkogMW7e5e9AnqI3veUAYt3Du4wA7RC8atp3l3Qf3peLWNn7DC4DgDXbBecEhWXQHR6OpHOFxjhxOkmUl3Jf2k1byPGtwN2F7xoBBITe9DlBDuNJ7Jz4F262jTL_QN/s1600/music-trans.png' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEnIZOG_3O4qg79vTMnpaBUDRw-zEb_MSSW34qdRVkXdVum2SPXzHYjfHclPFBY_WuXzkY5ykfGLGMf37ij-9xYQJ1LenOczVMUFUDe_AB0o-Y08uwx8mAD3Rja60x8WkKyIeQ3DlL/s1600/rss2-trans.png' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdQnAcvdkNsYp1o7c7YSbpdpyVV16xze0qxSN4XPywef_IihVMmupbMNR90ZbNNo4IsUaPhVD2yvGsyEe46-kuf1ugZgLbTBx6FHhMZrYArRPLqn7L3OCmvMadXyqYLPSI13h4pixG/s1600/link-trans.png' width='30'/><span>Display</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPxhs8x1OgINm2s_nkwzCUqx0qHoJ14XB3AOAzBKQAoySBV375iLw7QfVoP2VMxEG9ypGzfIUgKzCv3UKmkbkRCHlORJ0hNSVTZ2_i5ZVNSfVil7pKG-hysK-U9kftp2S_gUJZCmBp/s1600/home-trans.png' width='30'/><span>Clock</span></a>
7. Save dan lihat hasilnya, jangan lupa commentarnya