How To Make Word Counter Tool Website In Blogger

Hey guys welcome to the blogs of Tech Era,So today we are back with a stunning script in blogger which will count the words in a text or in paragraph.This tool will also detect the number of sentences,paragraphs and will also show the top keywords from the text.It Is completely free of cost.

So here in this blog we will learn how to setup a website which will count word from text. After

completing website setup it is necessary to do the SEO setting,as seo will help you website to rank.

So below are the steps for setuping site in blogger, follow them and start Earning from your tool site.

Click On The Below Links To Learn How To Do Them

SEO Setting In Blogger-: CLICK HERE
How To Make Pages In Blogger-: CLICK HERE
How To Do Earning In Blogger-: CLICK HERE
How To Index Your Blogger Website In Google-: CLICK HERE

Do The Following Steps For Making Website In Blogger For Advance Word Counter Tool Website :-

Step 1: First of all go to your Blogger Dashboard.

Step 2: Go to Themes,then scroll down and select Simple Theme template,then click on down arrow and select Mobile Setting then click on Desktop and click Save after then select Switch To First Generation Classic Theme, and then select Switch Without Backup and then again click on down arrow and select Change Navbar option and again a drop down arrow will come then select option Off click on Save.

Step 3: Then Click on edit Html and select the entire code and delete it,after deleting the complete code,Copy the below code and then click on Save.

<!DOCTYPE html>

<html>

<title>Advance Word Counter Tool Online</title>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="robots" content="index,follow" />

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<link href='https://techly360.com/word-counter-script-for-blogger/' rel='canonical'/>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>

/* border box */

html {

box-sizing: border-box;

-webkit-user-select: none;

/* Chrome all / Safari all */

-moz-user-select: none;

/* Firefox all */

-ms-user-select: none;

/* IE 10+ */

user-select: none;

/* Likely future */

}

*:before,

*:after {

box-sizing: inherit;

}

b {

font-weight: bold;

}

/* main app styles */

body {

width: 700px;

margin: 0 auto;

background-color: #FAFAFA;

font-family: 'Source Sans Pro', sans-serif;

color: #111;

}

.container {

margin: 2% auto;

padding: 15px;

background-color: #FFFFFF;

-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);

box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);

}

h1 {

font-size: 3rem;

font-weight: 900;

text-align: center;

margin: 1% 0 3%;

}

textarea {

width: 100%;

height: 250px;

padding: 10px;

border: 1px solid #d9d9d9;

outline: none;

font-size: 1rem;

resize: none;

line-height: 1.5rem;

}

textarea:hover {

border-color: #C0C0C0;

}

textarea:focus {

border-color: #4D90FE;

}

.output.row {

width: 100%;

border: 1px solid #DDD;

font-size: 1.4rem;

margin: 1% 0;

background-color: #F9F9F9;

}

.output.row div {

display: inline-block;

width: 42%;

padding: 10px 15px;

margin: 1%;

}

.output.row span {

font-weight: bold;

font-size: 1.5rem;

}

#readability {

width: 52%;

font-weight: bold;

}

#readability:hover {

background-color: #4D90FE;

color: #FFF;

border-radius: 2px;

cursor: pointer;

}

#readability:active {

background-color: #307AF3;

}

.keywords {

display: none;

margin: 4% 0 0;

font-size: 2rem;

font-weight: 900;

}

.keywords ul {

font-weight: 400;

border: 1px solid #DDD;

font-size: 1.4rem;

background-color: #F9F9F9;

margin: 2% 0;

}

.keywords li {

display: inline-block;

width: 44%;

padding: 10px;

margin: 1%;

}

** Making it responsive

