How To Add Floating YouTube Subscribe Button on Blogger Blog

Posted on

If you want to watch your YouTube video more often and increase your audience, this article will help you.

In this article, you will learn how to add a floating subscribe button to your Blogger website.

YouTube Popup Subscribe Button

So, how does a float button work and why should I use this type of float button on my website?

So, the Float button acts as an activity call (CTA) button, asking you to subscribe to a channel, write an email, redirect to a product or service page, and more.

So, in this article, we are talking about the YouTube popup subscribe button in Blogger, which will appear in the window at the bottom of the website asking you to subscribe to the YouTube channel.

So when a user clicks the subscribe button, they will be redirected to the YouTube channel. So, this way you can redirect users from your website to your YouTube channel.

So it will help you increase the number of subscribers and user base on YouTube. So, let’s see how you can add it to your Blogger website.

How To Add Floating YouTube Subscribe Button on Blogger Blog

You can properly add the Floating Subscribe button on Blogger blog site, just following few steps that’s given below.

Step 01: Go to the Blogger dashboard and click on the theme section.

Step 02: Now take a backup before starting the working process to the next step.

Step 03: Click on Edit HTML and search for </body> tag.

Step 04: Now Add the below HTML & CSS code above </body> tag.

/* YT Popup Subscribe Button Designed By Softowe */
.softowe-ytsubscribe-btn {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;}
.softowe-ytsubscribe-btn .softowe-ytsubscribe-btn-close { position: absolute; top: 4px; right: 8px; } 
.softowe-ytsubscribe-btn .softowe-ytsubscribe-btn-close svg { width: 22px; height: 22px; fill: #000; } 
.softowe-ytsubscribe-btn .softowe-ytsubscribe-btn-img { width: 70px; height: 50px; } 
.softowe-ytsubscribe-btn .softowe-ytsubscribe-btn-img img { display: flex; align-items: center; justify-content: center; width: 50px; } 
.softowe-ytsubscribe-btn .softowe-ytsubscribe-btn-content { width: calc(100% - 70px); padding-left: 1px; } 
.softowe-ytsubscribe-btn .softowe-ytsubscribe-btn-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;}
.softowe-ytsubscribe-btn .softowe-ytsubscribe-btn-content .YT-title { display: block; font-weight: 700; font-size: 13px; text-align: left; padding-left: 12px }
.softowe-ytsubscribe-btn .Subscribe_btn a { display: block; color: inherit; color:#fff; } 
.softowe-ytsubscribe-btn .softowe-ytsubscribe-btn-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; }

<div class='softowe-ytsubscribe-btn' id='YT-btn'>
<div class='softowe-ytsubscribe-btn-close' onclick='document.getElementById(&quot;YT-btn&quot;).style.display=&quot;none&quot;'><svg viewBox='0 0 512 512' xmlns=''><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='softowe-ytsubscribe-btn-img'>
<img alt='Youtube Channel Image' src=''/>
<div class='softowe-ytsubscribe-btn-content'>
<span class='YT-title'>Softowe</span>
<span class='YT-desc'>Subscribe us on YouTube to get more updates</span>
<div class='Subscribe_btn'>
<a href='' target='_blank'>
<span class='YT-btn-text'>Subscribe</span></a>

Step 05: Now change your youtube channel image URL, channel name, and channel link.

YouTube Popup Subscribe Button

Step 06: Now save the code and the floating subscribe button is added to your website.

Here, you can adjust the color and font size by modifying the CSS code. If you have any trouble during this process, feel free to ask me in the comment section.

Leave a Reply

Your email address will not be published. Required fields are marked *