🫵🫵💪💪தமிழ்! வீழாது என் இனம்💪💪🫵🫵: April 2025

Monday, April 7, 2025

Html Coding for Blinking Text in Blog

Sure! Here's a simple way to make text blink in an HTML blog using CSS (since the old <blink> tag is deprecated and not supported in modern browsers).

✅ Modern HTML + CSS Blinking Text Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    .blinking {
      animation: blinker 1s linear infinite;
      color: red;
      font-weight: bold;
    }

    @keyframes blinker {
      50% {
        opacity: 0;
      }
    }
  </style>
</head>
<body>

  <p class="blinking">This text blinks!</p>

</body>
</html>

What’s going on:

.blinking: CSS class that triggers a fade in/out loop.
@keyframes blinker: controls the animation steps (you can adjust speed/duration).
You can change color, font-weight, or animation timing as you like.

Want to blink a specific word in a sentence? You can just wrap that word in a <span class="blinking"> inside your paragraph.

How to Get Audio File Url.mp3

Great question! To use background music on your Blogger site, you need a direct .mp3 link to the audio file — meaning it should end in .mp3 and not open a player page. Here's how to get one:

🎵 Option 1: Upload to a Free File Hosting Service

✅ 1. File.io / SoundHost / Dropbox (with tweaks)

Dropbox (Steps to get a direct link):

Upload your .mp3 file to Dropbox.
Click "Share" on the file → then "Copy link" (it will look like:
https://www.dropbox.com/s/abcd1234/myfile.mp3?dl=0)
Replace www.dropbox.com with dl.dropboxusercontent.com and remove ?dl=0:
```
https://dl.dropboxusercontent.com/s/abcd1234/myfile.mp3
```

✅ That is your direct mp3 link.

🎵 Option 2: Use GitHub (if you're a bit tech-savvy)

Create a GitHub repo (public).
Upload the .mp3 file.

Go to the raw file view, copy the raw file URL — e.g.:

https://raw.githubusercontent.com/yourusername/yourrepo/main/music.mp3

🎵 Option 3: Use Google Drive (a little trickier)

Google Drive doesn’t give a direct .mp3 link easily, but you can work around it:

Upload the .mp3 file to Google Drive.
Right-click → Get link (set to "Anyone with the link").
Copy the file ID from the share link:
https://drive.google.com/file/d/FILE_ID/view?usp=sharing

Use this format to generate a direct link:

https://docs.google.com/uc?export=download&id=FILE_ID

But ⚠️ this may not always autoplay due to Google’s limitations.

Need a quick audio file to test with?

You can try this royalty-free test file from SoundHelix:

https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3

Would you like help hosting your file? You can send me the .mp3, and I can walk you through uploading it somewhere that gives a direct link.

Html coding for adding a mute/play button if you want better user control (and to not annoy visitors 😅) in blogger

Absolutely! Let's give your Blogger background music a mute/play button so users can control it — and you stay in their good books 😄

✅ HTML + JavaScript Code for Background Music with Mute/Play Button

Paste this into a HTML/JavaScript gadget or directly into your Blogger theme where you'd like the button to appear:

Your browser does not support the audio element.

</audio>

🔊 Music On

</button>

const music = document.getElementById('bg-music');

const toggleBtn = document.getElementById('music-toggle');

// Check if audio is playing

function isPlaying(audio) {

return !audio.paused;

}

toggleBtn.addEventListener('click', () => {

if (isPlaying(music)) {

music.pause();

toggleBtn.textContent = '🔇 Music Off';

} else {

music.play();

toggleBtn.textContent = '🔊 Music On';

}

});

</script>

You can also add hidden if you don’t want the player to be visible:

<audio autoplay loop hidden>
  <source src="your-audio-file.mp3" type="audio/mpeg">
</audio>

🔧 What to Do:

Replace YOUR_AUDIO_FILE_URL.mp3 with your direct mp3 link.
The button will appear fixed at the bottom-right of your page.
Visitors can toggle the music on/off easily.

💡 Optional Styling Tip:

You can change the button’s look with CSS or replace it with an icon or image for a fancier feel.

Want me to help with a custom-styled button or icon version too?

🫵🫵💪💪தமிழ்! வீழாது என் இனம்💪💪🫵🫵

Running Ads

Follow My Another Blog "💥✨✨✨✨Mind Merger💫💫💫💫💥"