Home › Tips Blogger › Cara membuat Dock Menu (Menu Banner Animasi)

Cara membuat Dock Menu (Menu Banner Animasi)

Pernahkah Anda melihat animasi dock menu pada blog anda???…..

Sudah atau belum, berikut ini adalah tutorial tentang menambahkan animasi Dock Menu pada blog-blog blogger.

Sebelum memulai proses hack ini, direkomendasikan untuk membuat back up template blog anda.. Klik Customize > Layout > Edit HTML. Download full template dan centang pada bagian “Expand Widget Template“.

dockmenu11

Temukan tag “<head>” pada blog

<head>

Tambahkan code dibawah ini dibawah line “<head>”

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

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

Lakukan penambahan coding pada skin template anda dengan terlebih dahulu mencari tag “]]></b:skin>”

]]></b:skin>

Tambahkan code dibawah ini sebelum tag “]]></b:skin>”

/* Dock Menu oleh www.iblographics.com

**———————————————– */**

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

}

/* Akhir Dock Menu

**———————————————– */**

Temukan tag “<body>” pada blog blogger Anda

<body>

Setelah tag “<body>” tambahkan code dibawah ini.

<div class=’fisheye’ id=’fisheye’>

<div class=’fisheyeContainter’>

<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2qLF0aAVDHs_m-xQ81cbkby_jkn6tieOklsARVmZ5RDu1HOtWmdGCRHeZ0BSYQ0Wr5oqFzac-EdEHQxj10SYUjU5-WR7RapVzZS06AlTnMxggGRRv6NKAZLg5ocexMH7qz8DAV7vf/s1600/music-trans.png’ width=’30′/><span>Home</span></a>

<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLyTgLPEcASSK2vxiCTCg0qJzDcVcY2QfoYycYaDU4VGE3h_kNyIU8eQICyR9c8p8GTqE0t7DF-cpkPPUct9gvtFwq75rllKCocIXr4PF3RBHTUhJx0WIdMbeCim3hAEx0sod1-C6r/s1600/rss2-trans.png’ width=’30′/><span>Email</span></a>

<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6NuF0_8gMt0bFchbRUGuj8BXpc7gHae8uK1yuRuYup5UGTDWiUy-dyJzK7XgVV9irXIQHomIxMHX5Hk4SsLobUNklLlVvXzRXArJBow3o_xEdMXFZUL3fHo8uenXeX9MGo1klR0Hw/s1600/link-trans.png’ width=’30′/><span>Display</span></a>

<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDCfOTN7S8XEdWJw1W_xGHF-KoRULw8O8KLO8mNSdqnsfsJwdSIGWPnicHB0SPZO_oaDfIYWUnUG8XLn_61gFPWlvbg5c6Q_ORoHkE8jq5SSqGPpK0knBrqehXGvVMsiUZVD47JfOm/s1600/home-trans.png’ width=’30′/><span>Clock</span></a>

<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM9TtF_uYNzeS4g-98PrW_JjN64Lp7ir0cWN8IVI6sQ-jpptrEtnMxDKw4MQCbrK_ZsMcOlBdVS0bOz9gKuZOXaD2BZ3ch8HvdOSr8Vf16Y2fdRFHARiFK3JWefCuNl5pk4VH-Gm6z/s1600/history-trans.png’ width=’30′/><span>Web</span></a>

<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPj6InndusMBNZhXcvaDt1QW7jY9eDWbf9Qe2GS_tR8-3uJCyUvWM2EaLEsnqMa3r7GUUkzTt14kek-SkW75EeNx1QcXP7HRCIMhxkvzMIQCc9RZKEPUy7e9sgWCAlb707-OajJKtO/s1600/email-trans.png’ width=’30′/><span>Home</span></a>

<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWrWJ7fhr_mm0AURNcPW5FTWaxKr9p2OhFDx35pIN-oiXHfrbGLI2jikbM8SMmXbICEV0Q08CKun9M3QbWxSZgjnsZsbFS2KQxx-YgeqvA3sH-2f7zCn-rfgfPouD2xKpUmCNbZOt4/s1600/video-trans.png’ width=’30′/><span>Email</span></a>

<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgftMSRKHP1rgBaR1ZUJNcYFFgGBuna_R88pAaukOWVIXnzNtLLWvjEHUZCl5rgbpL6L-cgd7CX12A8e-RJv4-ZbCdLBJKZrvorwKvaqZLnZPtgSU2vS613OHMBdU4NBXm3R1q5RH-C/s1600/rss-trans.png’ width=’30′/><span>Display</span></a>

<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXe8LN8_tQoQMg9AP3QOfGOaRpRK1OXCdL70PTOFSPx1Tj_78DLToUQp3kbKgquje-Ie5OL_xz62dEo3TANQ9NudTFRtD7eUImbELXH-TwrXYiR6sQNPGfuQbY6lMjyl-JTL3bHXrA/s1600/email-trans.png’ width=’30′/><span>Clock</span></a>

<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3TnxfK8UQXFBekKSTuUI_fFsXg1J1VnN9hpT5rHmviturDr8oaX-DgtoRPQRuS08Cuo0XStxhQixxg9XBxQXviwXLlxBUxyniseQ14oCB9MS8XwrmRRieIadQwRUWi6o8TbjkrrKy/s1600/calendar-trans.png’ width=’30′/><span>Web</span></a>

<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWNphVHHfrqSH9DYx3oblcpzFt_tDmmW8suhrc6vsTpOFiMmuBNdg3Nv2Z1Tam-BD5_ia5z9bx9JfbE76Cvd0xEfstV7MITCusCsECrevprhYzAqFOdRCBBpBbR9bePM1BW7GXiNiU/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>

Langkah terakhir adalah ganti tanda “#” dengan url atau link blog blogger Anda
Berikut ini adalah tampilan “Layout” dengan Dock Menu

dockmenu2

Selamat Mencoba!!!

1 comment:

Uem CutersNovember 7, 2012 at 11:36 AM
Saya coba terapkan gan, trims ya. Ditunggu kunjungannya...
ReplyDelete
Replies