How To Create Responsive Floating Sticky Telegram Join Button in Blogger | Spider Blogging

Please wait...

How To Create Responsive Floating Sticky Telegram Join Button in Blogger | Spider Blogging

Copy the Below Code and Paste it above the </body> tag and change the links according to you! and click on save theme

<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>
.demo-float{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}
.demo-float h3{color:#333333;font-size:17px;font-weight:700;margin:0 0 7px;overflow: hidden;}
.demo-float p{font-size:13px;color:#757575;line-height:1.5em;margin:0}
.demo-float 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;}
.demo-float 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='demo-float'>
<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>Spider Blogging</b>The Ultimate Blogging Solution</p>
<a href='https://t.me/modsharimanetech' 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;.demo-float&#39;).fadeOut(170);});});
</script>
    

or Download Below Code and paste it before </body> tag , i.e At the end of your theme. and change the links according to you!

Download Code

 | THANK YOU FOR VISITING |