Show telegram icon on your blog / WordPress website

 To implement this Telegram icon example on a  website, follow these steps:

There are two to show telegram icon

Check steps after code

    

    Telegram Icon Example

    <!-- Include FontAwesome CSS (you can replace this link with the latest version) -->

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />

    <style>

        /* Add styles for the overlay */

        #overlay {

            position: fixed;

            top: 0;

            left: 0;

            width: 90%;

            height: 90%;

            

            display: none; /* Initially hidden */

            z-index: 1;

        }

        /* Add styles for the Telegram icon container */

        #telegramIconContainer {

            position: fixed;

            bottom: 5px;

            left: 50%;

            transform: translateX(-50%);

            cursor: pointer;

            animation: blinkColor 2s infinite alternate;

            z-index: 1;

            display: flex;

            align-items: center;

        }

        /* Add styles for the Telegram icon */

        #telegramIcon {

top: 50;

            font-size: 3.5em;

            color: #0088cc; /* Telegram's official logo color */

            margin-right: -20px;

        }

#joinKeyword {

            font-weight: bold;

            background-color: #0088cc; /* Background color */

            color: white; /* Text color */

            padding: 5px 10px; /* Adjust padding as needed */

            border-radius: 3px; /* Add rounded corners */

        }

        /* Define the blink animation */

        @keyframes blinkColor {

            0% {

                color: black;

            }

            100% {

                color: red;

            }

        }

    </style>

<!-- Add an overlay div -->

<div id="overlay"></div>

<!-- Add a Telegram icon container with an onclick event to show the overlay and redirect to the Telegram group -->

<div id="telegramIconContainer" onclick="showOverlayAndRedirectToTelegram()">

    <i id="telegramIcon" class="fab fa-telegram"></i>

    <span id="joinKeyword">Join</span>

</div>

<script>

    function showOverlayAndRedirectToTelegram() {

        // Show the overlay

        document.getElementById('overlay').style.display = 'block';

        // Redirect to the Telegram group after a short delay (you can adjust the delay)

        setTimeout(function () {

            window.location.href = 'https://t.me/k2atech';

        }, 1000); // 1000 milliseconds = 1 second (adjust as needed)

    }

</script>

1  Frist Steps

1. Open Blogger:
   - Log in to your Blogger account.

2. Go to 'Layout' and click on 'Add a Gadget':
   - Navigate to the 'Layout' section of your Blogger dashboard.
   - Click on 'Add a Gadget'

3. Select 'HTML/Javascript Gadget':
   - From the list of available gadgets, select the 'HTML/Javascript' gadget.

4. Paste the provided code directly into the gadget:
   - Copy the provided code snippet.
   - Paste the code directly into the 'HTML/Javascript' gadget.

5. Save the gadget and visit your blog to see live changes:
   - Save the changes made to the gadget.
   - Visit your blog to see .

2 Second Steps 

1. Log in to your Blogger account:
   - Visit www.blogger.com and log in to your account using your credentials.

2. Access the theme editor:
   - Navigate to the 'Theme' section of your Blogger dashboard.

3. Edit HTML/CSS:
   - Click on the 'Edit HTML/CSS' option.

4. Find the closing </head> tag:
   - Scroll down through the HTML code until you find the closing </head> tag.

5. Paste CSS and FontAwesome link:
   - Paste the provided CSS code and FontAwesome link just before the closingb</head> tag. This will style the Telegram icon and add the necessary FontAwesome library.

    <!-- Include FontAwesome CSS (you can replace this link with the latest version) -->

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />

    <style>
        /* Add styles for the overlay */
        #overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 90%;
            height: 90%;
            
            display: none; /* Initially hidden */
            z-index: 1;
        }

        /* Add styles for the Telegram icon container */
        #telegramIconContainer {
            position: fixed;
            bottom: 5px;
            left: 50%;
            transform: translateX(-50%);
            cursor: pointer;
            animation: blinkColor 2s infinite alternate;
            z-index: 1;
            display: flex;
            align-items: center;
        }

        /* Add styles for the Telegram icon */
        #telegramIcon {
top: 50;
            font-size: 3.5em;
            color: #0088cc; /* Telegram's official logo color */
            margin-right: -20px;
        }
#joinKeyword {
            font-weight: bold;
            background-color: #0088cc; /* Background color */
            color: white; /* Text color */
            padding: 5px 10px; /* Adjust padding as needed */
            border-radius: 3px; /* Add rounded corners */
        }
        /* Define the blink animation */
        @keyframes blinkColor {
            0% {
                color: black;

            }
            100% {
                color: red;
            }
        }
    </style>

6. Find the closing </body> tag:
   - Scroll down further until you find the closing </body> tag.

7. Paste HTML and JavaScript code:
   - Paste the provided HTML code and JavaScript code just before the closing </body>
tag. This will create the Telegram icon and define the function to show the overlay and redirect to the Telegram group.

<!-- Add an overlay div -->

<div id="overlay"></div>

<!-- Add a Telegram icon container with an onclick event to show the overlay and redirect to the Telegram group -->
<div id="telegramIconContainer" onclick="showOverlayAndRedirectToTelegram()">
    <i id="telegramIcon" class="fab fa-telegram"></i>
    <span id="joinKeyword">Join</span>
</div>

<script>
    function showOverlayAndRedirectToTelegram() {
        // Show the overlay
        document.getElementById('overlay').style.display = 'block';

        // Redirect to the Telegram group after a short delay (you can adjust the delay)
        setTimeout(function () {
            window.location.href = 'https://t.me/k2atech';
        }, 1000); // 1000 milliseconds = 1 second (adjust as needed)
    }
</script>



8. Adjust settings if needed:
   - You can adjust settings such as the Telegram group URL and the delay before redirecting by modifying the JavaScript code.

9. Save changes:
   - After pasting the code, save your theme changes.

10. Preview and test:
    - Preview your blog to ensure that the Telegram icon is displayed correctly and that clicking on it redirects to the Telegram group.