If you want to add a dancing image to your Blogger site, you can use simple HTML and CSS. Here's a basic example:
Steps:
-
Go to Blogger → Open your blog.
-
Click "Theme" → "Customize" → "Edit HTML."
-
Paste the following code inside your post or widget section.
🎶 Dancing Image Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dancing Image</title>
<style>
@keyframes dance {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
.dancing-img {
width: 200px;
display: block;
margin: 20px auto;
animation: dance 0.5s infinite alternate ease-in-out;
}
</style>
</head>
<body>
<img class="dancing-img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTvatSdGS5zjaCx0Nsx4zriZNEaDRZ_pFJ2PqFxVS0OljWnVaJj4Z5XXmsJji1y6uYLhWn9BB8APEpPn_HTdfwmxLqsa_MZ1WzbCeIW51yJGnDZ0KFaNYHdgQAmtBW9J1aXYT4rj_IzxXunuNKOazImXPdzQu4zlnlO28LLfnrwFUQ0XSbvWsIuhQhXRM/w264-h208/photo_2025-02-14_10-21-11.jpg" alt="Dancing Image">
</body>
</html>
🔥 How It Works:
-
The
@keyframes dancecreates a bouncing effect. -
The
.dancing-imgapplies animation to your image. -
Replace
"https://your-image-url-here.com/dance.gif"with your own dancing image URL.
📌 Extra Tips:
-
Use a GIF for a real dancing effect.
-
You can adjust
width,animation-duration, andtransformfor custom movements.
Let me know if you need more tweaks! 🎵💃
No comments:
Post a Comment