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

Cara membuat Dock Menu (Menu Banner Animasi)

Dwinkha Agita Puteri Sunday, August 7, 2011

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!!!
Advertistment
Dwinkha Puisi, Puisi Remaja, Puisi Cinta, Dwinkha Blogs, puisi galau, puisi cinta
Category ›

1 comment:

  1. Uem CutersNovember 7, 2012 at 11:36 AM

    Saya coba terapkan gan, trims ya. Ditunggu kunjungannya...

    ReplyDelete

Subscribe to: Post Comments (Atom)