🫵🫵💪💪தமிழ்! வீழாது என் இனம்💪💪🫵🫵: 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?

Monday, March 31, 2025

Html Coding for Whatsapp Sharing in Blogger

If you want to add a WhatsApp share button to your Blogger posts, you can use a simple HTML code snippet. Here’s how:

Code for WhatsApp Share Button

<a href="https://api.whatsapp.com/send?text=Check%20out%20this%20post:%20YOUR_POST_URL" target="_blank">
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="Share on WhatsApp" width="40">
</a>

Steps to Add This to Blogger

Go to Blogger Dashboard
Click on "Layout"
Choose "Add a Gadget" → Select "HTML/JavaScript"
Paste the Above Code
Replace YOUR_POST_URL with your actual blog post link
Click Save and Preview

For Automatic Sharing of Each Post

To make the button dynamically share the current blog post, use this:

<a href="https://api.whatsapp.com/send?text=Check%20out%20this%20post:%20<script>document.write(encodeURIComponent(document.URL));</script>" target="_blank">
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="Share on WhatsApp" width="40">
</a>

Friday, March 28, 2025

Html Coding to give tabular column in blogger

In Blogger, you can create a tabular column using simple HTML inside a post or page. Below is a basic example of how to create a table in Blogger:

Basic HTML Table Code for Blogger

<table border="1" cellpadding="10" cellspacing="0">
  <tr>
    <th>Serial No</th>
    <th>Name</th>
    <th>Age</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Alice</td>
    <td>25</td>
    <td>USA</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Bob</td>
    <td>30</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Charlie</td>
    <td>28</td>
    <td>India</td>
  </tr>
</table>

Adding CSS Styling for a Better Look

If you want a better-designed table, you can use CSS in Blogger’s HTML editor:


<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid black;
    padding: 10px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
</style>

<table>
  <tr>
    <th>Serial No</th>
    <th>Name</th>
    <th>Age</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Alice</td>
    <td>25</td>
    <td>USA</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Bob</td>
    <td>30</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Charlie</td>
    <td>28</td>
    <td>India</td>
  </tr>
</table>

How to Add This Code in Blogger?

Go to Blogger Dashboard
Click on "Posts" → "Create a New Post"
Click on "HTML View" (instead of "Compose")
Copy and paste the HTML code
Click Publish or Preview to check the table

Thursday, March 27, 2025

Html Coding for Dancing image in blogger

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>

<head>

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

</body>

</html>

🔥 How It Works:

The @keyframes dance creates a bouncing effect.
The .dancing-img applies 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, and transform for custom movements.

Let me know if you need more tweaks! 🎵💃

Friday, March 7, 2025

How to Add Glitter Text in Your Blogger Page

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.

Here's a simple HTML, CSS, and JavaScript code for adding a Welcome Text in 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.

Html Coding for Digital Clock

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.

HTML, CSS & JavaScript Code for Digital Clock

Coding 1:

</div>

<style>

#clock-container {

text-align: center;

font-size: 24px;

font-family: Arial, sans-serif;

font-weight: bold;

background: black;

color: lime;

padding: 10px;

border-radius: 10px;

display: inline-block;

}

</style>

function updateClock() {

var now = new Date();

var hours = now.getHours();

var minutes = now.getMinutes();

var seconds = now.getSeconds();

var amPm = hours >= 12 ? 'PM' : 'AM';

hours = hours % 12 || 12; // Convert to 12-hour format

minutes = minutes < 10 ? '0' + minutes : minutes;

seconds = seconds < 10 ? '0' + seconds : seconds;

var timeString = hours + ":" + minutes + ":" + seconds + " " + amPm;

document.getElementById('digital-clock').innerHTML = timeString;

}

setInterval(updateClock, 1000);

updateClock();

</script>

BLOGGER YOUTUBE AD HTML CODE:

</div>

<style>

.videoWrapper {

position: relative;

padding-bottom: 56.25%; /* 16:9 */

padding-top: 25px;

height: 0;

}

.videoWrapper iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

</style>

How To Add Scrolling Image In Blogger

<style>

div.scroll-container {

background-color: #333;

overflow: auto;

white-space: nowrap;

padding: 10px;

}

div.scroll-container img {

padding: 10px;

}

</style>

<h2>Image Gallery With Horizontal Scroll</h2>

</div>

Running Ads

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

Monday, April 7, 2025

✅ Modern HTML + CSS Blinking Text Example:

What’s going on:

🎵 Option 1: Upload to a Free File Hosting Service

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

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

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

Need a quick audio file to test with?

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

🔧 What to Do:

💡 Optional Styling Tip:

Monday, March 31, 2025

Code for WhatsApp Share Button

Steps to Add This to Blogger

For Automatic Sharing of Each Post

Friday, March 28, 2025

Basic HTML Table Code for Blogger

Adding CSS Styling for a Better Look

How to Add This Code in Blogger?

Thursday, March 27, 2025

Steps:

🎶 Dancing Image Code:

🔥 How It Works:

📌 Extra Tips:

Friday, March 7, 2025

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.

Here's a simple HTML, CSS, and JavaScript code for adding a Welcome Text in 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.

Tuesday, February 11, 2025

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.

HTML, CSS & JavaScript Code for Digital Clock

Coding 1:

Saturday, January 11, 2025

Friday, January 10, 2025

Open Blogger and go to the Layout section.
Click on Add a Gadget and select HTML/JavaScript.
Paste the following code and save it.

Open Blogger and go to the Layout section.
Click on Add a Gadget and select HTML/JavaScript.
Paste the following code and save it.

Open Blogger and go to the Layout section.
Click on Add a Gadget and select HTML/JavaScript.
Paste the following code and save it.