Animated Tag Cloud dengan JQuery & CSS3

DEMO :

• menu 1
• menu 2
• menu 3
• menu 4
• menu 5
• menu 6
• menu 7
• menu 8
• menu 9
• menu 10
• menu 11
• menu 12
• menu 13
• menu 14
• menu 15
• menu16
• www.unregister.co.cc

mw yang seperti di atas???


langsung saja ke TKP :


step terakhir : masuk blogger - add widget - html/javascript 


masukkan kode berikut :

KLIK "SELECT ALL" UNTUK MELAKUKAN COPY PASTE

<style type="text/css"> #tag-cloud { width: 200px; height: 400px; border: 2px solid black; margin: 20px auto; overflow: hidden; position: relative; background: #111 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Mart10/template-GR/BLACKV295h1.gif) center center repeat; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; box-shadow:1px 1px 12px #000; -moz-box-shadow:1px 1px 12px #000; -webkit-box-shadow:1px 1px 12px #000; -o-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; list-style: none; } #tag-cloud:hover { -o-transform: scale(1.1) rotate(0deg) translate(0px); -moz-transform: scale(1.1) rotate(0deg) translate(0px); -webkit-transform: scale(1.1) rotate(0deg) translate(0px); opacity: 1.0; background: black url(http://swishkorea.files.wordpress.com/2011/03/han-seung-yeon_hannah_20090401.jpg); border-color: red; box-shadow:1px 4px 18px #000; -moz-box-shadow:1px 4px 18px #000; -webkit-box-shadow:1px 4px 18px #000; } #tag-cloud li {list-style: none;} </style> <br /> <br /> <style type="text/css"> a.white { color: #fff;} a.green { color: #00FF99;} a.yellow { color: #FFFF99;} a.blue { color: #02ddfe;} a.gray { color: #CCCCCC;} a.orange { color: #FFCC99;} a.lime { color: #FF99FF;} a.red { color: #fd3a31;} a.white, a.green, a.yellow, a.blue, a.gray, a.orange, a.lime, a.red { text-decoration:none; padding:3px 8px; opacity: 0.8; filter: alpha(opacity=80); font-family: Times New Roman; font-weight: normal; text-shadow: 0 1px 1px #000; -o-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; } a.white:hover, a.green:hover, a.yellow:hover, a.blue:hover, a.gray:hover, a.orange:hover, a.lime:hover, a.red:hover { background-color:#777; opacity: 1.0; filter: alpha(opacity=100); border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; text-shadow: 0 1px 1px #000; box-shadow:1px 1px 15px #fff; -moz-box-shadow:1px 1px 15px #fff; -webkit-box-shadow:1px 1px 15px #fff; -o-transform: scale(1.2); -moz-transform: scale(1.2); -webkit-transform: scale(1.2); color:#990000; border: 2px solid #999; } /*#tag-cloud { position:relative; top:10px; left:10px; height:300px; width:400px; border:1px solid red; overflow:hidden; margin-bottom:40px;}*/ #tag-cloud1 { position:relative; top:10px; left:10px; height:400px; width:500px; border:1px solid red; overflow:hidden; margin-bottom:40px;} #tag-cloud2 { position:relative; top:10px; left:10px; height:300px; width:300px; border:1px solid red; overflow:hidden; margin-bottom:40px;} </style><br /> <br /> <ul id="tag-cloud" style="list-style: none outside none;"> <li style="font-size: 21.4874px; left: 61.2577px; position: absolute; top: 314.181px; z-index: 0;"><a class="yellow" href="#" target="_blank">menu 1</a></li> <li style="font-size: 29.9565px; left: 85.8103px; position: absolute; top: 184.835px; z-index: 1;"><a class="blue" href="#" target="_blank">menu 2</a></li> <li style="font-size: 8.70733px; left: 48.6181px; position: absolute; top: 347.569px; z-index: 2;"><a class="lime" href="#" target="_blank">menu 3</a></li> <li style="font-size: 8.96167px; left: 45.8175px; position: absolute; top: 77.2877px; z-index: 3;"><a class="gray" href="#" target="_blank">menu 4</a></li> <li style="font-size: 22.9467px; left: 32.1696px; position: absolute; top: 20.1486px; z-index: 4;"><a class="white" href="#" target="_blank">menu 5</a></li> <li style="font-size: 25.2833px; left: 55.5247px; position: absolute; top: 159.073px; z-index: 5;"><a class="green" href="#" target="_blank">menu 6</a></li> <li style="font-size: 28.3735px; left: 16.3508px; position: absolute; top: 303.118px; z-index: 6;"><a class="orange" href="#" target="_blank">menu 7</a></li> <li style="font-size: 30.3524px; left: 87.4015px; position: absolute; top: 247.645px; z-index: 7;"><a class="blue" href="#" target="_blank">menu 8</a></li> <li style="font-size: 11.3386px; left: 73.7284px; position: absolute; top: 364.409px; z-index: 8;"><a class="yellow" href="#" target="_blank">menu 9</a></li> <li style="font-size: 27.7307px; left: 86.1274px; position: absolute; top: 189.598px; z-index: 9;"><a class="red" href="#" target="_blank">menu 10</a></li> <li style="font-size: 27.5148px; left: 109.373px; position: absolute; top: 46.4496px; z-index: 10;"><a class="white" href="#" target="_blank">menu 11</a></li> <li style="font-size: 9.27861px; left: 17.5111px; position: absolute; top: 192.236px; z-index: 11;"><a class="gray" href="#" target="_blank">menu 12</a></li> <li style="font-size: 29.966px; left: 20.6761px; position: absolute; top: 126.852px; z-index: 12;"><a class="lime" href="#" target="_blank">menu 13</a></li> <li style="font-size: 24.7192px; left: 67.6245px; position: absolute; top: 347.758px; z-index: 13;"><a class="blue" href="#" target="_blank">menu 14</a></li> <li style="font-size: 25.9631px; left: 65.9169px; position: absolute; top: 58.3731px; z-index: 14;"><a class="red" href="http://#" target="_blank">menu 15</a></li> <li style="font-size: 7.8104px; left: 51.6339px; position: absolute; top: 209.054px; z-index: 15;"><a class="orange" href="#" target="_blank">menu16</a></li> <li style="font-size: 35.9642px; left: 43.8172px; position: absolute; top: 161.033px; z-index: 16;"><a class="orange" href="http://unregizter.blogspot.com/" target="_blank">www.unregister.co.cc</a></li> </ul><br /> <br /> <br />

save dan liat hasilnya selamat mencoba dan jangan lupa kasi sedikit komen atau tambahan !!!