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 closing </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
<!-- 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.
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 closing </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.
How to pagination feature on blogger / WordPress website
https://www.careerinitfield.in/p/how-to-pagination-feature-on-blogger.html
How to add feedback form on blogger / WordPress website
https://www.careerinitfield.in/p/how-to-add-feedback-form-on-blogger.html
How to add add a feedback button to your Blogger / WordPress website
Shown pop-up only once every 24 hours to visitors on your Blogger /WordPress website
https://www.careerinitfield.in/p/to-implement-popup-with-countdown.html
Show telegram icon on your blog / WordPress website
https://www.careerinitfield.in/p/how-to-pagination-feature-on-blogger.html
How to add feedback form on blogger / WordPress website
https://www.careerinitfield.in/p/how-to-add-feedback-form-on-blogger.html
How to add add a feedback button to your Blogger / WordPress website
Shown pop-up only once every 24 hours to visitors on your Blogger /WordPress website
https://www.careerinitfield.in/p/to-implement-popup-with-countdown.html
Show telegram icon on your blog / WordPress website
How to disable copy and paste content on your Blogger /WordPress website, 100 Percent working