How To Create Keywords Generator Tool in Blogger, Blogspot

Hello friends! Welcome to your modernsite4u blog. So in this article today we are going to talk about Create Keywords Generator Tool Website in Blogger. And this Blogger Me Keywords Generator Tool Website Kaise Banaye? So we will know all these things in this article. So stay in this article and know more details.

Keywords Generator Tool

If you are a blogger then you will have a lot of information about "Keywords". And speaking of a successful blogger, keywords are the biggest hand behind their success. And in such a situation, many keywords finder tool is available now to find correct keywords. Some of which are Tools Free and some Tools Paid.

By the way, everyone will always prefer Paid Keywords Generator Tool. So in this case, if you also want to rank your Blogpost in Google SERP, then you will also have to write your article with keywords using Keywords Generator Tool.

Keywords Generator Tool Script for Blogger

So now it comes to whether we can make Keywords Generator Tool in Blogger or BlogSpot? So the answer is yes. We can make it easily. To create this tool you will need Keywords Generator Tool Script for Blogger & Blogspot. So below I have told you step by step how you can easily create Keywords Generator Tool in Blogger or Blogspot Website.

Steps to Create Keywords Generator Tool Website in Blogger/Blogspot

Go to Blogger/Blogspot Dashboard
Now Click on Theme Section
Scroll Down & Click & Apply Simple Blog Template
Now Click On Customize Arrow & Click On Switch to First Generation Theme
Now Click On Switch Without a Backup & Now Turn off Navbar
Click On Edit HTML & Copy Code Bellow

<!DOCTYPE html>

<html>

<title>Keyword Generator Tool</title>

<head>

<style>

* {

box-sizing: border-box;

}

html {

background-color: #58a3c7;

}

body {

margin: 0;

padding: 60px 0;

font-family: arial, sans-serif;

background-color: #58a3c7;

min-height: 100vh;

}

