Notice: Follow to get latest blog post updates Click me

How to add character and word counter tool in blogger!

Md. Anwarul Islam

We use tools to count words and letters. The tool automatically calculates this number and displays the result when given as text input. This is a user-friendly tool that counts words and letters quickly and effectively. Let's start with how to use this tool on your Blogger website. Firstly, we need to log into Blogger.com, then navigate to the page option and select "New Page". Name the page's word and character counters. If there is an HTML view available, then it is acceptable. If you don't have an HTML view, you should create one. In other words, if you have an auto-compose view, you should also create an HTML view. Otherwise, this tool will not work. We use tools to count words and letters. The tool automatically calculates this number and displays the result when given as text input. This is a user-friendly tool that counts words and letters quickly and effectively. Let's start with how to use this tool on your Blogger website. Firstly, we need to log into Blogger.com, then navigate to the page option and select "New Page". Name the page's word and character counters. If there is an HTML view available, then it is acceptable. If you don't have an HTML view, you should create one. In other words, if you have an auto-compose view, you should also create an HTML view. Otherwise, this tool will not work.

Demo

Then copy the code below and paste it completely on your desired blogger page.

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

}
.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">Word & Character Counter</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://rawcdn.githack.com/iamanwarul/Blogger/f3a05aefe2452fa6689081291ea31179f4fe553d/Word%20&%20Character%20Counter.JS"></script>
</body>
</html>


Then click on the public button to make this page visible to all of you. Now your visitors can use Toll without any problem.

Post a Comment

If you benefited from reading the post, don't forget to leave a comment!
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oh !
There is some problem with your internet connection. Please connect to the internet and start browsing again.