Saturday, 29 January 2011

Cara membuat Dock Menu (Menu Banner Animasi)

Category


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/AVvXsEj5l8YHCXcw1_2F-rf0deVScu1EfD6TQ7tNLUACJhrGyyphLnoVCBxaR6J8hBny0QO1jP6HrtdZkbLaQUJbrjqzXMTFu6Cg3-TDiMLKToCEOcmsCz5xNn9nRNgQu6IL0o-2ftdxN7mD/s1600/music-trans.png’ width=’30′/><span>Home</span></a>


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

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

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


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

<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJsLvzeY3VzADP7DnfVrUOniq5FCV0k0LNkb1YI94jlE08jWlHDa0SXkJFBb6Ops3A5u3NjWDSZX4tP3lbGw2OikkMO5EOD-kBc9-xrxLycTQOQSNDn6r7A-I2MN3g0m5DLIWWwcUz/s1600/email-trans.png’ width=’30′/><span>Home</span></a>

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


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

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

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


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



Posted by imam pada 11:48

8 comments:

  1. muliamar29 January 2011 at 23:22

    Insya Allah.. sy akan mengunjungi blog ini, banyak tutorial yang harus sy pelajari.Salam dari jauh....

    ReplyDelete
  2. ijo cakep1 February 2011 at 09:23

    bagus juga...blognya..saya pasti sering mengujungi blog anda karena bayak ilmu yang harus pelajari dari blog ini..semog ilmu yang membuat blog ini menambah ilmunya..(amien..)

    ReplyDelete
  3. ijo cakep1 February 2011 at 09:24

    bagus juga...blognya..saya pasti sering mengujungi blog anda karena bayak ilmu yang harus pelajari dari blog ini..semog ilmu yang membuat blog ini menambah ilmunya..(amien..)

    ReplyDelete
  4. Anonymous1 February 2011 at 09:25

    bagus juga...blognya..saya pasti sering mengujungi blog anda karena bayak ilmu yang harus pelajari dari blog ini..semog ilmu yang membuat blog ini menambah ilmunya..(amien..)

    ReplyDelete
  5. Unknown2 February 2011 at 07:57

    MATUR NUWUN KANG INFONE

    ReplyDelete
  6. Cyber4rt Crew21 March 2011 at 01:09

    nais inpo bang... keep share

    ReplyDelete
  7. Sholichin Ai No Heiwa17 May 2011 at 09:10

    mantap shob,,,,,,,,,,,,,

    ReplyDelete
  8. rahmat30 December 2012 at 11:46

    mantabs infonya. nice artikel.

    ReplyDelete

Sempatkanlah sedikit waktu untuk mengomentari Postingan Blogku, karna orang yang baik , adalah orang yang meninggalkan Komentar setelah Membaca! Terima Kasih !!
Untuk yang tidak memiliki Account, silahkan pilih Beri komentar sebagai: Anomymous