Skip to main content

Gemini treanding prompt photo boys

Post a Comment

How to animated youtube logo on blogger website

How to Add a Floating YouTube Logo with Smooth Animation in Blogger

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.

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.

Comments

Post a Comment

Please leave a message for about Blog

Popular posts from this blog

How to use never install on smartphone free

How to Use Neverinstall Website on Smartphone Neverinstall is a website that allows you to run desktop applications on your browser. While it was not originally designed for smartphones, you can still use it by enabling the desktop site option on your browser. Never install on Android  Here are the steps on how to use Neverinstall on your smartphone: Go to the Neverinstall website on your smartphone's browser. Tap the Menu button (three dots) and select Desktop Site . Create an account or sign in if you already have one. Tap the Spaces tab. Tap the Create Space button. Give your space a name and select the applications that you want to install. Tap the Create button. Your space will be created and you will be able to start using the applications. Keyboard Issues on never install website  One issue you may encounter when using Neverinstall on your smartphone is the keyboard. The mobile keyboard will not work on the website, so you will need to use a physic...
Post a Comment
Read more

What is Strobing technique

  Strobing  is a technique used to produce ultrasonic vocalizations by rapidly contracting and relaxing the vocal cords. This creates a series of short, high-pitched sounds that are above the range of human hearing. Strobing can be done voluntarily or involuntarily. Involuntary strobing can occur as a result of certain medical conditions, such as Tourette syndrome. Voluntary strobing is sometimes used as a form of body modification or performance art. To produce ultrasonic vocalizations through strobing, the vocal cords are rapidly contracted and relaxed. This creates a series of short, high-pitched sounds that are above the range of human hearing. The frequency of the sounds produced by strobing depends on the speed at which the vocal cords are contracted and relaxed. Strobing can be done voluntarily or involuntarily. Involuntary strobing can occur as a result of certain medical conditions, such as Tourette syndrome. Voluntary strobing is sometimes used as a form of body modi...
Post a Comment
Read more

How to use Google WiFi 3 pack

  Here are the steps on how to use Google WiFi 3 pack : Download the Google Home app. This app is available for Android and iOS devices. Plug in your primary Google Wifi point. This point should be plugged into a wall outlet near your modem or gateway. Wait for the light on the point to turn blue. This indicates that the point is ready to be set up. Open the Google Home app. Tap Add > Set up device > New device. Scan the QR code on the bottom of your primary Google Wifi point. Follow the instructions in the app to complete the setup. Repeat steps 4-6 to set up any additional Google Wifi points. Once all of your Google Wifi points are set up, you can enjoy a fast and reliable Wi-Fi network throughout your home. Here are some additional tips for using Google WiFi 3 pack: Place your Google Wifi points in strategic locations throughout your home to ensure that you have good coverage. You can use the Google Home app to manage your Google Wifi network. You can renam...
Post a Comment
Read more