@media (max-width: 750px) {

body {

width: 600px;

}

.output.row {

font-size: 1.2rem;

}

.output.row span {

font-size: 1.3rem;

}

.keywords ul {

font-size: 1.2rem;

}

@media (max-width: 600px) {

/* rewriting old styles */

body {

width: 95%;

}

.output.row {

border: none;

background-color: #FFF;

}

.output.row div {

display: block;

width: 100%;

padding: 10px 15px;

margin: 2% auto;

border: 1px solid #DDD;

font-size: 1.8rem;

background-color: #F9F9F9;

}

.output.row span {

font-size: 2rem;

}

#readability {

width: 100%;

font-size: 1.6rem;

font-weight: 400;

}

.keywords {

margin: 10% auto;

}

.keywords ul {

font-weight: 400;

border: none;

font-size: 1.8rem;

background-color: #F9F9F9;

margin: 5% 0;

}

.keywords li {

display: block;

width: 100%;

padding: 10px;

margin: 2% auto;

border: 1px solid #DDD;

}

.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>

<nav class="navbar navbar-default">

<div><button type="button" class="btn btn-primary" style="float:right;margin:4px" data-toggle="modal" data-target="#privacy-page">

Privacy Policy

</button></div>

<div><button type="button" class="btn btn-primary" style="float:right;margin:4px" data-toggle="modal" data-target="#Contact-Us">

Contact Us

</button></div>

<div><button type="button" class="btn btn-primary" style="float:right; margin:4px" data-toggle="modal" data-target="#about-page">

About Us

</button></div>

</div>

</nav>

<style id='page-skin-1' type='text/css'>

button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 12px 28px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

}

</style>

<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="modal" id="about-page">

<div class="modal-dialog modal-lg">

<div class="modal-content">

<div class="modal-header">

<h4 class="modal-title">About Page</h4>

<button type="button" class="close" data-dismiss="modal">×</button>

</div>

<div class="modal-body">

About us Page Content

</div>

<div class="modal-footer">

<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

</div>

<div class="modal" id="Contact-Us">

<div class="modal-dialog modal-lg">

<div class="modal-content">

<div class="modal-header">

<h4 class="modal-title">Contact Us</h4>

<button type="button" class="close" data-dismiss="modal">×</button>

</div>

<div class="modal-body">

Contact Us Page Content

</div>

<div class="modal-footer">

<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

</div>

<div class="modal" id="privacy-page">

<div class="modal-dialog modal-lg">

<div class="modal-content">

<div class="modal-header">

<h4 class="modal-title">Privacy Policy</h4>

<button type="button" class="close" data-dismiss="modal">×</button>

</div>

<div class="modal-body">

Privacy Policy Page Content

</div>

<div class="modal-footer">

<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

</div>

<body style="background:#9FFF33;">

<div class="container">

<h1 style="color:#3342FF">Word Counter Free Tool</h1>

<p><b><i>This Free Tool Will Help You To Count Your Words In A Paragraph And Its Will Also Show The Top Keywords Of Your Text,This Will Also Help In SEO.</i></b> </p>

<textarea placeholder="Enter your text here..."></textarea>

<div class="ads container">

</div>

<div class="output row">

<div>Characters: <span id="characterCount">0</span></div>

<div>Words: <span id="wordCount">0</span></div>

</div>

<div class="output row">

<div>Sentences: <span id="sentenceCount">0</span></div>

<div>Paragraphs: <span id="paragraphCount">0</span></div>

</div>

<div class="output row">

<div>Reading Time: <span id="readingTime">0</span></div>

<div id="readability">Show readability score.</div>

</div>

<div class="keywords">

Top keywords:

<ul id="topKeywords">

</ul>

</div>

<br>

</body>

<script>

** User stories:

** - Shows number of characters, words, sentences, paragraphs - Done

** - Show reading time - Done

** - Show keyword count - Done

** - Show reading level (Optional - how?) - Done

** - Above data should change/appear on every keypress - Done

// Readability (Mashape) API Key for testing: PQ4FOFuaR6mshI6qpnQKQvkDZQXjp1o6Zcqjsnug7GvNggTzUE

"use strict";

var input = document.querySelectorAll('textarea')[0],

characterCount = document.querySelector('#characterCount'),

wordCount = document.querySelector('#wordCount'),

sentenceCount = document.querySelector('#sentenceCount'),

paragraphCount = document.querySelector('#paragraphCount'),

readingTime = document.querySelector('#readingTime'),

readability = document.querySelector('#readability'),

keywordsDiv = document.querySelectorAll('.keywords')[0],

