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.

at No comments:
Labels:

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):

  1. Upload your .mp3 file to Dropbox.

  2. Click "Share" on the file → then "Copy link" (it will look like:
    https://www.dropbox.com/s/abcd1234/myfile.mp3?dl=0)

  3. 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)

  1. Create a GitHub repo (public).

  2. Upload the .mp3 file.

  3. 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:

  1. Upload the .mp3 file to Google Drive.

  2. Right-click → Get link (set to "Anyone with the link").

  3. Copy the file ID from the share link:
    https://drive.google.com/file/d/FILE_ID/view?usp=sharing

  4. 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.

at No comments:
Labels:

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:

<!-- Background Music Player -->

<audio id="bg-music" autoplay loop>

  <source src="YOUR_AUDIO_FILE_URL.mp3" type="audio/mpeg">

  Your browser does not support the audio element.

</audio>


<!-- Mute/Play Button -->

<button id="music-toggle" style="position:fixed; bottom:20px; right:20px; z-index:9999; padding:10px 15px; font-size:16px;">

  🔊 Music On

</button>


<script>

  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:

  1. Replace YOUR_AUDIO_FILE_URL.mp3 with your direct mp3 link.

  2. The button will appear fixed at the bottom-right of your page.

  3. 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?

at No comments:
Labels:
Subscribe to: Posts (Atom)

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 support...