Install Word and Character Counter Tool Website Script in Blogger/WordPress Website
How to Install Word and Character Counter Script in Blogger also in 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.
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.
<!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>
0 Comments
Please do not enter any spam link in the comment box.