Domain Name Generator Script for Blogger

If you’re running a blog on Blogger and want to offer your visitors a handy tool like a Domain Name Generator, you’re in the right place. In this tutorial, we’ll guide you step-by-step to integrate a fully functional domain name generator script into your Blogger website. By the end, your visitors will be able to enter a keyword and get domain name suggestions, making your blog more engaging and useful.

Are you a blogger on the Blogger/Blogspot.com platform looking to add a useful and engaging tool to your site? Look no further! This tutorial introduces a handy script that can help your visitors find the perfect domain name suggestions based on their keywords – the Domain Name Generator Script.

A Domain Name Generator is a tool that helps users brainstorm domain names for their website. It takes a keyword input and suggests domain names based on availability and creativity. For example, if you enter "travel", it might suggest:

• traveladventures.com
• traveldiary.net
• exploretravel.org

This tool is great for anyone starting a website or blog and struggling to find the right domain name.

1. Get an API Key: Sign up on RapidAPI and search for "Domain Suggestions API". Subscribe and get your free API key.
2. Add the Script to Your Blog: Go to your Blogger dashboard, open a post or page, and switch to the HTML view. Paste the provided script (see below) into the editor.
3. Publish and Test: Save your changes, publish the page, and test the tool by entering keywords. Ensure suggestions are loading and the "Copy to Clipboard" button works.

Copy and paste the following script into your Blogger post or page:

<div id="domain-generator">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/css/uikit.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit-icons.min.js"></script>

  <div class="uk-container uk-margin-large-top">
    <h2 class="uk-heading-line uk-text-center"><span>Domain Name Generator</span></h2>
    <form class="uk-grid-small uk-child-width-expand@s uk-margin-medium" uk-grid>
      <input class="uk-input" type="text" id="input-keyword" placeholder="Enter a keyword (e.g., travel)" />
      <button class="uk-button uk-button-primary" type="button" id="generate-btn">Generate</button>
    </form>
    <ul class="domain-list uk-list uk-list-divider"></ul>
  </div>

  <script>
    const API_URL = "https://domainr.p.rapidapi.com/v2/suggest";
    const API_KEY = "YOUR_RAPIDAPI_KEY";
    const generateBtn = document.getElementById('generate-btn');
    const keywordInput = document.getElementById('input-keyword');
    const domainList = document.querySelector('.domain-list');

    generateBtn.addEventListener('click', () => {
      const keyword = keywordInput.value.trim();
      if (!keyword) {
        UIkit.notification({ message: 'Please enter a keyword!', status: 'warning' });
        return;
      }
      domainList.innerHTML = '<li class="uk-text-center">Loading suggestions...</li>';
      fetch(`${API_URL}?query=${keyword}`, {
        method: 'GET',
        headers: {
          'X-RapidAPI-Host': 'domainr.p.rapidapi.com',
          'X-RapidAPI-Key': API_KEY
        }
      })
        .then(response => response.json())
        .then(data => {
          domainList.innerHTML = '';
          const suggestions = data.results;
          if (suggestions.length === 0) {
            domainList.innerHTML = '<li class="uk-text-center">No suggestions found.</li>';
            return;
          }
          suggestions.forEach(suggestion => {
            const domainName = suggestion.domain;
            const listItem = document.createElement('li');
            listItem.innerHTML = `<span>${domainName}</span>
              <button class="uk-button uk-button-small uk-button-default copy-btn" uk-tooltip="Copy to Clipboard">
                <span uk-icon="copy"></span>
              </button>`;
            domainList.appendChild(listItem);
            listItem.querySelector('.copy-btn').addEventListener('click', () => {
              navigator.clipboard.writeText(domainName).then(() => {
                UIkit.notification({ message: 'Copied to clipboard!', status: 'success' });
              });
            });
          });
        })
        .catch(error => {
          domainList.innerHTML = '<li class="uk-text-center">Error fetching suggestions. Please try again later.</li>';
          console.error('Error fetching suggestions:', error);
        });
    });
  </script>
</div>

