How to animated youtube logo on blogger website

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?
• 2. Original Floating YouTube Logo Code
• 3. Modified Floating YouTube Logo Code
• 4. Step-by-Step Guide to Implement the Code
• 5. Customization Tips

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:

1. Log in to Your Blogger Account: Visit Blogger and log in with your credentials.
2. Navigate to Your Blog's Dashboard: Select the blog where you want to add the floating YouTube logo.
3. Go to Theme Settings: In the left sidebar, click on Theme and then on the Customize button.
4. Access HTML Editor: In the customization menu, look for and click on the Edit HTML option.
5. 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.
6. 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 href attribute in the code to your own YouTube channel link. For example, replace https://www.youtube.com/@gettechnical with your channel's URL.
• Adjust the Logo Size: Modify the width and height properties within the <img> tag to change the size of the YouTube logo.
• Change the Logo’s Shape: Modify the border-radius value to adjust the curvature of the logo’s edges.
• Customize the Hover Effect: Update the box-shadow and transform properties inside the #floating-youtube-logo:hover img selector 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.