How To Hide Powered by Blogger Footer Attribution from Your Blog

How to create a Floating Telegram Button in Blogger

© Copyright 2024 Tecky AaryaN 

Is it your intention to include a chat button on your website? If that's the case, you might want to add a Telegram button that moves and

moves animatedly. In this Article I will show you How to Add an Animated Floating Telegram Button In Blogger?

This trendy features highlight permits guests or users to effectively associate with you on the famous Telegram application, making a

consistent method for keeping in contact and get refreshes.

ANIMATED FLOATING TELEGRAM 

 You can see the demo here⤵ 

Demo

Step 1: Go to Blogger.

Step 2: Go to EDIT HTML.

Step 3: Now Find the Following Code.

Step 4: Now paste the Following Code in below </footer> tag

<a class='telegram-float' href='https://t.me/teckyaaryan' target='_blank'>

		<div class='telegram-icon'>

			<svg viewBox='0 0 64 64'><path d='M56.4,8.2l-51.2,20c-1.7,0.6-1.6,3,0.1,3.5l9.7,2.9c2.1,0.6,3.8,2.2,4.4,4.3l3.8,12.1c0.5,1.6,2.5,2.1,3.7,0.9 l5.2-5.3c0.9-0.9,2.2-1,3.2-0.3l11.5,8.4c1.6,1.2,3.9,0.3,4.3-1.7l8.7-41.8C60.4,9.1,58.4,7.4,56.4,8.2z M50,17.4L29.4,35.6 c-1.1,1-1.9,2.4-2,3.9c-0.2,1.5-2.3,1.7-2.8,0.3l-0.9-3c-0.7-2.2,0.2-4.5,2.1-5.7l23.5-14.6C49.9,16.1,50.5,16.9,50,17.4z'/></svg>

</div>
</a>

Step 5: Now add the CSS Code paste Above </head> Tag.

<style>

.telegram-float {

  position: fixed;

  bottom: 20px;

  right: 20px;

  z-index: 1000;

}

.telegram-icon {

  width: 60px;

  height: 60px;

  border-radius: 50%;

  background-color: #0088cc;

  display: flex;

  justify-content: center;

  align-items: center;

  animation-name: pulse;

	animation-duration: 1.5s;

	animation-timing-function: ease-out;

	animation-iteration-count: infinite;

}

      @keyframes pulse {

	0% {

		box-shadow: 0 0 0 0 rgba(0, 136, 204, 0.5);

	}

	80% {

		box-shadow: 0 0 0 14px rgba(0, 136, 204, 0);

	}

}

.telegram-icon svg {

  fill: #fff;

  width: 30px;

  height: 30px;

}

</style>

Step 6: Now Save the HTML Code. 

Powerful & Blogger Related CONTENT Tech Ankur

 

To appreciate our works, consider keeping the credits in codes. We don't allow to rewrite this post in any manner. Don't copy this post, codes or any part from this article without Permission, it is strictly prohibited. If you do so, Legal Actions will be taken.

Copyright

TeckyAaryaN

Telegram

Go to Link