form {

background-color: #fff;

margin: auto;

max-width: 640px;

padding: 20px;

border: 1px solid #ddd;

border-radius: 5px;

box-shadow: 0 3px 5px rgba(0,0,0,.2);

h2 {

margin-top: 0;

text-align: center;

}

label {

display: block;

margin-bottom: 1em;

[type=text] {

font-size: inherit;

display: block;

width: 100%;

padding: .5em;

border-radius: 3px;

border: 1px solid #ddd;

}

span {

display: block;

margin-bottom: .5em;

font-weight: bold;

}

[type=checkbox] {

+ span {

margin-bottom: 0;

display: inline-block;

vertical-align: middle;

font-weight: normal;

}

button {

display: block;

font-size: inherit;

width: 100%;

height: 2em;

padding: .5em;

text-transform: uppercase;

background-color: #4caf50;

color: #fff;

border-radius: 3px;

border: 0;

&:focus {

outline: solid 1px #216f24;

}

meter {

display: block;

width: 100%;

height: 2em;

margin-top: 1em;

overflow: hidden;

border-radius: 3px;

position: relative;

float: left;

bottom: 1em;

transform: translateY(-100%);

transition: height .3s ease-in-out;

&:after {

content: '';

display: block;

box-shadow: inset 0 3px 5px rgba(0,0,0,.5);

position: absolute;

border-radius: 3px;

width: 100%;

height: 100%;

z-index: 1;

top: 0;

left: 0;

}

&[value="0"],

&[value="1"]{

height: 0;

}

#results {

background-color: #fff;

max-width: 640px;

margin: auto;

padding: 20px;

border: 1px solid #ddd;

border-radius: 5px;

box-shadow: 0 3px 5px rgba(0,0,0,.2);

margin-top: 20px;

&:empty {

display: none;

}

img {

width: 100%;

height: auto;

}

.ads {

margin: auto;

padding: 60px 0;

max-width: 640px;

box-shadow: 0 5px 15px rgba(0,0,0,.16);

border-radius: 5px;

margin-top: 1em;

background: #fff;

text-align: left;

}

</style>

</head>

<h2>Free Keyword Generator</h2>

<p>Using This Amazing Free Keywords Finder Tool You Can Find Unlimited Keyword Opportunities.</p>

<label>

<span>Keyword</span>

</label>

<label>

<span>Include results for "keyword [a-z]".</span>

</label>

<label>

<span>Include results for "keyword [0-9]".</span>

</label>

<button type="submit">Get keywords!</button>

</form>

Place you Ad Code 2

</div>

</div>

<br>

</body>

var endpoint = 'https://completion.amazon.com/search/complete?mkt=1&search-alias=aps&x=queryKeywordComplete&Result&q=';

var keywords = [];

var results = {};

var queryIndex = 0;

var meter = document.getElementById('progress-meter');

var resultList = document.getElementById('results');

var ranks = {};

function updateProgress() {

meter.value = queryIndex / keywords.length;

}

function queryKeywords() {

queryIndex = 0;

nextQuery();

}

function nextQuery() {

updateProgress();

if (queryIndex < keywords.length) {

queryKeyword(keywords[queryIndex]);

} else {

displayResults();

}

function displayResults() {

var resultHTML = '';

for ( var keyword in results ) {

resultHTML += `<h2>${keyword}</h2>`;

resultHTML += `<ul>`;

results[keyword].forEach(function(item) {

resultHTML += `<li title="${keyword}">${item}</li>`;

})

resultHTML += `</ul>`;

}

resultList.innerHTML = resultHTML;

}

function queryKeyword(keyword) {

keyword = encodeURIComponent(keyword);

// to get around cors and other formatting issues the result of this causes.

var s = document.getElementById('az-autocomplete');

if (s) {

s.remove();

}

s = document.createElement("script");

s.id = 'az-autocomplete';

s.type = "text/javascript";

s.src = `${endpoint}${keyword}`;

document.body.append(s);

}

function queryKeywordComplete(){

queryIndex++;

storeQueryResult();

nextQuery();

}

function storeQueryResult() {

if (completion) {

var keyword = completion[0];

var result = completion[1];

results[keyword] = result;

}

function iterateAlphabet(keyword) {

var list = [];

for (var i = 0; i < 26; i++) {

// 97 = a

var char = String.fromCharCode(97 + i);

list.push(`${keyword} ${char}`);

}

return list;

}

function iterateNumbers(keyword) {

var list = [];

for (var i = 0; i <= 9; i++ ) {

list.push(`${keyword} ${i}`);

}

return list;

}

var queryForm = document.getElementById('autocomplete');

queryForm.addEventListener('submit', function(e) {

var keyword = e.target.keyword.value;

var alpha = e.target.alpha.checked;

var numbers = e.target.numbers.checked;

keywords = [];

results = {};

ranks = [];

if (alpha || numbers) {

var height = Math.floor(Math.random() * (900 - 300) + 300);

resultList.innerHTML = `<h2 style="text-align: center;">A kitten while you wait</h2><img src="https://placekitten.com/598/${height}">`;

} else {

resultList.innerHTML = '';

}

e.preventDefault();

updateKeywords(keyword, alpha, numbers);

queryKeywords();

})

function updateKeywords(keyword, addAlpha, addNumbers) {

keywords.push(keyword);

if (addAlpha) {

var a = iterateAlphabet(keyword);

keywords = keywords.concat(a);

}

if(addNumbers) {

var n = iterateNumbers(keyword);

keywords = keywords.concat(n);

}

</script>

Remove all Code & Paste New Code Here
Now Click on Save Theme, That’s All
Now Your Keywords Generator Tool is Ready to Use

Conclusion -

How did you like this article about How to Create Keywords Generator Tool in Blogger & Blogspot, Keywords Generator Tool Script for Blogger. You must definitely comment by commenting in the comment box below. Or you also want to give some kind of Suggestion, then you can share your opinion with us in the Comment Box below.

Earn Money Online

How To Create Keywords Generator Tool in Blogger, Blogspot