In this article, how to set a YouTube floating to subscribe popup button in your blogger. In this article, we will popup (display) the YouTube subscribe button, Instagram follows button, Twitter button, and many other social media buttons in our blogger with the help of JavaScript code.
 |
| YouTube subscribe button free |
First, let us know the floating subscribe button and how it works?
See, when you want to grow your YouTube channel's videos and your channel's audience, then you have to give the link to your YouTube channel on your website so that your website visitors can visit your YouTube.
We will need JavaScript and CSS to set up this button. And on this button, you will give the subscribe link to YouTube and the name of your YouTube channel.
When the button will popup and the user will click on that button then this link will directly ask the user to subscribe means it will redirect to youtube. Now let's start -
How to add a Floating YouTube subscribe button with the channel name
Follow the below steps to add a YouTube floating subscribe button 👇
Step-1: First go to your blogger website dashboard, and click on the Theme section.
 |
| Go to the theme section in your blogger |
Step-2: Now click on the customize dropdown button and then click "Edit HTML" in the theme section.
 |
| click on the edit HTML link |
Step-3: Search (Ctrl + F) the closing </body> tag and put the code below on top of it.
<style>
/* Popup Subscribe Button Designed By Key2blogging */
.YT-subscribe {position: fixed;left: 35px;bottom: 20px;background-color: #ececec;padding: 12px 12px 12px 12px;border-radius: 10px 10px 0px 0px;display: flex;align-items: center;max-width: 320px;
min-width: 280px;height: auto;color: #000000;overflow: hidden;z-index: 100;border-bottom: 4px solid #ff3b00;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
.YT-subscribe .YT-subscribe-close { position: absolute; top: 4px; right: 8px; }
.YT-subscribe .YT-subscribe-close svg { width: 22px; height: 22px; fill: #000; }
.YT-subscribe .YT-subscribe-img { width: 70px; height: 50px; }
.YT-subscribe .YT-subscribe-img img { display: flex; align-items: center; justify-content: center; width: 50px; }
.YT-subscribe .YT-subscribe-content { width: calc(100% - 70px); padding-left: 1px; }
.YT-subscribe .YT-subscribe-content a { display: block; color: inherit; }
.Subscribe_btn {font-weight: 600;font-size: 12px;display: flex;align-items: center;justify-content: center;width: 120px;height: 30px;padding: 5px 6px;background-color: #e4393c;border-radius: 4px;
color: #fff;margin-top: 12px;bottom: 0;right: 0;flex-wrap: wrap;flex-direction: row;align-content: center;}
.YT-subscribe .YT-subscribe-content .YT-title { display: block; font-weight: 700; font-size: 13px; text-align: left; padding-left: 12px }
.YT-subscribe .Subscribe_btn a { display: block; color: inherit; color:#fff; }
.YT-subscribe .YT-subscribe-content .YT-desc { display: block; font-size: 10px; margin-top: 5px; color: #000; text-align: left;padding-left: 12px; line-height: normal; font-weight: 500; }
.YT-btn-text{margin-left:9px}
</style>
<div class='YT-subscribe' id='YT-btn'>
<div class='YT-subscribe-close' onclick='document.getElementById("YT-btn").style.display="none"'><svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/></svg></div>
<div class='YT-subscribe-img'><img alt='Youtube Channel Image' src='https://www.pngarts.com/files/9/Vector-YouTube-Logo-PNG-Free-Download.png'/>
</div>
<div class='YT-subscribe-content'>
<span class='YT-title'>Rkonline | Learn Programming Language</span>
<span class='YT-desc'>Subscribe To watch more Blogging Tutorials</span>
</div>
<div class='Subscribe_btn'>
<a href='https://www.youtube.com/channel/UCMof-8XFGIK1yWwDpdRdjBg?sub_confirmation=true' target='_blank'>
<span class='YT-btn-text'>Subscribe</span></a>
</div></div>
Here I explain -
- Here you can change the youtube image, you can also add Twitter and Instagram follow buttons using this link.
- Here change the name of your YouTube.
- Here you can give a little description of your YouTube.
- Here you have to give the URL of your YouTube / Twitter / Instagram.
Now go to your website, and see the awesome YouTube Pop-Up Subscribe Button.
 |
| Popup Subscribe Button |
Conclusion -
In this article, we have seen how to make a floating YouTube popup subscribe button on your blogger, Hope this article was very useful for you. If you liked this article then subscribe to our YouTube channel.
Posts
0 Comments