How To Create Responsive Floating Sticky YouTube Subscribe Button in Blogger | TheBloggersPoint

ads1

 Hii friends!

So today I will tell you that how you can add a sticky floating subscribe button to your Blog in Blogger. You just need to add a piece of code and it’s really very easy, so follow the steps correctly. 

What is YouTube ? 

I don’t think that I need to answer this question at all still I will like to tell you that YouTube is a American Online Video Sharing Platform bought by Google . 

Is it compatible with my theme? 

Yes it’s 100% compatible with all the Blogger themes whether free or paid. 

How this widget is useful for my site? 

This widget is very useful for your site if you a YouTube Channel as it will promote your channel among your users and if your users likes your content than I am pretty sure that your visitors will must visit you YouTube Channel too and will watch your content. 

Is there any disadvantage of this? 

No, I really don’t think that there are any disadvantages of this widget as it will only help you boost your YouTube Channel. 

How to install this code in Blogger? 

It’s very easy to install this code in Blogger. Just follow the steps given below. 

1. Go to Blogger Dashboard > Theme > Edit HTML

2. Now search for </body> Tag and copy the script from below and paste above </body> Tag. 

 

<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://1.bp.blogspot.com/-8lVn3BVa3iM/YBeJ2XHGBgI/AAAAAAAAJus/dMT95T-OIAIDLXCeBwO_7-x9eyXataWAACLcBGAsYHQ/s554/images.png'/></div>
<h3> Subscribe Our YouTube Channel</h3>
<p> <b>Techno Aaryan</b><br/><center>and Learn and earn with Us</center></p>
<a href='https://youtube.com/c/TechnoAaryan' target='_blank'><i class='fa-youtube-play'/>Subscribe Now</a>
</div>
<script type='text/javascript'>
$(function(){$(&#39;.df-hide&#39;).on(&#39;click&#39;,function(){$(&#39;.demo-float&#39;).fadeOut(170);});});
</script> 

 

3.After pasting the code click on save. 

Note :- Change the text, link, and image as your choice. 

Conclusion :- You must add this Floating Widget to your Blog. You can also change the text and codes if you want . The process is same for all the other sites too like Telegram