How to Add Digital Clock to Your Blog or Website - Web Development and Web Design Codes

Latest

Thursday, March 8, 2018

How to Add Digital Clock to Your Blog or Website

How to Add Digital Clock to Your Blog or Website

Hi Friends today i will show you how to add a nice digital clock to your blogger or website sidebar widget..you can use this clock to your blog or website to show current time and data to your user..
let's go..
How to Add Digital Clock to Your Blog or Website
How to Add Digital Clock to Your Blog or Website
1. Login to Your Blogger Account.
2. From your Dashboard click on 'Layout' from left sidebar..
3. Now Click on 'Add a Gadget' from right sidebar..
How to Add Digital Clock to Your Blog or Website
4. in this step you will get a popup browser window with lot of option now find out 'HTML/JavaScript' and Click it..
Digital Clock to Your Blog or Website
5. You will get a Content box now copy the below codes and paste it in content box..then click on save..
Codes for JavaScript Digital Clock
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<style type="text/css">
 
#clockbody{
  background:#202020;
  font:italic 5px Arial, Helvetica, sans-serif;
  margin:0;
  padding:0;
  min-width:960px;
  color:black;
}
a {
 text-decoration:none;
 color:#00c6ff;
}
 
h1 {
 font: 4em normal Arial, Helvetica, sans-serif;
 padding: 20px; margin: 0;
 text-align:center;
}
 
h1 small{
 font: 0.2em normal  Arial, Helvetica, sans-serif;
 text-transform:uppercase; letter-spacing: 0.2em; line-height: 5em;
 display: block;
}
 
h2 {
    font-weight:700;
    color:#bbb;
    font-size:20px;
}
 
h2, p {
 margin-bottom:10px;
}
 
@font-face {
    font-family: 'BebasNeueRegular';
    src: url('BebasNeue-webfont.eot');
    src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('BebasNeue-webfont.woff') format('woff'),
         url('BebasNeue-webfont.ttf') format('truetype'),
         url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
 
}
 
.clock {float:left; width:300px; margin: auto; border:1px solid #333; color:black; }
 
#Date { float:left;font-family:'BebasNeueRegular', Arial, Helvetica, sans-serif; font-size:20px; text-align:center; text-shadow:0 0 5px #00c6ff; }
 
ul { width:300px; margin:auto; padding:0px; list-style:none; text-align:left; float:left; }
ul li { display:inline; font-size:10em; text-align:center; font-family:'BebasNeueRegular', Arial, Helvetica, sans-serif; text-shadow:0 0 5px #00c6ff; }
 
#point { position:relative;color:red; -moz-animation:mymove 1s ease infinite; -webkit-animation:mymove 1s ease infinite; padding-left:10px; padding-right:10px; }
 
@-webkit-keyframes mymove
{
0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}
50% {opacity:0; text-shadow:none; }
100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }
}
 
 
@-moz-keyframes mymove
{
0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}
50% {opacity:0; text-shadow:none; }
100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }
}
 
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Create two variable with the names of the months and days in an array
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]
 
// Create a newDate() object
var newDate = new Date();
// Extract the current date from Date object
newDate.setDate(newDate.getDate());
// Output the day, date, month and year   
$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());
 
setInterval( function() {
 // Create a newDate() object and extract the seconds of the current time on the visitor's
 var seconds = new Date().getSeconds();
 // Add a leading zero to seconds value
 $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
 },1000);
  
setInterval( function() {
 // Create a newDate() object and extract the minutes of the current time on the visitor's
 var minutes = new Date().getMinutes();
 // Add a leading zero to the minutes value
 $("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
    },1000);
  
setInterval( function() {
 // Create a newDate() object and extract the hours of the current time on the visitor's
 var hours = new Date().getHours();
 // Add a leading zero to the hours value
 $("#hours").html(( hours < 10 ? "0" : "" ) + hours-12);
    }, 1000);
  
});
</script>
 
 
 
<div id="clockbody">
<div class="clock">
<div id="Date"></div>
 
<ul>
 <li id="hours"> </li>
    <li id="point">:</li>
    <li id="min"> </li>
    <li id="point">:</li>
    <li id="sec"> </li>
</ul>
</div>
</div>

That's it Friends How to Add Digital Clock to Your Blog or Website..If you like This post please share and Don't forget Leave your opinion..Thank You..
also learn..
1. Add Syntax Highlighter to Blogger
2. Add Analog Clock to Your Blog
Read more

Subscribe via email

Ads Here
BANNER 728X90
Older Article Add Analog Clock to your Blog
By v�o l�c
Labels:

No comments:

Post a Comment

Thank You for Your Comment

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)