Creating a word counter website is very easy. You can create a word counter website with just a few steps...
                Follow me
1) First of all, if you have a blogg then go to your Blogg and if you have not created Blogg yet then go to Google, search Blogger and create Blogge

2) After doing this you have to go to new post on your Blogg

(3 In New post you will find an option of HTML VIEW click on this option 

(4 Choose your title and Just paste the code in the body I have provided below 

<!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</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">
  <iframe data-aa="1667375" src="//acceptable.a-ads.com/1667375" scrolling="no" style="border:0px; padding:0; width:100%; height:100%; overflow:hidden" allowtransparency="true"></iframe>
  
</div>
 
<div class="arpContainer">
<label for="textCount">jQuery Word & Counter by Muhammad hamza</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">
  <iframe data-aa="1667375" src="//acceptable.a-ads.com/1667375" scrolling="no" style="border:0px; padding:0; width:100%; height:100%; overflow:hidden" allowtransparency="true"></iframe>
    
</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>

(5 After this Add some words in Lable and post it on your BLOGG and enjoy you have created a word Counter Website
It will look like...