Skip to main content

Create YouTube Thumbnail Downloader on Blogger (2024)

Creating a YouTube Thumbnail Downloader for Blogger

Are you a blogger or a website owner, looking to enhance your website's functionality? Adding a YouTube Thumbnail Downloader to your Blogger site can be a great way to engage your audience. and also a great way to make a passive income without investment.

In this blog post, we'll guide you through the process of creating a simple and effective youtube thumbnail downloader with free script that you need to integrate into their Blogger templates. You can also use in your other platforms like WordPress, Because I have added all the codes independently… and a full script for Blogger (Just Copy & Paste).

Why Add a YouTube Thumbnail Downloader?

Most of the peoples looking for Youtube thumbnails for reference and there is no direct option from YouTube to download the thumbnails of other;s videos. So Its a necessary tool for every youtuber or website owners. You can generate a handsome passive income with this free website.

Creating a YouTube Thumbnail Downloader for Blogger

Getting Started

In the beginning I have given the full HTML Script with CSS and Javascript. You need to copy and paste the full script in your Blogger (Blogspot) Dashboard and Your website is ready after few changes.

Step by Step Video to Create a Youtube Thumbnail Downloader Website:

Subscribe Avstech – Anant Vijay Soni ⇢

Step to Follow to Create a Youtube Thumbnail Downloader Website:

  1. Create a Free Blogger Account: If you have a Gmail Account, then you can easily login to Blogger with your Gmail Account.
  2. Create a New Blog: Add title and Sub-domain URL and Your blog is ready
  3. Go to “Theme” and Click on “Edit HTML” option
  4. Remove all the codes, Ctrl+A (Select all) and Delete
  5. Copy and Paste Full HTML Code (Given Below)
  6. Click “Save” Icon.
  7. Your website is ready.
  8. Now just edit the content for SEO

Full HTML Code for Blogger (Copy & Paste)

If you have any issue in integrations. Please use this full HTML Code with CSS and Javascript. Just and Copy this below script and Paste into your Blogger HTML Editor.

HTML Code with CSS and Javascript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouTube Video Thumbnail Downloader</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            text-align: center;
            margin-bottom: 20px;
        }

        h1 {
            margin-bottom: 20px;
        }

        nav {
            margin-bottom: 20px;
        }

        nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
        }

        nav li {
            margin: 0 10px;
        }

        nav a {
            text-decoration: none;
            color: #333;
            font-weight: bold;
            font-size: 16px;
        }

        #logoContainer {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }

        #logo {
            max-width: 100%;
            height: auto;
            margin-right: 10px;
        }

        p {
            margin-bottom: 10px;
        }

        input[type="text"] {
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        button {
            display: block;
            margin: 0 auto;
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        #adSpaceTop,
        #adSpaceMiddle,
        #adSpaceBottom {
            text-align: center;
            margin: 20px 0;
            /* Add any additional styling for your ad spaces here */
        }

        #thumbnailLinkAbove,
        #thumbnailLinkBelow {
            text-align: center;
            margin: 20px 0;
        }

        #thumbnailContainer img {
            max-width: 100%;
            display: block;
            margin: 20px 0;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>
    <header>
        <!-- Logo and Menu Container -->
        <div id="logoContainer">
            <!-- Add your logo image here -->
            <img id="logo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBysPlyhSK-c34z54Ca5GBTjjnBGQbI4_O5slFNlM_Y24nnAXBQwojevN9ScJwTklbZHlsZcMCAOFvYtMXo7YQZRAVLbzulCvWeSAQsgwgyWY5bnT6EAOGBTw3ugv7pzOleehLCZfHKL1E0LCV_0SweQrZMDnTJoHLy7cU2JNhqMbpjpzLaeslp34XlUw/s1600/Screenshot%202023-12-20%20at%205.31.38%20PM.png" alt="Youtube thumbnail Downloader">

            <!-- Navigation Menu -->
            <nav>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="https://youtube-thumbnail-downloaderzz.blogspot.com/p/privacy-policy.html">Privacy Policy</a></li>
                    <li><a href="#about">Contact</a></li>
                    <!-- Add more menu items as needed -->
                </ul>
            </nav>
        </div>

        <h1>YouTube Video Thumbnail Downloader</h1>
    </header>

    <!-- Ad Space: Insert your ad code for the top position here -->
    <div id="adSpaceTop">
        <!-- Insert your ad code here -->
        <p>This is an ad space. Insert your ad code here.</p>
    </div>

    <p>Download youtube and vimeo thumbnail images of all quality for free. This application let you download thumbnails of all quality. Just paste the URL of the thumbnail video in the below input and click Get Thumbnail Image. Enter a valid YouTube video URL below and click the "Show & Download Thumbnail" button:</p>
    <input type="text" id="videoUrl" placeholder="Enter YouTube video URL">
    <button onclick="showThumbnail()">Show & Download Thumbnail</button>
    <div id="thumbnailLinkAbove"></div>
    <div id="thumbnailContainer"></div>
    <div id="thumbnailLinkBelow"></div>

    <!-- Ad Space: Insert your ad code for the middle position here -->
    <div id="adSpaceMiddle">
        <!-- Insert your ad code here -->
        <p>This is an ad space. Insert your ad code here.</p>
    </div>
