Word Counter Script for Blogger

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

Free Online Word Counter Tool

Word Counter Script for Blogger | Create Word Counter Tool in Blogger

With the help of Word Counter Tool, we can easily count the words ie words of any paragraph or any post online. By the way, if you write a post in Notepad or any Text Editor, then you do not know how many words of the article you have written.

By the way, all the bloggers nowadays have to write great articles. And in such a situation, they also need Word Count. And you also get a lot of online free Word Counter tool on internet. With the help of which you can easily count the words.

So friends, now the point is that if we want to make this Word Counter Tool in Blogger, then how can it be made? So for this you are going to need Word Counter Script for Blogger. With the help of this script, you can easily create a word counter tool in Blogger by installing the script in Blogger.

Create Word Counter Tool in Blogger

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>Advance Word Counter Tool Online</title>

<head>

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

<h1>Word Counter</h1>

Place Your Ad Code

</div>

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

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

</div>

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

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

</div>

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

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

</div>

Top keywords:

</ul>

</div>

<br>

</body>

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

Remove all Code & Paste New Code Here

Now Click on Save Theme, That’s All

Now Your Advance Word Counter Tool is Ready to Use

Conclusion - You get this Word Counter Script for Blogger | How was the article about Create Word Counter Tool in 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

Word Counter Script for Blogger | Create Word Counter Tool in Blogger