Adapun Cara membuat : (Widget Jam Analog Dengan CSS) sebagai berikut :
1. Login ke akun blogger
2. Klik tema
3. Edit html
Masukan CSS di bawah ini :
<style type="text/css">
.watch {
background: #34495e;
border-radius: 50%;
height: 20em;
left: 50%;
margin-left: -10em;
margin-top: -10em;
position: absolute;
top: 150%;
width: 20em;}
.watch:after, .watch:before {
content: '';
background-color: #bfbfbf;
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFBFBFBF', endColorstr='#FFECF0F1');
background-image: -moz-linear-gradient(top, #bfbfbf 0%, #ecf0f1 100%);
background-image: -webkit-linear-gradient(top, red 0%, red 100%);
background-image: linear-gradient(to bottom, #C0C0C0 0%, #FFF8DC 100%);
border-radius: 50%;
position: absolute;
height: 22em;left: -1em;
top: -1em;width: 22em;z-index: -1;}
.watch:before {
box-shadow: -0.2em -0.4em 0.5em rgba(0, 0, 0, 0.2);
height: 24em;left: -2em;
transform: rotate(180deg);
top: -2em;width: 24em;}
.watch-face {border-radius: 50%;height: 100%;width: 100%;}
.watch-face ul {list-style: none;}
.watch-face ul li {
background: #34495e;
border-radius: 50%;
color: #ecf0f1;
font-size: 2.8em;
height: 1.5em;
line-height: 1.5;
position: absolute;
text-align: center;
text-shadow: 0.05em 0.05em 0.1em rgba(0, 0, 0, 0.3);
width: 1.5em;}
.watch-face ul li:first-child {top:0;left:50%;margin-left:-0.75em;}
.watch-face ul li:nth-child(2) {margin-top:-0.75em;right:0;top:50%;}
.watch-face ul li:nth-child(3) {bottom:0;left:50%;margin-left:-0.75em;}
.watch-face ul li:nth-child(4) {margin-top:-0.75em;left:0;top:50%;}
.watch-face:after {
content: '';
background-image: -moz-linear-gradient(left bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.1) 60%);
background-image: -webkit-linear-gradient(left bottom, rgba(55, 45, 155, 0) 0%, rgba(55, 45, 155, 0) 60%, rgba(55, 45, 155, 0.1) 60%);
background-image: linear-gradient(to right top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.1) 60%);
box-shadow: inset 0.5em 1em 2em rgba(0, 50, 136, 0.3), inset -0.5em -1em 2em rgba(0, 50, 136, 0.1);
border-radius: 50%;
position: absolute;
height: 20em;left: 0;top: 0;
width: 20em;z-index: 5;}
.watch-face:before {
border-radius: 50%;
border: 0.25em solid #ecf0f1;
box-shadow: 0.05em 0.05em 0.1em rgba(0, 50, 136, 0.9), inset 0.05em 0.05em 0.1em rgba(0, 50, 136, 0.3), inset -0.05em -0.05em 0.1em rgba(0, 50, 136, 0.9), -0.05em -0.05em 0.1em rgba(0, 50, 136, 0.3);
content: '';
height: 80%;left: 9.5%;
position: absolute;top: 9.5%;width: 80%;}
[class*="watch-hand"] {
background: #bfbfbf;
border-radius: 0.4em 0.4em 0 0;
box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
left: 9.8em;
position: absolute;top: 2em;
z-index: 4;transform-origin: 50% 100%;}
.watch-hand-second {width:0.2em;top:0.9em;height:9em;left:50%;}
.watch-hand-minute {width: 0.4em;top: 2.1em;height: 8em;}
.watch-hand-hour {width: 0.6em;top: 4em;height: 6em;}
.watch-center-circle {
background: #FAEBD7;
box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.4);
border-radius: 50%;
height: 1.5em;
left: 50%;
margin-left: -0.75em;
margin-top: -0.75em;
position: absolute;top: 50%;
width: 1.5em;z-index: 5;}
.watch-center-circle:after {
background: #7f8c8d;
border-radius: 50%;
content: '';
height: 0.9em;left: 0.3em;
position: absolute;
top: 0.3em;width: 0.9em;}
.stop-watch {
position:relative !important;
background:#fff;
color:#222;
text-align:center;
margin:24.6em auto;
border:2px inset red;
width:65px;
font:bold 9px/normal arial;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var oClockAnalog = {
aSecond: [],
dtDate:new Date(),
iCurrSecond: -1,
iHourRotation: -1,
iMinuteRotation: -1,
iStepSize: 10,
iTimerAnimate: setInterval("oClockAnalog.fAnimate()", 20),
iTimerUpdate:setInterval("oClockAnalog.fUpdate()", 1000),
fAnimate: function() {
if (this.aSecond.length > 0) {
this.fRotate("analogsecond", this.aSecond[0]);
this.aSecond = this.aSecond.slice(1);
}
},
</script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/analog-clock.js"></script>
<div class="watch">
<div id="cssclock">
<div id="clockanalog">
<div class="watch-center-circle"></div>
<div class="watch-hand-second" id="analogsecond"></div>
<div class="watch-hand-minute" id="analogminute"></div>
<div class="watch-hand-hour" id="analoghour"></div>
</div>
<div class="watch-face">
<ul>
<li>12</li>
<li>3</li>
<li>6</li>
<li>9</li>
</ul>
</div>
</div>
</div>
<div class="stop-watch">
<h2>
<time id="clock"></time>
<script type="text/javascript">
(function() {
var clock = document.getElementById('clock');
setInterval(function() {
var time = new Date().toString().split(' ')[4];
clock.innerHTML = time;
}, 13);
})();
</script></h2>
</div>
Masukan Kode HTML / Javascript di bawah ini :
<script type="text/javascript">
var oClockAnalog = {
aSecond: [],
dtDate:new Date(),
iCurrSecond: -1,
iHourRotation: -1,
iMinuteRotation: -1,
iStepSize: 10,
iTimerAnimate: setInterval("oClockAnalog.fAnimate()", 20),
iTimerUpdate:setInterval("oClockAnalog.fUpdate()", 1000),
fAnimate: function() {
if (this.aSecond.length > 0) {
this.fRotate("analogsecond", this.aSecond[0]);
this.aSecond = this.aSecond.slice(1);}
},
</script>
Setelah semua kode html, (style, atau b:skin, dan javascript sudah di pasang sesuai posisinya masing-masing langkah terahir adalah
simpan, atau klik pratinjau tema terlebih dahulu,. Namun untuk saran tiada salahnya langsung klik SIMPAN dan lihat hasilnya, jika terjadi eror,
dan kode tidak berfungsi dengan baik silahkan informasikan kami di kolom komentar, salam Team SAHAB BISNIS 77.
Demikian Cara membuat (Widget Jam Analog Dengan CSS ) semoga bermanfaat terima kasih.
Tidak ada komentar
Posting Komentar