Home
Tukaran Link
Pasang Iklan
Contact Me
Cara Membuat Duck Menu Animasi
Original by IFX Adrian | 08 Desember 2009
3 Comments
Duck menu? Duck artinya bebek, jadinya duck menu artunya menu untuk memilih bebek? Hahaha...!!!
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/jquery-1.2.2.pack.js' type='text/javascript'/>
<script src='http://tipsbloggerzacky.googlecode.com/files/interface.js' type='text/javascript'/>
4. Selanjtnya, cari kode ]]></b:skin>, lalu paste kode berikut di atasnya:
/* duck menu by tipsbloggerzacky.blogspot.com start
----------------------------------------------- */
.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
----------------------------------------------- */
----------------------------------------------- */
.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='fisheye' id='fisheye'>
<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>
<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...
Bagikan Artikel Ini!
:))
:)]
;))
;;)
:D
;)
:p
:((
:)
:(
:X
=((
:-o
:-/
:-*
:|
8-}
~x(
:-t
b-(
:-L
x(
=))
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 :))