Here's a simple HTML, CSS, and JavaScript code snippet for adding a digital clock to your Blogger site.
Steps to Add the Digital Clock:
- Open Blogger and go to the Layout section.
- Click on Add a Gadget and select HTML/JavaScript.
- Paste the following code and save it.
<!doctype html>
<style>
@keyframes glitter {
0% { color: #ff0000; text-shadow: 0 0 5px #ff0000; }
25% { color: #00ff00; text-shadow: 0 0 5px #00ff00; }
50% { color: #0000ff; text-shadow: 0 0 5px #0000ff; }
75% { color: #ff00ff; text-shadow: 0 0 5px #ff00ff; }
100% { color: #ff0000; text-shadow: 0 0 5px #ff0000; }
}
.glitter-text {
text-align: center;
font-size: 25px;
font-weight: bold;
font-family: Arial, sans-serif;
animation: glitter 1s infinite alternate;
}
</style>
<div class="glitter-text">Welcome to My Blogger Site!</div>
</!doctype>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glitter Text Effect</title>
<style>
@keyframes glitter {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.glitter-text {
font-size: 50px;
font-weight: bold;
text-transform: uppercase;
background: linear-gradient(90deg, #ff00ff, #ff9900, #ffff00, #ff00ff);
background-size: 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: glitter 3s linear infinite;
text-align: center;
margin-top: 20%;
}
</style>
</head>
<body>
<div class="glitter-text">Glitter Text Effect</div>
</body>
</html>
No comments:
Post a Comment