Copy and paste the following script into your Blogger template section:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='https://www.google.com/2005/gml/b' xmlns:data='https://www.google.com/2005/gml/data' xmlns:expr='https://www.google.com/2005/gml/expr'> 
  <head>
    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 
    <b:if cond='data:blog.isMobile'> 
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> 
    <b:else/> 
      <meta content='width=1100' name='viewport'/> 
    </b:if> 
    <b:include data='blog' name='all-head-content'/> 
    <title><data:blog.pageTitle/></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/css/uikit.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit-icons.min.js"></script>
   <b:skin><![CDATA[/*
-----------------------------------------------
.domain-list li {
      padding: 10px 15px;
      border: 1px solid #ddd;
      border-radius: 5px;
      margin-bottom: 10px;
      background: #f9f9f9;
      transition: background-color 0.3s ease;
    }
    .domain-list li:hover {
      background-color: #e6e6e6;
    }
    .copy-btn {
      cursor: pointer;
      margin-left: 10px;
    }
----------------------------------------------
]]></b:skin>
   
  </head>
  <body>
    <div class="uk-container uk-margin-large-top">
    <h1 class="uk-heading-line uk-text-center"><span>Domain Name Generator</span></h1>
    
    <form class="uk-grid-small uk-child-width-expand@s uk-margin-medium" uk-grid>
      <input class="uk-input" type="text" id="input-keyword" placeholder="Enter a keyword (e.g., blog)" />
      <button class="uk-button uk-button-primary" type="button" id="generate-btn">Generate</button>
    </form>
    
    <ul class="domain-list uk-list uk-list-divider"></ul>
  </div>

  <script>
    const generateBtn = document.getElementById('generate-btn');
    const keywordInput = document.getElementById('input-keyword');
    const domainList = document.querySelector('.domain-list');
    const API_URL = "https://domainr.p.rapidapi.com/v2/suggest";
    const API_KEY = "YOUR_RAPIDAPI_KEY"; // Replace with your RapidAPI key

    generateBtn.addEventListener('click', () => {
      const keyword = keywordInput.value.trim();
      if (!keyword) {
        UIkit.notification({ message: 'Please enter a keyword!', status: 'warning' });
        return;
      }

      domainList.innerHTML = '<li class="uk-text-center">Loading suggestions...</li>'; // Loading state

      fetch(`${API_URL}?query=${keyword}`, {
        method: 'GET',
        headers: {
          'X-RapidAPI-Host': 'domainr.p.rapidapi.com',
          'X-RapidAPI-Key': API_KEY
        }
      })
        .then(response => response.json())
        .then(data => {
          domainList.innerHTML = ''; // Clear loading message
          const suggestions = data.results;

          if (suggestions.length === 0) {
            domainList.innerHTML = '<li class="uk-text-center">No suggestions found.</li>';
            return;
          }

          suggestions.forEach(suggestion => {
            const domainName = suggestion.domain;
            const listItem = document.createElement('li');
            listItem.innerHTML = `
              <span>${domainName}</span>
              <button class="uk-button uk-button-small uk-button-default copy-btn" uk-tooltip="Copy to Clipboard">
                <span uk-icon="copy"></span>
              </button>
            `;
            domainList.appendChild(listItem);

            // Copy functionality
            const copyBtn = listItem.querySelector('.copy-btn');
            copyBtn.addEventListener('click', () => {
              navigator.clipboard.writeText(domainName).then(() => {
                UIkit.notification({ message: 'Copied to clipboard!', status: 'success' });
              });
            });
          });
        })
        .catch(error => {
          domainList.innerHTML = '<li class="uk-text-center">Error fetching suggestions. Please try again later.</li>';
          console.error('Error fetching suggestions:', error);
        });
    });
  </script>
<footer class="uk-section uk-section-small uk-section-muted">
  <div class="uk-container uk-text-center">
    <p>© 2024 <a href="https://www.codenova.in" target="_blank">Codenova.in</a> - Crafted with passion by <strong>Ajay Kumar</strong>. All rights reserved.</p>
  </div>
</footer>

  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'/>

<!-- End Please keep the Credits intact-->
  </body> 
</html>

 

With this Domain Name Generator Script, you can provide a valuable tool to your visitors and make your Blogger website stand out. Follow the steps above to set it up, and your visitors will love the new functionality! For more exciting tools and scripts, keep exploring our blog. 😊