<h2>What is Youtube Thumbnail</h2>
 <p> Content
  Content
  Content</p>
  
    <!-- Ad Space: Insert your ad code for the bottom position here -->
    <div id="adSpaceBottom">
        <!-- Insert your ad code here -->
        <p>This is an ad space. Insert your ad code here.</p>
    </div>

    <script>
        function showThumbnail() {
            // Get the YouTube video URL
            const videoUrl = document.getElementById('videoUrl').value;

            // Regular expression to extract the video ID from the URL
            const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
            const match = videoUrl.match(regex);

            if (match) {
                const videoId = match[1];
                const thumbnailUrl = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;

                // Display the thumbnail image
                const thumbnailContainer = document.getElementById('thumbnailContainer');
                thumbnailContainer.innerHTML = `<img src="${thumbnailUrl}" alt="Video Thumbnail">`;

                // Provide download links
                const thumbnailLinkAbove = document.getElementById('thumbnailLinkAbove');
                const thumbnailLinkBelow = document.getElementById('thumbnailLinkBelow');

                thumbnailLinkAbove.innerHTML = `<p><a href="${thumbnailUrl}" download>Download Thumbnail (Above)</a></p>`;
                thumbnailLinkBelow.innerHTML = `<p><a href="${thumbnailUrl}" download>Download Thumbnail (Below)</a></p>`;

            } else {
                alert('Invalid YouTube video URL. Please enter a valid URL.');
            }
        }
    </script>
</body>
</html>
Download Youtube Thumbnail Downloader Script

HTML Code for Other Platforms (WordPress or HTML Editors)

Here I have added scripts individually, You need to merge all these scripts as per your platform.

1. Create a New HTML Page

Start by creating a new HTML file for your script. This file will contain both the HTML structure and the JavaScript code for the thumbnail downloader.

2. HTML Structure

Build the basic HTML structure for your thumbnail downloader. Include sections for the video URL input, the “Show & Download Thumbnail” button, and spaces for displaying the thumbnail and download links.

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouTube Video Thumbnail Downloader</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div id="logoContainer">
            <img id="logo" src="path/to/your/logo.png" alt="Your Logo">
            <nav>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
        <h1>YouTube Video Thumbnail Downloader</h1>
    </header>

    <div id="adSpaceTop">
        <!-- Insert your ad code here -->
        <p>This is an ad space. Insert your ad code here.</p>
    </div>

    <p>Enter a valid YouTube video URL below and click the "Show & Download Thumbnail" button:</p>
    <input type="text" id="videoUrl" placeholder="Enter YouTube video URL">
    <button onclick="showThumbnail()">Show & Download Thumbnail</button>
    <div id="thumbnailLinkAbove"></div>
    <div id="thumbnailContainer"></div>
    <div id="thumbnailLinkBelow"></div>

    <div id="adSpaceMiddle">
        <!-- Insert your ad code here -->
        <p>This is an ad space. Insert your ad code here.</p>
    </div>

    <div id="adSpaceBottom">
        <!-- Insert your ad code here -->
        <p>This is an ad space. Insert your ad code here.</p>
    </div>

    <script src="script.js"></script>
