How to Make a YouTube Subscribe Button Blogger

How to Make a YouTube Subscribe Button Float on Blogger

in This post can help you if you want to increase the number of subscribes on your YouTube channel and expand your audience.

in This post will teach you how to install a subscribe button that floats on your Blog or website.

In this post, we’ll discuss the YouTube popup button in Blogger, which causes a popup to request YouTube channel subscriptions at the bottom of the homepage.

As a result, the user will be sent to the YouTube channel when they click the subscribe button. In this manner, you may lead website visitors to your YouTube channel.

As a result, it aids in growing your YouTube subscriber and user bases. Let’s look at how to add it to your Blogger website now.

How Do I Add a Blogger Floating Subscribe Button?

(CTA) button that prompts website users to take specific actions, such as redirecting to a product or service page, signing up for email newsletters, etc.

1: Go to Your Blogger dashboard and click on the theme section. 

2: Now take a backup before proceeding to the next step. 

3: Now click on Edit HTML and search for </body> tag. 

4: Now Add the below HTML & CSS code above it. 

<style>

  /* Popup Subscribe Button Designed By arforbes.com */

  .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(&quot;YT-btn&quot;).style.display=&quot;none&quot;’><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=’your cannel img url‘/>

  </div>

  <div class=’YT-subscribe-content’>

  <span class=’YT-title’>arforbes.com</span>

  <span class=’YT-desc’>Subscribe To watch more Blogging Tutorials</span>

  </div>

    <div class=’Subscribe_btn’>

    <a href=’https://www.youtube.com/channel/UCxfVig2rYkrWxKFs2SxNRUA?sub_confirmation=true’ target=’_blank’>

    <span class=’YT-btn-text’>Subscribe</span></a>

  </div></div>{codebox}

5: Change your YouTube channel name, link, and image URL .

6: After saving the code, your website will now have a floating subscribe button.

By altering the CSS code, you may change the font size and color here. Please feel free to ask me anything in the comments if you run into any difficulties during this procedure.