Adding a Pop-Up YouTube Subscribe Button to Your Blogger Site
As a blogger, you're constantly looking for ways to grow your online presence and increase engagement with your audience. One effective way to do this is by promoting your YouTube channel on your website. This article will show how to add a pop-up YouTube subscribe button to your Blogger site.
Why Add a Pop-Up YouTube Subscribe Button?
Adding a pop-up YouTube subscribe button to your Blogger site can help you:
- - Increase your YouTube subscribers and user base
- - Drive more traffic to your YouTube channel
- - Promote your YouTube content to your website visitors
- - Enhance your online presence and credibility
How to add a Pop-Up subscribe button in Blogger?
To add a floating subscribe button to Blogger, follow these steps.
- Step 1: Go to your Blogger account, then Blogger Dashboard, select the tab, then “Appearance”.
- Step 2: Make a backup before moving on to the next step.
- Step 3: Now go to edit HTML and look for the /body> tag.
- Step 4: Add the HTML and CSS code below.
<style>
/* Popup Subscribe Button Designed By NiaDZGN.blogspot.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; left: 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;left: 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: center; padding-right: 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: center;padding-right: 12px; line-height: normal; font-weight: 500; }
.YT-btn-text{margin-center: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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCBbOLdEQr2HQu0H2Ggl9YTamE9-822Euwv6CoLu-xnWEd4clikF8xNN38XGFx3aB9fLHRlGqo3cnvf74Xk1_sJxD0tj-Mg4AR3Y4FCmLFmGPMITjTgja3KUVgT0KknlrwY4s4DzpNGpOa-ugOdbhdIelvrwuDqV9zyhrRNBFmsggaNg0SxpGTKJgFmsws/s16000/YouTube-Logo.png'/>
</div>
<div class='YT-subscribe-content'>
<span class='YT-title'>NIADZGN Channel</span>
<span class='YT-desc'>Subscribe for more blogging lessons.</span>
</div>
<div class='Subscribe_btn'>
<a href='https://www.youtube.com/@niadzgn/videos' target='_blank'>
<span class='YT-btn-text'>Subscribe</span></a>
</div></div>- Step 5: Now save the code and the popup subscription button will be added to your website.
By modifying the CSS code, you can change the color and font size. If you have any questions during this procedure, please leave them in the comments area.
If you want to avoid this popup appearing again after clicking the close button, you can use the script code below along with the code above.
<script>
// get the popup element
const popup = document.getElementById("YT-btn");
// get the close button element
const closeBtn = document.querySelector(".YT-subscribe-close");
// get the subscribe button element
const subscribeBtn = document.querySelector(".Subscribe_btn a");
// set the cookie name and expiration time
const cookieName = "YT_popup_closed";
const expirationDays = 30;
// function to set the cookie with the specified name and expiration time
function setCookie(cookieName, expirationDays) {
const date = new Date();
date.setTime(date.getTime() + (expirationDays * 24 * 60 * 60 * 1000));
const expires = "expires=" + date.toUTCString();
document.cookie = cookieName + "=true;" + expires + ";path=/";
}
// function to check if the cookie with the specified name exists
function checkCookie(cookieName) {
const cookies = document.cookie.split(";");
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.indexOf(cookieName) === 0) {
return true;
}
}
return false;
}
// check if the cookie exists, and hide the popup if it does
if (checkCookie(cookieName)) {
popup.style.display = "none";
} else {
popup.style.display = "flex";
}
// add event listeners to the close and subscribe buttons
closeBtn.addEventListener("click", function() {
popup.style.display = "none";
setCookie(cookieName, expirationDays);
});
subscribeBtn.addEventListener("click", function() {
popup.style.display = "none";
setCookie(cookieName, expirationDays);
});
</script>When you press the close button this Javascript code will prevent the popup from appearing again and again.
If you do not clear your browser cookies or open in incognito mode, the site will not appear for the next 30 days.
I hope this post shows you how to add and edit the YouTube Channel Popup Subscribe Button to your Blogger website easily.
To get the latest updates, subscribe to our YouTube channel. Don't forget to message us on social media, and Facebook, and follow the blog for more educational programs and useful additions.
