Gadget Unik Part 1 (Fish eye/OSX-dock pada Blogger)

Salam newbie, ada tutorial menarik nih untuk buat effect pembesaran gambar yang kodingnya sudah dibuat untuk pengguna blogger.

Contohnya seperti ini (walaupun hasil akhir gak 100% mirip :P):

effect yang terjadi kira-kira seperti ini (lengkapnya bisa dilihat di Demo Page)

• ZURB
  

Cari kode

]]></b:skin>

Paste kode dibawah ini, tepat diatas kode tadi

/***************START OSX-dock*********************/  
div.cap { display: block; height: 100px; width: 40px; background: url(/playground/osx-dock/dock-background-left.png) bottom left no-repeat; }
  
div.cap.left { position: absolute; bottom: 0px; left: 0px; }
div.cap.right { background-position: right bottom; position: absolute; top: 0px; right: 0px;
}

ul.osx-dock { display: inline-block; height: 130px; padding: 0 40px 0 0; background: url(/playground/osx-dock/dock-background-left.png) no-repeat right bottom; overflow: hidden; margin: 0 0 0 40px; }

ul.osx-dock li { display: block; position: relative; float: left; width: 50px; height: 50px; margin: 60px 0 4px 0; -webkit-transition: 0.15s linear; -webkit-transition-property: -webkit-transform margin; text-align: center; }
  
ul.osx-dock li a { display: block; height: 50px; padding: 0 1px; -webkit-transition: 0.15s linear; -webkit-transition-property: -webkit-transform margin; margin: 0;
  -webkit-box-reflect: below 2px
-webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.45, transparent), to(rgba(255, 255, 255, 0.25)));
     }
ul.osx-dock li a img { width: 48px; }
  
ul.osx-dock li:hover { margin-left: 9px; margin-right: 9px; z-index: 200;}
ul.osx-dock li:hover a { -webkit-transform-origin: center bottom; -webkit-transform: scale(1.5); }

ul.osx-dock li.nearby { margin-left: 6px; margin-right: 6px; z-index: 100;}
ul.osx-dock li.nearby a { -webkit-transform-origin: center bottom; -webkit-transform: scale(1.25);}
ul.osx-dock li span { background: rgba(0,0,0,0.75); position: absolute; bottom: 80px; margin: 0 auto; display: none; width: auto; font-size: 11px; font-weight: bold; padding: 3px 6px; -webkit-border-radius: 6px; color: #fff; }
  
ul.osx-dock li:hover span { display: block; }
  
div#dockContainer { position: fixed; bottom: 12px; height: 120px; padding: 50px 0 0; text-align: center; -webkit-border-radius: 6px; -moz-border-radius: 6px; width: 100%; line-height: 1; z-index: 100; }

div#dockWrapper { width: auto; display: inline-block; position: relative; border-bottom: solid 2px rgba(255,255,255,.35); line-height: 0; }
/***************END OSX-dock*********************/

Add Gadget - Html/Javascript

<div>
<p>
<ul class="osx-dock">
<li class="active">
<span>ZURB</span>
<a href="http://www.zurb.com" title="ZURB"><img src="http://www.zurb.com/playground/osx-dock/zurb-icon.png" /></a>
</li>
<li>
<span>LinkedIn</span>
<a href="http://www.linkedin.com" title="LinkedIn"><img src="http://www.zurb.com/playground/osx-dock/linkedin-icon.png" /></a>
</li>
</ul>
</p>
</div>

Demo Page:
Test1
Test2