topKeywords = document.querySelector('#topKeywords');

// updating the displayed stats after every keypress

input.addEventListener('keyup', function() {

//keeping the console clean to make only the latest data visible

console.clear();

// character count

// just displaying the input length as everything is a character

characterCount.innerHTML = input.value.length;

// word count using \w metacharacter - replacing this with .* to match anything between word boundaries since it was not taking 'a' as a word.

// this is a masterstroke - to count words with any number of hyphens as one word

// [-?(\w+)?]+ looks for hyphen and a word (we make both optional with ?). + at the end makes it a repeated pattern

// \b is word boundary metacharacter

var words = input.value.match(/\b[-?(\w+)?]+\b/gi);

// console.log(words);

if (words) {

wordCount.innerHTML = words.length;

} else {

wordCount.innerHTML = 0;

}

// sentence count using ./!/? as sentense separators

if (words) {

var sentences = input.value.split(/[.|!|?]+/g);

console.log(sentences);

sentenceCount.innerHTML = sentences.length - 1;

} else {

sentenceCount.innerHTML = 0;

}

// paragraph count from http://stackoverflow.com/a/3336537

if (words) {

// \n$ takes care of empty lines: lines with no characters, and only \n are not paragraphs

// and need to be replaced with empty string

var paragraphs = input.value.replace(/\n$/gm, '').split(/\n/);

paragraphCount.innerHTML = paragraphs.length;

} else {

paragraphCount.innerHTML = 0;

}

// console.log(paragraphs);

// reading time based on 275 words/minute

if (words) {

var seconds = Math.floor(words.length * 60 / 275);

// need to convert seconds to minutes and hours

if (seconds > 59) {

var minutes = Math.floor(seconds / 60);

seconds = seconds - minutes * 60;

readingTime.innerHTML = minutes + "m " + seconds + "s";

} else {

readingTime.innerHTML = seconds + "s";

}

} else {

readingTime.innerHTML = "0s";

}

// finding out top keywords and their count

// step-1: remove all the stop words

// step-2: form an object with keywords and their count

// step-3: sort the object by first converting it to a 2D array

// step-4: display top 4 keywords and their count

if (words) {

// step-1: removing all the stop words

var nonStopWords = [];

var stopWords = ["a", "able", "about", "above", "abst", "accordance", "according", "accordingly", "across", "act", "actually", "added", "adj", "affected", "affecting", "affects", "after", "afterwards", "again", "against", "ah", "all", "almost", "alone", "along", "already", "also", "although", "always", "am", "among", "amongst", "an", "and", "announce", "another", "any", "anybody", "anyhow", "anymore", "anyone", "anything", "anyway", "anyways", "anywhere", "apparently", "approximately", "are", "aren", "arent", "arise", "around", "as", "aside", "ask", "asking", "at", "auth", "available", "away", "awfully", "b", "back", "be", "became", "because", "become", "becomes", "becoming", "been", "before", "beforehand", "begin", "beginning", "beginnings", "begins", "behind", "being", "believe", "below", "beside", "besides", "between", "beyond", "biol", "both", "brief", "briefly", "but", "by", "c", "ca", "came", "can", "cannot", "can't", "cause", "causes", "certain", "certainly", "co", "com", "come", "comes", "contain", "containing", "contains", "could", "couldnt", "d", "date", "did", "didn't", "different", "do", "does", "doesn't", "doing", "done", "don't", "down", "downwards", "due", "during", "e", "each", "ed", "edu", "effect", "eg", "eight", "eighty", "either", "else", "elsewhere", "end", "ending", "enough", "especially", "et", "et-al", "etc", "even", "ever", "every", "everybody", "everyone", "everything", "everywhere", "ex", "except", "f", "far", "few", "ff", "fifth", "first", "five", "fix", "followed", "following", "follows", "for", "former", "formerly", "forth", "found", "four", "from", "further", "furthermore", "g", "gave", "get", "gets", "getting", "give", "given", "gives", "giving", "go", "goes", "gone", "got", "gotten", "h", "had", "happens", "hardly", "has", "hasn't", "have", "haven't", "having", "he", "hed", "hence", "her", "here", "hereafter", "hereby", "herein", "heres", "hereupon", "hers", "herself", "hes", "hi", "hid", "him", "himself", "his", "hither", "home", "how", "howbeit", "however", "hundred", "i", "id", "ie", "if", "i'll", "im", "immediate", "immediately", "importance", "important", "in", "inc", "indeed", "index", "information", "instead", "into", "invention", "inward", "is", "isn't", "it", "itd", "it'll", "its", "itself", "i've", "j", "just", "k", "keep", "keeps", "kept", "kg", "km", "know", "known", "knows", "l", "largely", "last", "lately", "later", "latter", "latterly", "least", "less", "lest", "let", "lets", "like", "liked", "likely", "line", "little", "'ll", "look", "looking", "looks", "ltd", "m", "made", "mainly", "make", "makes", "many", "may", "maybe", "me", "mean", "means", "meantime", "meanwhile", "merely", "mg", "might", "million", "miss", "ml", "more", "moreover", "most", "mostly", "mr", "mrs", "much", "mug", "must", "my", "myself", "n", "na", "name", "namely", "nay", "nd", "near", "nearly", "necessarily", "necessary", "need", "needs", "neither", "never", "nevertheless", "new", "next", "nine", "ninety", "no", "nobody", "non", "none", "nonetheless", "noone", "nor", "normally", "nos", "not", "noted", "nothing", "now", "nowhere", "o", "obtain", "obtained", "obviously", "of", "off", "often", "oh", "ok", "okay", "old", "omitted", "on", "once", "one", "ones", "only", "onto", "or", "ord", "other", "others", "otherwise", "ought", "our", "ours", "ourselves", "out", "outside", "over", "overall", "owing", "own", "p", "page", "pages", "part", "particular", "particularly", "past", "per", "perhaps", "placed", "please", "plus", "poorly", "possible", "possibly", "potentially", "pp", "predominantly", "present", "previously", "primarily", "probably", "promptly", "proud", "provides", "put", "q", "que", "quickly", "quite", "qv", "r", "ran", "rather", "rd", "re", "readily", "really", "recent", "recently", "ref", "refs", "regarding", "regardless", "regards", "related", "relatively", "research", "respectively", "resulted", "resulting", "results", "right", "run", "s", "said", "same", "saw", "say", "saying", "says", "sec", "section", "see", "seeing", "seem", "seemed", "seeming", "seems", "seen", "self", "selves", "sent", "seven", "several", "shall", "she", "shed", "she'll", "shes", "should", "shouldn't", "show", "showed", "shown", "showns", "shows", "significant", "significantly", "similar", "similarly", "since", "six", "slightly", "so", "some", "somebody", "somehow", "someone", "somethan", "something", "sometime", "sometimes", "somewhat", "somewhere", "soon", "sorry", "specifically", "specified", "specify", "specifying", "still", "stop", "strongly", "sub", "substantially", "successfully", "such", "sufficiently", "suggest", "sup", "sure", "t", "take", "taken", "taking", "tell", "tends", "th", "than", "thank", "thanks", "thanx", "that", "that'll", "thats", "that've", "the", "their", "theirs", "them", "themselves", "then", "thence", "there", "thereafter", "thereby", "thered", "therefore", "therein", "there'll", "thereof", "therere", "theres", "thereto", "thereupon", "there've", "these", "they", "theyd", "they'll", "theyre", "they've", "think", "this", "those", "thou", "though", "thoughh", "thousand", "throug", "through", "throughout", "thru", "thus", "til", "tip", "to", "together", "too", "took", "toward", "towards", "tried", "tries", "truly", "try", "trying", "ts", "twice", "two", "u", "un", "under", "unfortunately", "unless", "unlike", "unlikely", "until", "unto", "up", "upon", "ups", "us", "use", "used", "useful", "usefully", "usefulness", "uses", "using", "usually", "v", "value", "various", "'ve", "very", "via", "viz", "vol", "vols", "vs", "w", "want", "wants", "was", "wasn't", "way", "we", "wed", "welcome", "we'll", "went", "were", "weren't", "we've", "what", "whatever", "what'll", "whats", "when", "whence", "whenever", "where", "whereafter", "whereas", "whereby", "wherein", "wheres", "whereupon", "wherever", "whether", "which", "while", "whim", "whither", "who", "whod", "whoever", "whole", "who'll", "whom", "whomever", "whos", "whose", "why", "widely", "willing", "wish", "with", "within", "without", "won't", "words", "world", "would", "wouldn't", "www", "x", "y", "yes", "yet", "you", "youd", "you'll", "your", "youre", "yours", "yourself", "yourselves", "you've", "z", "zero"];

for (var i = 0; i < words.length; i++) {

// filtering out stop words and numbers

if (stopWords.indexOf(words[i].toLowerCase()) === -1 && isNaN(words[i])) {

nonStopWords.push(words[i].toLowerCase());

}

// console.log(nonStopWords);

// step-2: forming an object with keywords and their count

var keywords = {};

for (var i = 0; i < nonStopWords.length; i++) {

// checking if the word(property) already exists

// if it does increment the count otherwise set it to one

if (nonStopWords[i] in keywords) {

keywords[nonStopWords[i]] += 1;

} else {

keywords[nonStopWords[i]] = 1;

}

// step-3: sorting the object by first converting it to a 2D array

var sortedKeywords = [];

for (var keyword in keywords) {

sortedKeywords.push([keyword, keywords[keyword]])

}

sortedKeywords.sort(function(a, b) {

return b[1] - a[1]

});

// console.log(sortedKeywords);

// step-4: displaying top 4 keywords and their count

topKeywords.innerHTML = "";

for (var i = 0; i < sortedKeywords.length && i < 4; i++) {

var li = document.createElement('li');

li.innerHTML = "<b>" + sortedKeywords[i][0] + "</b>: " + sortedKeywords[i][1];

topKeywords.appendChild(li);

}

// displaying top keywords only if there is a word in the text area

if (words) {

keywordsDiv.style.display = "block";

} else {

keywordsDiv.style.display = "none";

}

});

// readability level using readability-metrics API from Mashape

readability.addEventListener('click', function() {

// placeholder until the API returns the score

readability.innerHTML = "Fetching score...";

var requestUrl = "https://ipeirotis-readability-metrics.p.mashape.com/getReadabilityMetrics?text=";

var data = input.value;

var request = new XMLHttpRequest();

request.open('POST', encodeURI(requestUrl + data), true);

request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

request.setRequestHeader("X-Mashape-Authorization", "PQ4FOFuaR6mshI6qpnQKQvkDZQXjp1o6Zcqjsnug7GvNggTzUE");

request.send();

request.onload = function() {

if (this.status >= 200 && this.status < 400) {

// Success!

readability.innerHTML = readingEase(JSON.parse(this.response).FLESCH_READING);

} else {

// We reached our target server, but it returned an error

readability.innerHTML = "Not available.";

}

};

request.onerror = function() {

// There was a connection error of some sort

readability.innerHTML = "Not available.";

};

});

// function to convert FLESCH READING SCORE into meaningful string.

function readingEase(num) {

switch (true) {

case (num <= 30):

return "Readability: College graduate.";

break;

case (num > 30 && num <= 50):

return "Readability: College level.";

break;

case (num > 50 && num <= 60):

return "Readability: 10th - 12th grade.";

break;

case (num > 60 && num <= 70):

return "Readability: 8th - 9th grade.";

break;

case (num > 70 && num <= 80):

return "Readability: 7th grade.";

break;

case (num > 80 && num <= 90):

return "Readability: 6th grade.";

break;

case (num > 90 && num <= 100):

return "Readability: 5th grade.";

break;

default:

return "Not available.";

break;

}

</script>

</html>


Step 4: Now your website is successfully completed,after ward when traffic is comming to your site the purchase a custom domain,then your site will look as professional and add some pages in yours site and If you get adsense approval,then you can start your earning by adding ads.
 
See Live Website -: CLICK HERE

Watch The Video Tutorial

Tech Era

Search This Blog

How To Make Word Counter Tool Website In Blogger

Labels

Comments

Post a Comment