Character and Word Counter Tool Website Script Blogger

Install Word and Character Counter Tool Website Script in Blogger/WordPress Website

How to Install Word and Character Counter Script in Blogger/WordPress Website? are you looking for such a blogger script. Do you want to know how to install a word counter script on your Blogspot website?, If yes then you are at the best place on our website. In this article, about Character and Word Counter Tool Website Script we are going to check about Word Counter Free Script For Your Blogger, WordPress, Or any Website. Our Word counter script is free to download & use on your website page or post.

Javascript Word and Character Counter Script for Blogger and WordPress
Javascript Word and Character Counter Script for Blogger and WordPress

Our script is Free, Responsive, Mobile-Friendly, Attractive, two in one script for word count and character count, and many more features. One can use any website to provide a work counter tool also Character counter tool both in one script. Working in this script is purely based on Javascript code to count words and characters in paragraphs. So If you know how to play with HTML and Javascript then modify these script accordingly.

What Is Character and Word Counter Tool Website Script?

Character counter or Word Counter is a useful online UI tool that calculates the number of characters and words that have been entered in a text field and displays the number of characters and words are entered in the text field. Typically used in Textarea and/Or Input Field element that limits the number of characters or words to enter.

We can make our own Word Counter Script in Blogger or any website for free and the good thing is we can use it on our website page or post. The working of our script is based on JavaScript.

Benefits and Use to Install Word Counter Script and Character Counter Tool website?

Well, for me I often have a need for a character count script to tell me how many characters something contains. Also need to find word count script. All I need is tools that can calculate characters and words script all at once. Then I found that there were a lot of others who want to use such a script so I decided to write my own quick and easy javascript character counter and word counter.

Therefore, many bloggers and others need such a script that can calculate both at once. As a blogger, I do use this script and you can also use it. So let's Create our own Word and Character Counter website using our script.

Also Read: disable right-click, disable copy, disable view source shortcut in Blogger


Steps To Install Word & Character Counter Tool Website Script on your Website

Just follow some simple steps to mention below. There are many ways to put the below code on your website.

Word and Character Counter Tool website script blogger
Word and Character Counter Tool website script blogger - Output 


1. Make a Complete new Website for this tool

2. Upload Script in Custom hosting

3. Use script in WordPress Page or Post

4. Include in your Post

5. Create a new page and make use of this script

So We will be going to check one by one so let's start.

1. Create a Word & Character Count Tool Website in Blogger

  • Open Blogger And Create A New Blog
  • Go To Theme Option
  • Click On [3Dot] – Revert To First Generation Theme/Classic Template
  • And than Remove All Old Codes
  • Paste Our below Code there and Save.

2. Upload Script in C-Panel - Custom Hosting

  • Open C Panel On Hosting
  • Go To Website File’s
  • Create A New Page [name.html]
  • Open The Page On Html Editor
  • Past Our Code And Save

3. Create Character and Word Counter Tool Website in WordPress

  • Install Plugin “Elementor” or any Page Editor Plugin On your WordPress.
  • After Create A New Page In WordPress.
  • Open Page & Click On [Edit With Elementor ].
  • Use {Custom HTML} Element On Elementer.
  • Paste Code On Html Area.
  • Now Save Page And Publish It.

4. Include Script in your website post

  • Open Blogger And Create a new post or open an existing post
  • Just Copy below script and paste
  • Save and Publish
  • That's it

5. Include Character & Word Counter tool script on the website page

  • Open Blogger And Create A New Page
  • Copy Complete script from below and paste in New page
  • Save and Publish
  • That's it

Now your Character and Word Counter Tool Website is ready to go do some SEO and get your website on top. You can use for your own needs and tell your visitors to bookmark such type of scripts from your website.

Useful Script for you: Automatic HTML Sitemap Page on the Blogger website 

Responsive Script for Word + Character Counter Tool Script for your Website

Following is a complete single block of code written in HTML, CSS, and Pure Javascript so copy the below script and easily use it on your website.

NOTE: Don't Change the ID of any tags also don't change anything that can create an error in your script. If you want to modify the UI of the script then you can change CSS and play with it.

Double click and copy the complete code block and use in your website.

1 - For Making Complete Website Complete HTML code


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Word and Character Counter Website</title>
<style>
.arpContainer textarea {
  border: 1px solid #e9e9e9;
}

/* GENERAL STYLES */
.hide {
  display: none;
}

/*PEN STYLES*/
.arpContainer textarea {
  border-color: #ddd;
}

.arpContainer span, .arpContainer p,
.arpContainer ol {
  color: #ddd;
  font-size: 12px;
}

.arpContainer {
  background: #264c67;
  font-size: 16px;
  max-width: 80%;
  padding: 20px;
  margin: 50px auto;
  box-shadow: 0 5px 3px -2px rgba(0, 0, 0, 0.1);
  box-shadow:#f3f3f3;
  overflow: hidden;
  color:#fff;
}
.arpContainer label {
  font-family: "Roboto";
  border-bottom: 1px solid #ddd;
  display: block;
  padding-bottom: 10px;
}
.arpContainer p > span {
  font-weight: bold;
  color:#fff;
}
.arpContainer p,
.arpContainer ol {
  line-height: 1.2em;
  margin: 5px 0;
}
.arpContainer textarea {
  font-size: initial;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  margin: 10px auto 5px;
}
.adspacebytechnicalarp {
padding:2em;
box-shadow:0 5px 15px rgba(0,0,0,.16);
border-radius:5px;
margin-top:1em;
background:#fff;
text-align:left;
color:red;
}

