About

Search This Blog

Friday 28 January 2011

Cara membuat Dock Menu (Menu Banner Animasi)

dockmenu

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/AVvXsEjMumE-DZW68ty9Q6sOHsyMoAT8o-yl3IAKro_FjcrxXV_hCKUd1Yu7odQUx5PYQ2fIEunj-h6swjgPRQIBAWZ7KWD9lI3i10TOO8r7X7MqRYrQ8-E7jADuhDBS_Lf_UsMe2-k6ueYR/s1600/music-trans.png’ width=’30′/><span>Home</span></a>


<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGQOUGJUYdj5H16a9LRwj7-59IGoYMED-XCIe8P4EiaXO_vpVjCD1dVqIBcSTYutSTPL9KvM86QYxEMYMfPZ-TRH5tfbfl18DRk9695oA38qi4sCr15XSM1AIeb6BfUBsiGMaopPnn/s1600/rss2-trans.png’ width=’30′/><span>Email</span></a>

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

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


<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGAF8zEnaQ_30xTDvPkGn_0vJwbNZXE2inghLQs5ZEoqmMEufnxEZ4ULjATRHk_mLW-PSzzJd0UKEukBK-VlqYmIIFq-9uibLHVpE3MY1RSxXtlHT4t13EOP4lNEmTCZqqflO4Kj0C/s1600/history-trans.png’ width=’30′/><span>Web</span></a>

<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDWXJwmzOK-9NpIlEd5CEF2eE4WxiKbovYRQLwhyphenhyphenjMkr6rPnv5xmxoMX6XfDnIlOZC9oTry5dL2imyFSP2hI9LNGqWJbCC-He1inJLYEdvkb6V_EiSS0TG0QeE0dd-DKkaBhXI5IAB/s1600/email-trans.png’ width=’30′/><span>Home</span></a>

<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv7T7rNamqKdqMsCdrzi_MtjitJ277iBfGZ12gl8b_FQlqrZTjy-SUirxKDZQKEEnqSNT0-gQ2lamZl8dLgeCgzpfMyn0KC5y0d8oMolH4VA08ybrfBB9FouET3AgR9lgbyy2ToTmQ/s1600/video-trans.png’ width=’30′/><span>Email</span></a>


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

<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLfUxlrJHUA-x3iLf_XCOs7dbNo8C4Cv5IvzuFHfGbJE5fz7gZbLX9EaghMD-1AqW_vY8nNUmy-b2dqkfJ6bqhX6agbmhyphenhyphenh78YIeRfX3jpBu0vUc34YEqhKqkQ-tM5z8Ea3biD01eg/s1600/email-trans.png’ width=’30′/><span>Clock</span></a>

<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5bt0p9ZjDPMqespn_1jNz_FFYkCCUeGXw_CY1KR05y3tDKI7kGEIpCBkj3-VAf3qMUvg-1xE1o61zxynsDSS9lOE6Q5UUE2B0B-DgXIARTb0F-dYfu8-4y2xFzmkEzHMM0eBlilAP/s1600/calendar-trans.png’ width=’30′/><span>Web</span></a>


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


Referensi : http://iblographics.com/



0 komentar:

Post a Comment