Pasang Jam Animasi Pelangi Dengan CSS & jQuery

Cara membuatnya :
1. Login blogger
2. Rancangan, Elemen Laman, Tambah Gadget,
3. Pilih HTML/Java script Dan Simpan kode berikut :

<style> /*---------------------- Colorful Clock With CSS & jQuery --------------------------------------------*/ .clock{     /* The .clock div. Created dynamically by jQuery */     background-color:#252525;     height:100px;     width:100px;     position:relative;     overflow:hidden;     float:left; }
.clock .rotate{     /* There are two .rotate divs - one for each half of the background */     position:absolute;     width:100px;     height:100px;     top:0;     left:0; }
.rotate.right{     display:none;     z-index:11; }
.clock .bg, .clock .front{     width:50px;     height:100px;     background-color:#252525;     position:absolute;     top:0; }
.clock .display{     /* Holds the number of seconds, minutes or hours respectfully */     position:absolute;     width:100px;     font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;     z-index:20;     color:#F5F5F5;     font-size:30px;     text-align:center;     top:37px; /* sesuaikan agar letak angkanya pas di tengah */     left:0;        /* CSS3 text shadow: */     text-shadow:4px 4px 5px #333333; }
/* The left part of the background: */
.clock .bg.left{      left:0; }
/* Individual styles for each color: */ .orange .bg.left{      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHCn9Z0kXeHNiK609nhDt9Ayd1JsPtSAlFLvViWdSX9JfY8_FkYeoqj9IUynb0F_NT2VEGLNWXJCcHuNpde3Vx7YBbQi0ow9Vgw6mdpr90FJVFsopAdkgoH3bkLOl0j4i6wVKFjyQC8NQ/s1600/orange.png) no-repeat left top; } .green .bg.left{      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVg4SwAzA8roGHoGVpgnlL4giC49H7kaTtBcHO652tQgH4xxdrT6vAe2WL8IZlrhWQ3ka_rjhAhqhs7HBakbNfHReYCBjtv0zbEHvJ7bLKnG6hGPh1uZN7jp404Dj_WQ2LWkcoSo2IWuM/s1600/green.png) no-repeat left top;      } .blue .bg.left{         background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqcsnm0qTXV9AOtZSmAAhFchbQsIni52bWUIB7P5ihlaXTTQYBotPbkTKyZRcCYSE1fA_qmS3bMbuDfxe9cypqSxCjcwbW7mNjluLuXrzMz8K5gyqo33mOO6-yzqpeDX_laSg2V9TCJqg/s1600/blue.png) no-repeat left top;         }
/* The right part of the background: */ .clock .bg.right{ left:50px; }
.orange .bg.right{      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHCn9Z0kXeHNiK609nhDt9Ayd1JsPtSAlFLvViWdSX9JfY8_FkYeoqj9IUynb0F_NT2VEGLNWXJCcHuNpde3Vx7YBbQi0ow9Vgw6mdpr90FJVFsopAdkgoH3bkLOl0j4i6wVKFjyQC8NQ/s1600/orange.png)no-repeat right top;      } .green .bg.right{      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVg4SwAzA8roGHoGVpgnlL4giC49H7kaTtBcHO652tQgH4xxdrT6vAe2WL8IZlrhWQ3ka_rjhAhqhs7HBakbNfHReYCBjtv0zbEHvJ7bLKnG6hGPh1uZN7jp404Dj_WQ2LWkcoSo2IWuM/s1600/green.png) no-repeat right top;      } .blue .bg.right{      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqcsnm0qTXV9AOtZSmAAhFchbQsIni52bWUIB7P5ihlaXTTQYBotPbkTKyZRcCYSE1fA_qmS3bMbuDfxe9cypqSxCjcwbW7mNjluLuXrzMz8K5gyqo33mOO6-yzqpeDX_laSg2V9TCJqg/s1600/blue.png) no-repeat right top;      }

.clock .front.left{     left:0;     z-index:10; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://kangdadang.googlecode.com/files/jquery.tzineClock.js"></script> <script type="text/javascript" src="http://kangdadang.googlecode.com/files/script.js"></script>

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