Cara Membuat Duck Menu Animasi
Duck menu? Duck artinya bebek, jadinya duck menu artunya menu untuk memilih bebek? Hahaha...!!! <script src='http://tipsbloggerzacky.googlecode.com/files/jquery-1.2.2.pack.js' type='text/javascript'/>
Bukan.. Duck menu itu yang biasa kita lihat di windows itu lho.. Hehe.. Nha, sekarang saya akan menjelaskan cara membuatnya. Mau tau?
Berikut Cara Membuat Duck Menu Animasi:
1. Login ke akun Blogger anda
2. Plih Layout > Edit HTML, lalu centang Expand Widget Template
3. Cari kode <head>, lalu paste kode berikut di bawahnya:
<script src='http://tipsbloggerzacky.googlecode.com/files/interface.js' type='text/javascript'/>
4. Selanjtnya, cari kode ]]></b:skin>, lalu paste kode berikut di atasnya:
----------------------------------------------- */
.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;
}
/* duck menu by tipsbloggerzacky.blogspot.com end
----------------------------------------------- */
5. Langkah terakhir, cari kode <body>, lalu paste kode berikut dibawahnya:
<div class='fisheyeContainter'>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSfiUXeL6FDA8q4UkeFCl2YESVTOa1hppEZvGqV-xWazWEmfM7SHCVV0gPDwhTHEmlxdD7xMQSq25w2wIPf-1Ldu6g1E1RLDFb9YJFRBjIKKh7wAb9eh133TQzCnOChbq1TkwM6k7p/s1600/music-trans.png' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiYWTkhc5MWNL2peSYlBTOp4GXDvf77ynXVK9m8RouZ3ZKJqj2IRiTMWiwUeZB-G9XpLxAtME9uBdYHknCkmRqub75Qz4JvsFX5mR9CeLNCmeYFWs-quedSpLZ-QnPmivBDwsf2Uwf/s1600/rss2-trans.png' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8f2Z2xyXbSvKMblESIgi5XSxGwzxSjnE0sTZfqGWnrY5lVYhp1oRmR6sk6nYq228fkGW6uLJh1LJg3-9OLF1Y6oZMvJ3n6hIVPZo5xlfGit6wIGoTdBMVySfT6m40FwO_11336r1i/s1600/link-trans.png' width='30'/><span>Display</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1ChPWm5NU8rlJ2BPMD6Poel9DpIx9BFLhz7RfvL-1c9EqteNj0wKBmK2FVbtmEuuae3lDk0ftbKm7GBll0bvqanGOwnpk7thwhlnhJtcdkH1q3a_PM6BFLRu3uJ1mmt-EFfYjh-Rw/s1600/home-trans.png' width='30'/><span>Clock</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN3dcp4AvcJe-8FPVx6M1cN9HY8dEKmn-CFTDhGTbUTGy3MZSHMJuRYXZVdr7SYttYhUh8GM1oPjPbLHrdblJPeZmC82VkpTTuR1AUquwD7jcJVbei5OF1qP8E3zH8njs78YzSnzG9/s1600/history-trans.png' width='30'/><span>Web</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPLMGyUVINpa-ph7OO0xWOromfDCyUSYOxRNgnFTR37KL9_SD4FT7zGNiwWAkYzbZEODvIZPIkNZdTXMwqD9uAlnU2rPdAaW3SbTiPPshIic0zJirKYd2W17X9vB8NDT39Ykk9bWGd/s1600/email-trans.png' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEoTzt0tBhkj7fxVmQp2j7rlbp3Qxh8jnuanO5Xi5fjvOMQtVE2FiOYQ9krCF9GV3pJxHmHOZ-ihzcrNPCfF3dpU9lkhHns1e-8MyGGI9Jo_dSQuF4S2QbT3Y91HR6dwAEBks_0LGW/s1600/video-trans.png' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW9SHosUdunNF7J1wIixi7AU1LCIRL7CVkHntA4Ho0a6C1yc5Mz-cLa7qoXEFD6EbptFhlgaZGqGlzV2hFM-yjsizTh64EGicGCPnekzOkLxVFH2mO88SCdgH1nVrsK1MWxnMQMZpg/s1600/rss-trans.png' width='30'/><span>Display</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVhL5ZcgHGr_gxJvVdGCpmhXpbQCEJYxKtuc694woGXNn9fqdaY14U5_2-Pcg4QVkZUuRng8zyFFBa1fVvMVKIbMdwPgmvZZMHdtGHI-zT2ZIfVeu1lZ-05oMRBmYXo4hqb_nlDOOS/s1600/email-trans.png' width='30'/><span>Clock</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-JuUIrWNCZS_FxMF5Cq9BVVYBVy1M7LTNACnXiZrX9MOgPVOEy727N3MVHBhtfaqEPKdC9tDstAtnaOTsT_pFuJec1ZRklNCwny-QHRczuO4I_FL6ekxZxQrKWLtf8SGKE2N9UxLp/s1600/calendar-trans.png' width='30'/><span>Web</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3V59cMC2imRzi26QPXsBbnWVi5Ua_3ASMtpTgzsCAI98U5CIpdm3T27MKBMdNK8rbZ52RBR2QSbpANMt2EZQiBC6X4z4sPFDN8IVjnKtDFWldJMPp6EIt8cH2AqzGErqMfKxqrVq0/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>
Silahkan costumisasi kode di atas dengan mengganti kode yang berwarna biru sesuai keinginan anda.
5. Terkahir, klik Save Template.
Selamat bermain dengan bebek2 anda, heehehe...
Jangan lupa kasih komentar ya...
3 komentar:
wah sob.... makin keren Ajah blongnya...
em. infonya juga semakin banyak...
banyaaaaaaak info baru... thanks
entar gw pasang link di blog w yaw..:))
di tunggu coment baliknya
dari dulu w pengen banget template kayak gini...
dimana bisa gw dapetin men..?
----------nompang promo sob---------------
kujungi www.mobipress8.tk
aqmencoba untuk menampilkan link download games, thema, wallpare, apps untuk Handphone.
tips and trik software.
download game 2 demensi,software2 gratis.
aq masih perlu banyak pelajar , untuk itu saran, pendapat, dan keritikan temen temen semua di butuhkan.
thanks sob...
ya ntar gw pasang juga link lo disini...
ntar w cariin template yang pas ma blog lo, trus gw posting disini...
tunggu ya...
salam blogger!!!
thanks ya dah :))