Cara membuat Dock Menu (Menu Banner Animasi) ~ Tutorial Tips, Trik komputer

Friday, 28 January 2011

Cara membuat Dock Menu (Menu Banner Animasi)

20:48 Tips - Trik Blogger No comments

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

Subscribe to: Post Comments (Atom)