How to Add a Floating YouTube Logo with Smooth Animation in Blogger
Adding a floating YouTube logo with smooth animations is an excellent way to direct visitors to your YouTube channel and increase subscribers. In this comprehensive guide, we’ll walk you through the steps of integrating a floating YouTube logo into your Blogger template. You’ll learn how to customize it for your channel and add some smooth animation effects.
Table of Contents
1. Why Add a Floating YouTube Logo?
A floating YouTube logo is an eye-catching element that encourages visitors to click and subscribe to your YouTube channel. By adding it to your website or blog, you make it easier for your audience to discover your channel, boosting engagement and subscriber count.
2. Original Floating YouTube Logo Code
This is the initial version of the floating YouTube logo code. It includes basic styling and positioning. Copy the code below and add it above the closing </body> tag in your Blogger template:
<style>
#floating-youtube-logo {
position: fixed;
left: 20px;
bottom: 20px;
z-index: 1000;
transition: all 0.3s ease;
}
#floating-youtube-logo img {
width: 50px;
height: 50px;
transform: scale(1.1);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
#floating-youtube-logo:hover img {
transform: scale(1.2);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
@media (max-width: 768px) {
#floating-youtube-logo {
left: 10px;
bottom: 50px;
}
#floating-youtube-logo img {
width: 40px;
height: 40px;
}
}
</style>
<div id="floating-youtube-logo">
<a href="https://www.youtube.com/@gettechnical" target="_blank" title="Subscribe to our YouTube Channel">
<img alt="YouTube Subscribe Logo" src="https://upload.wikimedia.org/wikipedia/commons/4/42/YouTube_icon_%282013-2017%29.png" />
</a>
</div>
<script>
window.onload = function() {
var homepageURL = 'https://gettechnicalsolution.blogspot.com/';
if (window.location.href === homepageURL) {
document.getElementById('floating-youtube-logo').style.display = 'block';
} else {
document.getElementById('floating-youtube-logo').style.display = 'none';
}
};
</script>
3. Modified Floating YouTube Logo Code
This is the updated version of the code with a more rectangular logo and smooth animation effects. Copy the code below, replace your existing code, and make sure to change the YouTube URL to your channel's link:
<style>
#floating-youtube-logo {
position: fixed;
left: 20px;
bottom: 20px;
z-index: 1000;
transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}
#floating-youtube-logo img {
width: 50px;
height: 30px;
border-radius: 10px;
transform: scale(1.1);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
#floating-youtube-logo:hover img {
transform: scale(1.2);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
@media (max-width: 768px) {
#floating-youtube-logo {
left: 10px;
bottom: 50px;
display: block;
}
#floating-youtube-logo img {
width: 45px;
height: 25px;
border-radius: 8px;
}
}
</style>
<div id="floating-youtube-logo">
<a href="https://www.youtube.com/@gettechnical" target="_blank" title="Subscribe to our YouTube Channel">
<img alt="YouTube Subscribe Logo" src="https://upload.wikimedia.org/wikipedia/commons/4/42/YouTube_icon_%282013-2017%29.png" />
</a>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var homepageURL = 'https://gettechnicalsolution.blogspot.com/';
if (window.location.href === homepageURL) {
document.getElementById('floating-youtube-logo').style.display = 'block';
} else {
document.getElementById('floating-youtube-logo
').style.display = 'none';
}
setTimeout(function() {
var logo = document.getElementById('floating-youtube-logo');
if (logo.style.display === '' || logo.style.display === 'none') {
logo.style.display = 'block';
}
}, 500);
});
</script>
4. Step-by-Step Guide to Implement the Code
Follow these steps to add the floating YouTube logo to your Blogger template:
- Log in to Your Blogger Account: Visit Blogger and log in with your credentials.
- Navigate to Your Blog's Dashboard: Select the blog where you want to add the floating YouTube logo.
- Go to Theme Settings: In the left sidebar, click on Theme and then on the Customize button.
- Access HTML Editor: In the customization menu, look for and click on the Edit HTML option.
- Insert the Code: Scroll down to the bottom of the HTML code and paste either the original or modified code (provided above) **above** the closing
</body>tag. - Save and Preview: Click on Save in the top-right corner, and then click on Preview to see how the YouTube logo appears on your blog.
By following these steps, you’ll successfully add a floating YouTube logo to your Blogger template. Make sure to customize the logo’s URL to match your own YouTube channel link.
5. Customization Tips
Below are some tips to customize the floating YouTube logo code for better visual appeal and functionality:
- Change the Logo URL: Update the
hrefattribute in the code to your own YouTube channel link. For example, replacehttps://www.youtube.com/@gettechnicalwith your channel's URL. - Adjust the Logo Size: Modify the
widthandheightproperties within the<img>tag to change the size of the YouTube logo. - Change the Logo’s Shape: Modify the
border-radiusvalue to adjust the curvature of the logo’s edges. - Customize the Hover Effect: Update the
box-shadowandtransformproperties inside the#floating-youtube-logo:hover imgselector to change the hover effect. - Update the Display Logic: Use JavaScript to control when the logo appears based on specific page URLs or user interactions.
That's it! You’ve now learned how to add a floating, animated YouTube logo to your Blogger template. Feel free to customize the design and behavior to match your blog’s theme and style.
Post a Comment
Please leave a message for about Blog