How to add Popup Sticky Telegram Join Button on Blogger

Welcome Dudes, Thank you Come our Pixabin Blog. Let see How to create a Responsive Popup Sticky Telegram Join Button in blogger on this Article. This thing is Absolutely Use full to share your Article on telegram. This Popup Telegram Join button is very useful to increase your Telegram Channel or Telegram Group Subscribers. So, let us go to the main point in this Blog Article.👇

What is Popup Telegram Join Button?

This Telegram Join Button how works?

What is the Use Of Telegram Join Button?

Pros and Cons of Telegram Join Button

Pros

Cons

If you Want to Download This Script please hit the download button and Get File

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(&quot;script&quot;);script.type=&quot;text/javascript&quot;;script.async =true;script.src=&quot;//telegram.im/widget-button/index.php?id=@spiderblogging&quot;;document.getElementsByTagName(&quot;head&quot;)[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'>close</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>Pixabin Official</b> The Ultimate Blogging Solution</p>
<a href='https://www.pixabin.com/' target='_blank'><i class='fa fa-telegram'/> Join Telegram Channel</a>
</div>
<script type='text/javascript'>
$(function(){$(&#39;.df-hide&#39;).on(&#39;click&#39;,function(){$(&#39;.pixabin-float-telegram&#39;).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 Plugin Section and Paste script </body> Tag on Section
• Step 4: Click the Save Button

<script type='text/javascript'>(function() {var script=document.createElement(&quot;script&quot;);script.type=&quot;text/javascript&quot;;script.async =true;script.src=&quot;//telegram.im/widget-button/index.php?id=@spiderblogging&quot;;document.getElementsByTagName(&quot;head&quot;)[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'>close</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>Pixabin Official</b> The Ultimate Blogging Solution</p>
<a href='https://www.pixabin.com/' target='_blank'><i class='fa fa-telegram'/> Join Telegram Channel</a>
</div>
<script type='text/javascript'>
$(function(){$(&#39;.df-hide&#39;).on(&#39;click&#39;,function(){$(&#39;.pixabin-float-telegram&#39;).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

Video Guidelines

Final Words