.calculator_area{
    font-size: 16px;
    max-width: 80%;
    padding: 20px;
    margin: 50px auto;
    box-shadow: 0 5px 3px -2px rgba(0, 0, 0, 0.1);
    box-shadow: #f3f3f3;
    overflow: hidden;
    color: #000;
}
.calculator_stat_item{
	width: calc((100% - 50px) / 3);
    float: left;
    margin: 0 0 20px 10px;
    background: #fff;
    padding: 2px;
    border-radius: 5px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.09), 0 6px 6px rgba(0,0,0,0.11);
    display: block;
    text-align: center;
    position: relative;
}
</style>
</head>

<body>

<center>
<h2>Words & Characters Count Tool for Blogger</h2>
</center>

<div class="container">
		<div class="adspacebytechnicalarp arpContainer">
			  Place you Ad Code 1     
		</div>
	 
		<div class="arpContainer">
			<label for="textCount">jQuery Word & Counter by Technical Arp</label>
			<textarea name="textCount" id="text" cols="80" rows="20" placeholder="Type or Paste your text..."></textarea>			
		</div>
		<div class="calculator_area">
		<div class="calculator_stat ">
			<div class="calculator_stat_item">
				<span>Character Count</span>
				<p id="all_count">0</p>
			</div>
			<div class="calculator_stat_item">
				<span>Word Count</span>
				<p id="words_count">0</p>
			</div>
			<div class="calculator_stat_item">
				<span>Without White Spaces</span>
				<p id="characters_count">500 000</p>
			</div>
		</div>
		</div>

		<div class="adspacebytechnicalarp arpContainer">
			  Place you Ad Code 2     
		</div>


</div>
<br/>

<script src="https://raw.githack.com/IamArpain/free-blogger-scripts/IamArpain-start-1/scripts/word-and-character-counter-script.js"></script>
</body>
</html>

Now,

2 - Code Block to Install word counter script in your blog page or post in Blogger or WordPress


<style>
.arpContainer textarea {
  border: 1px solid #e9e9e9;
}

/* GENERAL STYLES */
.hide {
  display: none;
}

/*PEN STYLES*/
.arpContainer textarea {
  border-color: #ddd;
}

.arpContainer span, .arpContainer p,
.arpContainer ol {
  color: #ddd;
  font-size: 12px;
}

.arpContainer {
  background: #264c67;
  font-size: 16px;
  max-width: 80%;
  padding: 20px;
  margin: 50px auto;
  box-shadow: 0 5px 3px -2px rgba(0, 0, 0, 0.1);
  box-shadow:#f3f3f3;
  overflow: hidden;
  color:#fff;
}
.arpContainer label {
  font-family: "Roboto";
  border-bottom: 1px solid #ddd;
  display: block;
  padding-bottom: 10px;
}
.arpContainer p > span {
  font-weight: bold;
  color:#fff;
}
.arpContainer p,
.arpContainer ol {
  line-height: 1.2em;
  margin: 5px 0;
}
.arpContainer textarea {
  font-size: initial;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  margin: 10px auto 5px;
}
.adspacebytechnicalarp {
padding:2em;
box-shadow:0 5px 15px rgba(0,0,0,.16);
border-radius:5px;
margin-top:1em;
background:#fff;
text-align:left;
color:red;
}

.calculator_area{
    font-size: 16px;
    max-width: 80%;
    padding: 20px;
    margin: 50px auto;
    box-shadow: 0 5px 3px -2px rgba(0, 0, 0, 0.1);
    box-shadow: #f3f3f3;
    overflow: hidden;
    color: #000;
}
.calculator_stat_item{
	width: calc((100% - 50px) / 3);
    float: left;
    margin: 0 0 20px 10px;
    background: #fff;
    padding: 2px;
    border-radius: 5px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.09), 0 6px 6px rgba(0,0,0,0.11);
    display: block;
    text-align: center;
    position: relative;
}
</style>

<center>
<h2>Words & Characters Count Tool for Blogger</h2>
</center>

<div class="container">
		<div class="adspacebytechnicalarp arpContainer">
			  Place you Ad Code 1     
		</div>
	 
		<div class="arpContainer">
			<label for="textCount">jQuery Word & Counter by Technical Arp</label>
			<textarea name="textCount" id="text" cols="80" rows="20" placeholder="Type or Paste your text..."></textarea>			
		</div>
		<div class="calculator_area">
		<div class="calculator_stat ">
			<div class="calculator_stat_item">
				<span>Character Count</span>
				<p id="all_count">0</p>
			</div>
			<div class="calculator_stat_item">
				<span>Word Count</span>
				<p id="words_count">0</p>
			</div>
			<div class="calculator_stat_item">
				<span>Without White Spaces</span>
				<p id="characters_count">500 000</p>
			</div>
		</div>
		</div>

		<div class="adspacebytechnicalarp arpContainer">
			  Place you Ad Code 2     
		</div>


</div>
<br/>

<script src="https://raw.githack.com/IamArpain/free-blogger-scripts/IamArpain-start-1/scripts/word-and-character-counter-script.js"></script>

So, Free Download and Use Javascript Word Counter and Character Counter Script Simple but useful tool/Script copy script and use on your website.

Very Useful Script: Install Anti Adblock Script in Blogger and Adblock Detection Script


Now time for the conclusion

In the conclusion of Install Word and Character Counter Script in Blogger/WordPress Website.

Now you know how to make a Word Counter Tool Website in Blogger so use all this code in your Blog Post or Page or WordPress website. So Use it properly and If you face any problem then let us know from the below comment section.

Thanks for Visting: Follow by Email and Bookmark Our Technical Arp Website for more such useful scripts.

Also, Know more about the following scripts:

Blogger All Viral Wishing Website Script

YouTube Thumbnail Downloader Script

Previous
Next Post »