</body>
</html>

Remember to replace "path/to/your/logo.png" in the HTML file with the actual path to your logo image.

3. Styling with CSS

Apply styles to make your thumbnail downloader visually appealing. Ensure that the layout is responsive and user-friendly.

CSS (styles.css):

body {
    font-family: Arial, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

header {
    text-align: center;
    margin-bottom: 20px;
}

h1 {
    margin-bottom: 20px;
}

nav {
    margin-bottom: 20px;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

nav li {
    margin: 0 10px;
}

nav a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-size: 16px;
}

#logoContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

#logo {
    max-width: 100%;
    height: auto;
    margin-right: 10px;
}

p {
    margin-bottom: 10px;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
}

button {
    display: block;
    margin: 0 auto;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

#adSpaceTop,
#adSpaceMiddle,
#adSpaceBottom {
    text-align: center;
    margin: 20px 0;
}

#thumbnailLinkAbove,
#thumbnailLinkBelow {
    text-align: center;
    margin: 20px 0;
}

#thumbnailContainer img {
    max-width: 100%;
    display: block;
    margin: 20px 0;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

4. JavaScript Logic

Write the JavaScript code to fetch the YouTube video thumbnail based on the entered URL. Provide download links for users to easily save the thumbnails.

JavaScript (script.js):

function showThumbnail() {
    const videoUrl = document.getElementById('videoUrl').value;
    const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
    const match = videoUrl.match(regex);

    if (match) {
        const videoId = match[1];
        const thumbnailUrl = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;

        const thumbnailContainer = document.getElementById('thumbnailContainer');
        thumbnailContainer.innerHTML = `<img src="${thumbnailUrl}" alt="Video Thumbnail">`;

        const thumbnailLinkAbove = document.getElementById('thumbnailLinkAbove');
        const thumbnailLinkBelow = document.getElementById('thumbnailLinkBelow');

        thumbnailLinkAbove.innerHTML = `<p><a href="${thumbnailUrl}" download>Download Thumbnail (Above)</a></p>`;
        thumbnailLinkBelow.innerHTML = `<p><a href="${thumbnailUrl}" download>Download Thumbnail (Below)</a></p>`;

    } else {
        alert('Invalid YouTube video URL. Please enter a valid URL.');
    }
}

Download and Integration

1. Download the Script

Users can download the script directly from here.

2. Integration into Blogger

To integrate the script into a Blogger template, follow these steps:

  • Access your Blogger dashboard.
  • Navigate to the theme section.
  • Click on “Edit HTML.”
  • Copy and paste the downloaded script into the HTML editor.
  • Save the changes.

3. Usage Instructions

Provide clear instructions on how users can utilize the thumbnail downloader on their blog posts. Include information on entering the YouTube video URL, clicking the button, and integrating the generated thumbnail into their content.

Customization Options

Encourage users to customize the script further according to their blog's design. They can modify the CSS styles, add additional features, or integrate the script into specific sections of their blog.

Conclusion

Adding a YouTube Video Thumbnail Downloader to your Blogger site is a fantastic way to empower your users and enhance the visual appeal of their content. By following the simple steps outlined in this post, bloggers can easily download and integrate the script into their templates, offering a valuable tool for their audience.

Anant Vijay Soni

Anant Vijay Soni

A passionate blogger and serial youtuber, timely efforts, and dedication are the key protocols that keep me succeeding. I love to share information about WordPress, SEO, Social Media Marketing, Affiliate Marketing, Make Money Online, Email Marketing and much more.
All Posts

Related posts:

2 Comments

  • Aniket More. says:
    December 25, 2023 at 8:30 PM

    Vijay sir apane jo ye code diya hai wo copy nahi ho raha hai please kuch solution de dijye bahot help hogi apaki mai bahot tray kar raha hu

    Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to our newsletter

Discover more from Anantvijaysoni.in

Subscribe now to keep reading and get access to the full archive.

Continue reading