Add a Stopwatch in Blogger created in CSS

Many from you see stopwatch in your mobile phones because all of you have mobile phones. But not in any website or in blog. Stopwatch is very useful to us to note the time taken by an object. Now you can add a stopwatch in your blogger blog. View here...

This stopwatch is created in CSS, HTML and JavaScript. This stopwatch will work same as in the mobile. Add this stopwatch in your blog and impress your friends. You can add this stopwatch in Blogger, WordPress, Website, Tumblr, etc.

View stopwatch here in the image below.

This stopwatch has three buttons. As you can see in the image above. First, 'Start' button is used to start the timer in stopwatch. Second, 'Stop' button is used to stop the timer in the stopwatch. Third, 'Reset' button is used to reset the timer in the stopwatch as 00'00'00'000.

Add this in Blog :

Open Blogger in your browser and Log In to your account.
Click on 'Layout' after Log In.
In Layout, click on 'Add a Gadget' and select 'HTML/JavaScript'. You can also add this stopwatch in your blog posts.
Now, Copy and paste the code in HTML/JavaScript or in Posts.

Copy below CSS and HTML code of Stopwatch.

<style>
.container {
	padding: 0px;
	text-align: center;
}
.timer {
	padding: 10px;
	background: linear-gradient(top, #222, #444);
	overflow: hidden;
	display: inline-block;
	border: 7px solid #D8D8D8;
	border-radius: 5px;
	position: relative;
	box-shadow: 
		inset 0 -2px 10px 1px rgba(0, 0, 0, 0.75), 
		0 5px 20px -10px rgba(0, 0, 0, 1);
}
.cell {
	width: 0.60em;
	height: 40px;
	font-size: 50px;
	overflow: hidden;
	position: relative;
	float: left;
}
.numbers {
	width: 0.6em;
	line-height: 40px;
	font-family: digital, arial, verdana;
	text-align: center;
	color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	text-shadow: 0 0 5px rgba(255, 255, 255, 1);
}
#timer_controls {
	margin-top: 4px;
}
#timer_controls label {
	cursor: pointer;
	padding: 5px 10px;
	background: #efefef;
	font-family: arial, verdana, tahoma;
	font-size: 11px;
	border-radius: 0 0 3px 3px;
        border: 1px solid gray;
}
#timer_controls label:hover {
	cursor: pointer;
	padding: 5px 10px;
	background: #efefef;
	font-family: arial, verdana, tahoma;
	font-size: 11px;
	border-radius: 0 0 3px 3px;
        background-color: #BFEAF0;
}
input[name="controls"] {display: none;}
#stop:checked~.timer .numbers {animation-play-state: paused;}
#start:checked~.timer .numbers {animation-play-state: running;}
#reset:checked~.timer .numbers {animation: none;}
.moveten {
	animation: moveten 1s steps(10, end) infinite;
	animation-play-state: paused;
}
.movesix {
	animation: movesix 1s steps(6, end) infinite;
	animation-play-state: paused;
}
.second {animation-duration: 10s;}
.tensecond {animation-duration: 60s;} 
.milisecond {animation-duration: 1s;} 
.tenmilisecond {animation-duration: 0.1s;}
.hundredmilisecond {animation-duration: 0.01s;}
.minute {animation-duration: 600s;} 
.tenminute {animation-duration: 3600s;} 
.hour {animation-duration: 36000s;} 
.tenhour {animation-duration: 360000s;} 
@keyframes moveten {
	0% {top: 0;}
	100% {top: -400px;} 
	}
@keyframes movesix {
	0% {top: 0;}
	100% {top: -240px;} 
	}
@font-face {
	font-family: 'digital';
	src: url('http://kbfont.googlecode.com/files/DS-DIGI.TTF');
}
</style>
<div class="container">
<input id="start" name="controls" type="radio" />
<input id="stop" name="controls" type="radio" />
<input id="reset" name="controls" type="radio" />
<div class="timer">
<div class="cell">
<div class="numbers tenhour moveten">
0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell">
<div class="numbers hour moveten">
0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell divider">
<div class="numbers">
:</div>
</div>
<div class="cell">
<div class="numbers tenminute movesix">
0 1 2 3 4 5 6</div>
</div>
<div class="cell">
<div class="numbers minute moveten">
0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell divider">
<div class="numbers">
:</div>
</div>
<div class="cell">
<div class="numbers tensecond movesix">
0 1 2 3 4 5 6</div>
</div>
<div class="cell">
<div class="numbers second moveten">
0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell divider">
<div class="numbers">
:</div>
</div>
<div class="cell">
<div class="numbers milisecond moveten">
0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell">
<div class="numbers tenmilisecond moveten">
0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell">
<div class="numbers hundredmilisecond moveten">
0 1 2 3 4 5 6 7 8 9</div>
</div>
</div>
<div id="timer_controls">
<label for="start">Start</label>
<label for="stop">Stop</label>
<label for="reset">Reset</label></div>
</div>
<script src="http://kbtrickswatch.googlecode.com/files/Stopwatch.js" type="text/javascript"></script>

If you have any kind of problem about this stopwatch article, feel free to tell us by comments. Also share it with your friends..

KB Tricks

Add a Stopwatch in Blogger created in CSS

Labels