How to Install a word counter Responsive Page on Blogger NQnia
Step 2. Select pages then click new page
Step 3. Write the first page title that you will create. The reason maybe you already know, but if you don't know, i will make an article Specifically for the title of this page and related to it.
Step 4. After writing the page title, click"HTML" (open compose)
Step 5. Make sure you stick everything and don't leave anything left so that later there won't be an error or that the word and character counter page will work properly.
<div id="border">
<textarea id="text" placeholder="Write or copy and paste your document here..." spellcheck="false"></textarea>
</div>
<div class="button-group">
<button id="count">Count</button>
<br />
<div id="result">
<br />
Words: <span id="wordCount">0</span>
<br />
Total Characters(including trails): <span id="totalChars">0</span>
<br />
Characters (excluding trails): <span id="charCount">0</span>
<br />
Characters (excluding all spaces): <span id="charCountNoSpace">0</span></div>
</div>
<style scoped="" type="text/css">
.breadcrumbs{display:none}
#border{background:#ecf0f1;position:relative;display:block;clear:both;border-radius:5px;padding:20px;border:1px solid rgba(0,0,0,0.05)}
#result{margin:10px auto 30px;color:rgba(255,2255,255,.6)}
#count{background:rgba(255,255,255,0.2);text-align:center;color:#fefefe;display:inline-block;padding:6px 12px;font-size:14px;font-weight:400;line-height:1.471;border-radius:4px;margin:0 5px;border:0;transition:all .1s}
textarea{width:100%;height:240px;margin:0 auto;display:block;background-color:#fff;padding:20px;font:normal 13px 'Courier New',Monospace;border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);border-radius:5px 5px 0 0;resize:none}
#count:hover,#cssminifier button:active{background:#fff;color:#2980b9}
.button-group{background:#2980b9;text-align:center;padding:20px;margin:0;border-radius:0 0 5px 5px;float:none}
.button-group span{vertical-align:2px;line-height:1;color:#fff}
.button-group br{display:none}
</style>
<script>
counter = function() {
var value = $('#text').val();
if (value.length == 0) {
$('#wordCount').html(0);
$('#totalChars').html(0);
$('#charCount').html(0);
$('#charCountNoSpace').html(0);
return;
}
var regex = /\s+/gi;
var wordCount = value.trim().replace(regex, ' ').split(' ').length;
var totalChars = value.length;
var charCount = value.trim().length;
var charCountNoSpace = value.replace(regex, '').length;
$('#wordCount').html(wordCount);
$('#totalChars').html(totalChars);
$('#charCount').html(charCount);
$('#charCountNoSpace').html(charCountNoSpace);
};
$(document).ready(function() {
$('#count').click(counter);
$('#text').change(counter);
$('#text').keydown(counter);
$('#text').keypress(counter);
$('#text').keyup(counter);
$('#text').blur(counter);
$('#text').focus(counter);
});
</script>
Step 6. Finally, click Publish.
For the results, you can see the Word Counter page on this blog, or you can click the link below.