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

  1. Go to Blogger Dashboard

  2. Click on "Layout"

  3. Choose "Add a Gadget" → Select "HTML/JavaScript"

  4. Paste the Above Code

  5. Replace YOUR_POST_URL with your actual blog post link

  6. 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>
at No comments:
Labels:

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?

  1. Go to Blogger Dashboard

  2. Click on "Posts" → "Create a New Post"

  3. Click on "HTML View" (instead of "Compose")

  4. Copy and paste the HTML code

  5. Click Publish or Preview to check the table

at No comments:
Labels:

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:

  1. Go to Blogger → Open your blog.

  2. Click "Theme" → "Customize" → "Edit HTML."

  3. 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 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! 🎵💃

at No comments:
Labels:

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:

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

Read more »
at No comments:
Labels:

How To Add Welcome Text in Blogger Page

Here's a simple HTML, CSS, and JavaScript code for adding a Welcome Text in your Blogger site.

Steps to Add the Digital Clock:

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

Read more »
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...