Bomomo

Cara Pembuatan nya sebagai berikut:

1. Login
2. Setelah masuk pada halaman dasbor pilih rancangan
3. Klik edit Html
4. Centang expad widget dan cari kode ]]></b:skin>agar pencarian kode lebih cepat tekan Ctrl+F atau F3
5. Salin Kode Css di bawah ini dan letakkan di atas kode yang anda cari tadi

<link rel="stylesheet" href="http://bomomo.com/default3.css" type="text/css" media="screen,projection,print" /><br /> <!--[if !IE]><![IGNORE[--><![IGNORE[]]><br /> <script type="text/javascript" src="http://bomomo.com/default-c.js?v=1_0"></script><br /> <!--<![endif]--><br /> <!--[if IE]><br /> <script type="text/javascript" src="default-flash.js"></script><br /> <![endif]--><br /> <div class="app"> <!-- google_ad_section_start(weight=ignore) --><br /> <br /> <!--[if !IE]><![IGNORE[--><![IGNORE[]]><br /> <canvas class="canvas" id="canvasBackground"></canvas><br /> <!--<![endif]--><br /> <br /> <!--[if IE]><br /> <img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 520px; width: 760px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="bomomo" data-original-id="bomomo" /><br /> <![endif]--><br /> <br /> <!--[if !IE]><![IGNORE[--><![IGNORE[]]><br /> <canvas class="canvas" id="canvasForeground" onmousedown="handleMouseDown(event)" onmouseup="handleMouseUp(event)" onmouseover="handleMouseIn(event)" onmouseout="handleMouseOut(event)" onmousemove="handleMouseMoved(event)" ></canvas><br /> <!--<![endif]--><br />

Markah Html

<div id="tools"> <span class="button" id="button1"><img alt="" src="http://bomomo.com/image/button/1.png" /></span><span class="button" id="button2"><img alt="" src="http://bomomo.com/image/button/2.png" /></span><span class="button" id="button3"><img alt="" src="http://bomomo.com/image/button/3.png" /></span><span class="button" id="button4"><img alt="" src="http://bomomo.com/image/button/4.png" /></span><span class="button" id="button5"><img alt="" src="http://bomomo.com/image/button/5.png" /></span><span class="button" id="button6"><img alt="" src="http://bomomo.com/image/button/6.png" /></span><span class="button" id="button7"><img alt="" src="http://bomomo.com/image/button/7.png" /></span><span class="button" id="button8"><img alt="" src="http://bomomo.com/image/button/8.png" /></span><span class="button" id="button9"><img alt="" src="http://bomomo.com/image/button/9.png" /></span><span class="button" id="button10"><img alt="" src="http://bomomo.com/image/button/10.png" /></span><span class="button" id="button11"><img alt="" src="http://bomomo.com/image/button/11.png" /></span><span class="button" id="button12"><img alt="" src="http://bomomo.com/image/button/12.png" /></span><span class="button" id="button13"><img alt="" src="http://bomomo.com/image/button/13.png" /></span><span class="button" id="button14"><img alt="" src="http://bomomo.com/image/button/14.png" /></span><span class="button" id="button15"><img alt="" src="http://bomomo.com/image/button/15.png" /></span><span class="button" id="button16"><img alt="" src="http://bomomo.com/image/button/16.png" /></span><span class="button" id="button17"><img alt="" src="http://bomomo.com/image/button/17.png" /></span><span class="button" id="button18"><img alt="" src="http://bomomo.com/image/button/18.png" /></span><span class="button" id="button19"><img alt="" src="http://bomomo.com/image/button/19.png" /></span><span class="button" id="button20"><img alt="" src="http://bomomo.com/image/button/20.png" /></span>         <div id="toolsSeparator"> </div> <a class="toolbarButton" href="javascript:saveCanvas()" id="toolbarButtonSave" title=""><img alt="" src="http://bomomo.com/image/save.png" /></a> <a class="toolbarButton" href="javascript:newCanvas()" id="toolbarButtonNew" title="New"><img alt="New" src="http://bomomo.com/image/new.png" /></a> <a class="toolbarButton" href="javascript:showMenu()" id="toolbarButtonMenu"><img alt="&gt;" src="http://bomomo.com/image/menu.png" /></a> <div id="menu" onmouseout="closeMenuDelay()" onmouseover="overMenu()"> <a class="saveMenu" href="javascript:saveCanvas()">save normal</a> <a class="saveMenu" href="javascript:saveCanvasHi()"> save high quality<span class="footnote">&nbsp; (rename to *.png)</span></a> <a href="javascript:showAbout()">about...</a> <a class="lastMenu" href="http://www.gamesforthebrain.com/game/soundory/" target="_top"> <span class="footnote"><em>elsewhere:&nbsp;</em></span><em>a sound memory game</em></a></div> </div> </div>

save normal

save high quality  (rename to *.png)
about...

elsewhere: a sound memory game

Selamat Mencoba

Read More

Canvas 3D

Cara Pembuatan nya sebagai berikut:

1. Login
2. Setelah masuk pada halaman dasbor pilih rancangan
3. Klik edit Html
4. Centang expad widget dan cari kode ]]></b:skin>agar pencarian kode lebih cepat tekan Ctrl+F atau F3
5. Salin Kode Css di bawah ini dan letakkan di atas kode yang anda cari tadi

<script type="text/javascript" src="http://peterned.home.xs4all.nl/3d/static/js/clay.min.js"></script><br /> <br /> <script type="text/javascript"> function DemoApp() { var stage = new Clay.Stage(640, 480, document.getElementById("canvas")); var world = stage.getWorld(); var camera = stage.getCamera(); camera.set(0, 0, 800); camera.setTarget(Clay.Vector.ZERO); var light = new Clay.Light(-2,-2, 1, 3, .5); light.setColor(255, 255, 255) world.addLight(light); stage.resizeTo(640, 480); var palet = [ new Clay.Material(37,47,51, 1, stage), new Clay.Material(65,92,79, 1, stage), new Clay.Material(134,156,128, 1, stage), new Clay.Material(147,194,204, 1, stage), new Clay.Material(206,234,238, 1, stage) ]; var rib = 256; var amount = 3; var offset = 266; function rand(range) { return Math.floor(Math.random() * range); }; for (var i=0; i<amount; i++) { for (var j=0; j<amount; j++) { for (var k=0; k<amount; k++) { var x = ((offset * i) - (offset * (amount-1))/2)*1.5, y = (offset * j) - (offset * (amount-1))/2, z = (offset * k) - (offset * (amount-1))/2; var m = palet[rand(palet.length)]; var cube = new Clay.Cube(x, y, z, 4, rib, rib, m); world.addShape(cube); } } } var flickr = []; var photos = document.getElementById("photos").getElementsByTagName("img"); for(var i=0; i<photos.length; i++) { var photo = photos[i]; var parent = photo.parentNode; if(/^a$/i.test(parent.nodeName)) { flickr.push( new Clay.Texture(photos[i].src, stage) ); } } var cameraTarget = Clay.Vector.ZERO; var t = 0, radius = 1200, slowMo = new Clay.Vector(20,20,20); stage.addEvent('click', function(e) { var poly = e.targetPolygon; var shape = e.targetShape; var rand = Math.floor(Math.random()*flickr.length); if(poly && shape) { poly.setMaterial(flickr[rand]); cameraTarget = shape; } }); stage.addEvent('enterframe', function(){ t += 0.01; var dif = cameraTarget.subtract(camera.target).divide(slowMo); camera.setTarget(camera.target.add(dif)) var position = new Clay.Vector( cameraTarget.x + (Math.sin(t) * radius), cameraTarget.y + (Math.cos(t) * radius/2), cameraTarget.z + (Math.cos(t) * radius) ); var move = position.subtract(camera).divide(slowMo); camera.moveBy(move); }); var lbi = new Image(); lbi.src = 'static/images/lostboys.png'; stage.addEvent('postrender', function(renderer){ try { renderer.context.drawImage(lbi,10,430); } catch (e) {} }); // run forest run! stage.run() } // init window.addEventListener('load', function(){ new DemoApp(); }, false); </script> <style type="text/css"> * { font-family:arial; font-size:11px; } h1 { color:red; font-size:150%; } .canvas3D { background:#f0f0f0; width:640px; height:480px; border:3px solid gray; } #photos { display:none; } </style>

6.Cari kode </body> letakkan kode javascript di bawah ini diatas nya:

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>

Markah Html

<div id="canvas"> </div> <h1>Canvas in 3D</h1> <p> Click a surface for a random photo. Photos from <a href="http://flickr.com/">flickr</a>; <a href="http://www.flickr.com/groups/lost-boys/">http://www.flickr.com/groups/lost-boys/</a> </p> <p> Requires a browser with canvas support. See the <a href="http://lbi.lostboys.nl/blog/artikelen/canvas-in-full-3d/">Lost Boys blog</a> for more details.  </p> <div id="photos"> <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?show_name=1&count=10&display=random&size=m&layout=x&source=all_tag&tag=lbhomepage&user=76007934%40N00"></script> </div>

Canvas in 3D

Click a surface for a random photo. Photos from flickr; http://www.flickr.com/groups/lost-boys/

Requires a browser with canvas support. See the Lost Boys blog for more details.

Selamat Mencoba

Read More

Subtle Css3 Typography

Cara Pembuatan nya sebagai berikut:

1. Login
2. Setelah masuk pada halaman dasbor pilih rancangan
3. Klik edit Html
4. Centang expad widget dan cari kode ]]></b:skin>agar pencarian kode lebih cepat tekan Ctrl+F atau F3
5. Salin Kode Css di bawah ini dan letakkan di atas kode yang anda cari tadi

<style> body { background: #666; padding: 1em; } h1 { position: relative; font-size: 200px; margin-top: 0; font-family: 'Myriad-Pro', 'Myriad', helvetica, arial, sans-serif; text-shadow: 2px 3px 3px #292929; letter-spacing: -7px; -webkit-text-stroke: 1px white; } h1 a { text-decoration: none; color: #ffffff; position: absolute; -webkit-mask-image: -webkit-gradient(linear, left top, left bottombottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,0)), to(rgba(0,0,0,1))); text-shadow: 0 2px 0 #e9e9e9; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } h1 a:hover { color: #185a50; } h1:after { color: #dbdbdb; content : attr(data-title); } </style>

Markah Html

<h1 data-title="Hello Readers"> <a href="#"> Hello Readers </a> </h1>

Hello Readers

Selamat Mencoba

credit: net.tutplus

Read More

I Love Typography

Cara Pembuatan nya sebagai berikut:

1. Login
2. Setelah masuk pada halaman dasbor pilih rancangan
3. Klik edit Html
4. Centang expad widget dan cari kode ]]></b:skin>agar pencarian kode lebih cepat tekan Ctrl+F atau F3
5. Salin Kode Css di bawah ini dan letakkan di atas kode yang anda cari tadi

<style> body { padding:0; margin:0; font-family:Times New Roman, serif; background:#000; } p { position:relative; width:1100px; padding:100px 0 0; margin:0 auto; font-size:175px; font-weight:bold; line-height:1.2; letter-spacing:-13px; color:#0caac7; -moz-transform:rotate(-20deg); -webkit-transform:rotate(-20deg); -o-transform:rotate(-20deg); transform:rotate(-20deg); } /* "i" */ p:first-letter { float:left; margin:-137px -20px 0 0; font-size:880px; line-height:595px; text-transform:lowercase; } /* "love" */ p:first-line { font-size:200px; } /* "typography" */ p strong { display:block; margin:-80px 0 0; font-weight:normal; letter-spacing:-2px; text-transform:capitalize; } p strong:first-letter { margin-right:-30px; color:#fff; } /* "a lot" */ p em { position:absolute; z-index:10; top:100px; left:147px; width:136px; overflow:hidden; padding-left:64px; font-size:200px; font-style:normal; text-transform:lowercase; color:#fff; } p em:first-letter { float:left; margin:130px 0 0 -55px; font-size:80px; font-style:italic; line-height:20px; color:#fff; } /* create the heart shape */ p:before, p:after { content:""; position:absolute; z-index:1; top:225px; left:120px; width:75px; height:50px; background:#000; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); -webkit-border-top-left-radius:25px; -webkit-border-bottom-left-radius:30px; -moz-border-radius:25px 0 0 30px; border-radius:25px 0 0 30px; } p:after { left:138px; -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-border-radius:0; -webkit-border-top-right-radius:25px; -webkit-border-bottom-right-radius:30px; -moz-border-radius:0 25px 30px 0; border-radius:0 25px 30px 0; } /* hide the tip of the "t" from "a lot" */ p strong:before { content:""; position:absolute; z-index:11; top:205px; left:341px; width:7px; height:7px; background:#000; -webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px; } </style><br />

Markah Html

<p>I love<strong> typography</strong<<em> a lot</em></p>

I love typography a lo

Selamat Mencoba

credit:

Read More

Ball Pool

Cara Pembuatan nya sebagai berikut:

1. Login
2. Setelah masuk pada halaman dasbor pilih rancangan
3. Klik edit Html
4. Centang expad widget dan cari kode </body>agar pencarian kode lebih cepat tekan Ctrl+F atau F3
5. Salin Kode Css di bawah ini dan letakkan di atas kode yang anda cari tadi

<script src="http://mrdoob.com/projects/chromeexperiments/ball_pool/js/protoclass.js"> </script><br /> <script src="http://mrdoob.com/projects/chromeexperiments/ball_pool/js/box2d.js"> </script><br /> <br /> <script src="http://mrdoob.com/projects/chromeexperiments/ball_pool/js/Main.js"> </script>

Markah Html

<div id="canvas"> </div>

Selamat Mencoba

credit: mrdoob

Read More

Water Fall

Cara Pembuatan nya sebagai berikut:

1. Login
2. Setelah masuk pada halaman dasbor pilih rancangan
3. Klik edit Html
4. Centang expad widget dan cari kode ]]></b:skin>agar pencarian kode lebih cepat tekan Ctrl+F atau F3
5. Salin Kode Css di bawah ini dan letakkan di atas kode yang anda cari tadi

<style> html, body { margin:0px; padding:0px; height:100%; } #canvas { padding:0; margin:0; background-color:#fff; } </style><br /> <br /> <br /> <script src="http://experiments.lionel.me/blocs/lib/prototype-1.6.0.2.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/common/b2Settings.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/common/math/b2Vec2.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/common/math/b2Mat22.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/common/math/b2Math.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/collision/b2AABB.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/collision/b2Bound.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/collision/b2BoundValues.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/collision/b2Pair.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/collision/b2PairCallback.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/collision/b2BufferedPair.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/collision/b2PairManager.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/collision/b2BroadPhase.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/collision/b2Collision.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/collision/Features.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/collision/b2ContactID.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/collision/b2ContactPoint.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/collision/b2Distance.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/collision/b2Manifold.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/collision/b2OBB.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/collision/b2Proxy.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/collision/ClipVertex.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/collision/shapes/b2Shape.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/collision/shapes/b2ShapeDef.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/collision/shapes/b2BoxDef.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/collision/shapes/b2CircleDef.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/collision/shapes/b2CircleShape.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/collision/shapes/b2MassData.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/collision/shapes/b2PolyDef.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/collision/shapes/b2PolyShape.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/b2Body.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/b2BodyDef.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/b2CollisionFilter.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/b2Island.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/b2TimeStep.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/contacts/b2ContactNode.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/contacts/b2Contact.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/contacts/b2ContactConstraint.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/contacts/b2ContactConstraintPoint.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/contacts/b2ContactRegister.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/contacts/b2ContactSolver.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/contacts/b2CircleContact.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/contacts/b2Conservative.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/contacts/b2NullContact.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/contacts/b2PolyAndCircleContact.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/contacts/b2PolyContact.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/b2ContactManager.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/b2World.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/b2WorldListener.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/joints/b2JointNode.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/joints/b2Joint.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/joints/b2JointDef.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/joints/b2DistanceJoint.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/joints/b2DistanceJointDef.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/joints/b2Jacobian.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/joints/b2GearJoint.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/joints/b2GearJointDef.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/joints/b2MouseJoint.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/joints/b2MouseJointDef.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/joints/b2PrismaticJoint.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/joints/b2PrismaticJointDef.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/joints/b2PulleyJoint.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/joints/b2PulleyJointDef.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/joints/b2RevoluteJoint.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/dynamics/joints/b2RevoluteJointDef.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/common/viewer.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/box2d/common/basicShapes.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/abb/helpers/noise.js"> </script><br /> <script src="http://experiments.lionel.me/blocs/js/abb/physics/waterfall.js"> </script>

Markah Html

<canvas id="canvas" width="100" height="100"></canvas>

Selamat Mencoba

Read More

Colorful Clock With Css&Jquery

Cara Pembuatan nya sebagai berikut:

1. Login
2. Setelah masuk pada halaman dasbor pilih rancangan
3. Klik edit Html
4. Centang expad widget dan cari kode ]]></b:skin>agar pencarian kode lebih cepat tekan Ctrl+F atau F3
5. Salin Kode Css di bawah ini dan letakkan di atas kode yang anda cari tadi

<link href="http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/styles.css" rel="stylesheet" type="text/css"></link><br /> <link href="http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/jquery.tzineClock/jquery.tzineClock.css" rel="stylesheet" type="text/css"></link><br /> <br /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"> </script><br /> <script src="http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/jquery.tzineClock/jquery.tzineClock.js" type="text/javascript"> </script><br /> <br /> <script src="http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/script.js" type="text/javascript"> </script>

Markah Html

<div id="fancyClock"> </div>

Selamat Mencoba

credit: tutorialzine

Read More