Jumat, 10 April 2009

DUCK MENU

Selamat pagi sahabat semua ..... ufhh.. setelah lama buanget istirahat, akhirnya hari ini saya bia kembali menulis posting untuk kita semua....

Okay... kali ini saya akan memberi satu trik buat bikin "DUCK MENU". Hmm.. apa sih Duck menu itu ? kalau kalian mau liat contohnya.. bisa kalian klik disini atau klik disini. Kelihatan kan menu yang diatas? yang bergerak-gerak saat mouse ada diatasnya ? (mirip-mirip dengan skin XP jenis Brickopack).

Nah.. jika kalian tertarik untuk memasangnya, silahkan ikuti petunjuk dibawah ini. Tolong dicermati dengan baik ya? karena akan ada beberapa langkah yang memang harus benar-benar diperhatikan. O.k?

Masuk AccountBlogger anda==>Dashboard/dasbor==> Layout/tataletak==> Edit HTML.

Jangan lupa "Centang" Expand Template Widget ya ?

Kemudian Copy kode ini :


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

Dan paste di BAWAH kode :

<head>

Setelah anda paste pada posisinya, kemudian silahkan anda Copy lagi kode dibawah ini :

/* Dock menu edited by jeruklegisemendheh
----------------------------------------------- */
.fisheye{
text-align: center;
height: 62px;
position: relative;
}
a.fisheyeItem
{
text-align: center;
color: #ff0000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
}
a.fisheyeItem2
{
text-align: center;
color: #ff0000;
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
----------------------------------------------- */

lalu Silahkan anda paste tepat di-ATAS kode :

]]></b:skin>

Nah... sekarang tinggal langkah terakhirnya ....

Silahkan anda copy kembali kode dibawah ini :

<div class='fisheye' id='fisheye'>
<div class='fisheyeContainter'>
<a class='fisheyeItem' href='http://www.alamattarget.com'><img src='http://AlamatURLGAMBARANDA.png' width='
50'/><span>Home</span></a>

<a class='fisheyeItem' href='http://www.alamattarget.com'><img src='http://AlamatURLGAMBARANDA.png' width='50'/><span>Email</span></a>
<a class='fisheyeItem' href='http://www.alamattarget.com'><img src='http://AlamatURLGAMBARANDA.png' width='
50'/><span>Display</span></a>
<a class='fisheyeItem' href='http://www.alamattarget.com'><img src='http://AlamatURLGAMBARANDA.pngg' width='
50'/><span>Secretk</span></a>

<a class='fisheyeItem' href='http://www.alamattarget.com'><img src='http://AlamatURLGAMBARANDA.png' width='
50'/><span>Web</span></a>
<a class='fisheyeItem' href='http://www.alamattarget.com'><img src='http://AlamatURLGAMBARANDA.png' width='
50'/><span>Find</span></a>
<a class='fisheyeItem' href='http://www.alamattarget.com'><img src='http://AlamatURLGAMBARANDA.png' width='
50'/><span>Movie</span></a>

<a class='fisheyeItem' href='http://www.alamattarget.com'><img src='http://AlamatURLGAMBARANDA.png' width='
50'/><span>Kill</span></a>
<a class='fisheyeItem' href='http://www.alamattarget.com'><img src='http://AlamatURLGAMBARANDA.png' width='
50'/><span>File</span></a>
<a class='fisheyeItem' href='http://www.alamattarget.com'><img src='http://AlamatURLGAMBARANDA.png' width='
50'/><span>Share</span></a>

<a class='fisheyeItem' href='http://www.alamattarget.com'><img src='http://AlamatURLGAMBARANDA.png' width='50'/><span>Portable</span></a>
</div>
</div>

<script type="text/javascript">

$(document).ready(
function()
{
$('#fisheye').Fisheye(
{
maxWidth: 15,
items: 'a',
itemsText: 'span',
container: '.fisheyeContainter',
itemWidth: 70,
proximity: 70,
halign : 'center'
}
)

}
);

</script>



Lalu paste tepat diBAWAH kode :

<body>

Nah.. kalu semuanya dirasa sudah benar, silahkan anda klik tombol Save/simpan perubahan.

dan lihat hasilnya ya ?

Catatan :

Jika masih terdapat pesan error, berarti anda harus mem-PARSE kode terakhir itu (kode yang diletakkan di bawah kode <body> )

Ingat.. cara PARSE sudah pernah saya posting disini atau anda bisa membacanya disini.

Atau anda bisa langsung menuju ke Situs penyedia layanan PARSE dengan klik Disini.

Ngerti kan ?

Kode warna MERAH silahkan anda ganti sesuai dengan Data/selera/alamat URL anda.

Aplikasi ini TIDAK BERJALAN bila :

Ada aplikasi sejenis pada blog anda.

Contoh :

Jika anda memasang gambar yang selalu berada diatas.

Ngerti kan?

Kalau sudah berhasil, silahkan anda share dan bagikan pada teman yang memerlukan ya?

MARI BERBAGI !!

7 komentar:

  1. keren banget Om, gue coba ah di blog gue, makasih ya Om tutorialnya, keren abisss dah

    BalasHapus
  2. berhasil gue bro.hahaha emang mantep lo :)) . makasih guru.........

    BalasHapus
  3. wahaaaaa aku uji coba ya sob mantap ga nich

    BalasHapus
  4. Mantep...

    berhasil uy....

    thanks banget yah....... :D

    BalasHapus
  5. wes pokoke sangar
    tapi kalo bisa kasih alamat gambarnya aja sekalian......biar kita baru edit link tujuannya ja..... :D

    BalasHapus
  6. postingannya gak keliatan coba diperjelas

    BalasHapus
  7. mas kok di blok ku gambarnya numpik kenapa ya? 8-}

    BalasHapus

Silahkan tulis disini dengan santai dan tertawa2 !!