Hello Guys, Today in this post I will show you how to create a responsive floating telegram widget in your blogger site. Yes off course it suits all the theme and its easy to use and its look also very attractive.
What is Popup Telegram Join Button?
This Popup Telegram join button will appear from the bottom of your website so that users who visit your website can see the Telegram Group or Telegram Channel you have for your website. So, with this telegram popup subscribe button you can increase the users of your telegram channel or telegram group.
How This Telegram Join Button works?
This Telegram join button is a popup sticky telegram join button. This Telegram Popup join button will appear immediately when visitors come to your website. Thus the visitors of your website are more likely to visit your telegram page. This popup telegram join button was created for this reason.
What is the Use Of Telegram Join Button?
- This Popup Telegram join popup will help the visitors of your website to visit your Telegram channel.
- Helps to increase the audience of your Telegram channels and increase the subscribers of Telegram Group or Telegram Channel.
- With this popup Telegram join button, you will increase the number of great viewers from Telegram.
- Posts from your website can be instantly added to your audience through Telegram.
Why we have to add telegram widget on our site?
Yes , Now days Telegram is best platform to connect to millions of users with a single message, If you are getting good view on site , then you should try telegram because when you create something new , you can post it instantly in telegram , So that users can reach your website bit faster...:)
Will it supports my theme?
Yes, It suits all the theme available on net, so you can use it without any fear....
Will it decrease the loading speed of the site?
I think no, Because am using this code my other sites too. but I didn't notice any slow loading, and this code is simple and doesn't contain any long script so it will not harm page speed.
How to Setup this Popup Telegram Join Button on Blogger?
Step 1: Go to Your Blogger Admin Dashboard
Step 2: Open your Theme Section and Click Edit HTML Option
Step 3: Next, Find the </body> Tag on theme Script
Step 4: Next Copy the Below Script and Paste Above on </body> Tag.
Step 5: Save your Blogger template.
<script type='text/javascript'>(function() {var script=document.createElement("script");script.type="text/javascript";script.async =true;script.src="//telegram.im/widget-button/index.php?id=@spiderblogging";document.getElementsByTagName("head")[0].appendChild(script);})();</script>
<style>
.pixabin-float-telegram{position:fixed;right:25px;bottom:25px;width:300px;background-color:#fff;z-index:99999;padding:15px;border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,0.1);border: 1px solid #ddd;}
.df-logo{float:left;width:70px;height:70px;margin:0 10px 0 0}
.rtl .df-logo{float:right;margin:0 0 0 10px}
.pixabin-float-telegram h3{color:#333333;font-size:17px;font-weight:700;margin:0 0 7px;overflow: hidden;}
.pixabin-float-telegram p{font-size:13px;color:#757575;line-height:1.5em;margin:0}
.pixabin-float-telegram a{float: left; width: 100%; background-color: #3f5fda; font-size: 14px; font-weight: 500; color: #fff; text-align: center; line-height: 28px; margin: 15px 0 0; padding: 5px; border-radius: 3px; transition: background .17s ease;}
.pixabin-float-telegram a:hover{background-color:#2980b9}
.df-hide{float: right;top:10px;right:13px;font-size:13px;color:#333333;cursor:pointer;transition:color .17s ease}
.rtl .df-hide{right:unset;left:13px}
.df-hide:hover{color:#e74c3c}
.df-logo img {width: 70px; height: 70px;}
</style><div class='pixabin-float-telegram'>
<span class='df-hide'><i class='fa fa-times'/></span>
<div class='df-logo'><img border='0' data-original-height='100' data-original-width='100' src='https://web.telegram.org/img/logo_share.png'/></div>
<h3> Join Telegram Channel</h3>
<p>Join <b>MithMenor</b> The Ultimate Blogging Solution</p>
<a href='https://mithmenor.blogspot.com/' target='_blank'><i class='fa fa-telegram'/> Join Telegram Channel</a>
</div>
<script type='text/javascript'>
$(function(){$('.df-hide').on('click',function(){$('.pixabin-float-telegram').fadeOut(170);});});
</script>
Step 6: Your Popup telegram join button is Ready to Rock
Step 7: Do not forget to modify the Script Links and Texts.
How to Setup this Popup Telegram Join Button on WordPress?
Step 1: Go to Your Blogger Admin Dashboard
Step 2: Go to plugin Section and Install Tag Manager Plugin
Step 3: Now go to Tag manager PluginSection and Paste script </body> Tag on Section
Step 4: Click the Save Button.
<script type='text/javascript'>(function() {var script=document.createElement("script");script.type="text/javascript";script.async =true;script.src="//telegram.im/widget-button/index.php?id=@spiderblogging";document.getElementsByTagName("head")[0].appendChild(script);})();</script>
<style>
.pixabin-float-telegram{position:fixed;right:25px;bottom:25px;width:300px;background-color:#fff;z-index:99999;padding:15px;border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,0.1);border: 1px solid #ddd;}
.df-logo{float:left;width:70px;height:70px;margin:0 10px 0 0}
.rtl .df-logo{float:right;margin:0 0 0 10px}
.pixabin-float-telegram h3{color:#333333;font-size:17px;font-weight:700;margin:0 0 7px;overflow: hidden;}
.pixabin-float-telegram p{font-size:13px;color:#757575;line-height:1.5em;margin:0}
.pixabin-float-telegram a{float: left; width: 100%; background-color: #3f5fda; font-size: 14px; font-weight: 500; color: #fff; text-align: center; line-height: 28px; margin: 15px 0 0; padding: 5px; border-radius: 3px; transition: background .17s ease;}
.pixabin-float-telegram a:hover{background-color:#2980b9}
.df-hide{float: right;top:10px;right:13px;font-size:13px;color:#333333;cursor:pointer;transition:color .17s ease}
.rtl .df-hide{right:unset;left:13px}
.df-hide:hover{color:#e74c3c}
.df-logo img {width: 70px; height: 70px;}
</style><div class='pixabin-float-telegram'>
<span class='df-hide'><i class='fa fa-times'/></span>
<div class='df-logo'><img border='0' data-original-height='100' data-original-width='100' src='https://web.telegram.org/img/logo_share.png'/></div>
<h3> Join Telegram Channel</h3>
<p>Join <b>MithMenor</b> The Ultimate Blogging Solution</p>
<a href='https://mithmenor.blogspot.com/' target='_blank'><i class='fa fa-telegram'/> Join Telegram Channel</a>
</div>
<script type='text/javascript'>
$(function(){$('.df-hide').on('click',function(){$('.pixabin-float-telegram').fadeOut(170);});});
</script>
Step 5: Now your Telegram join button is Ready to Rock
Step 6: Do not forget to made Custom Modifications.
Custom Modification
- <b>MithMenor</b> to your Website or Telegram Channel Name
- <a href='https://mithmenor.blogspot.com/' target='_blank'> to <a href='Your-Link-Here' target='_blank'>
Conclusion
We hope this Popup Telegram join button will help increase the website audience. To get more similar information you need to follow our website Youtube Channel, Telegram Group, and Google news page. Thank you for Reading !!!
Thanks for reading: How To Create Responsive Floating Sticky Telegram Join Button in Blogger, Sorry, my English is bad:)