How to Create Word Counter Tool website with Blogger & WordPress

How to Create Word Counter Tool website with Blogger & WordPress

I hope you are all well. Welcome to the post “Create Word Counter Website with Blogger & WordPress for Free “. Are you looking to create a character-counting tool website with Blogger & WordPress? In today’s post, I will discuss with you the rules of creating a character-counting website with Blogger & WordPress.

Read More: How to Add Font Awesome Icons to WordPress Sidebar

Blogger & WordPress is the best way to create a website for free. Today I will discuss step by step how to create a website with Blogger & WordPress, a character-counting tool. And I will give you Word Counter Script for free. By which you can create a beautifully designed Word Counter website completely free. 

Create Word Counter Tool Website

With the help of the Word Counter tool, we can easily count words in any paragraph or post online. However, if you write a post in Notepad or any text editor, you don’t know how many words you wrote in the post. Nowadays all bloggers use word counter tools to count characters while writing posts. So you get Online Free Word Counter Tool. There are many people who use these tools constantly. If you create a Word Counter website with Blogger for free then you can earn a good amount of money per month even from this simple website. 

follow the steps below to create a free word counter or character-counting tool website with Blogger & WordPress. 

How to add Word Counter Tool in Blogger

  • Go to Blogger/Blogspot Dashboard
  • Now Click on Theme Section
  • Scroll Down & Click & Apply Simple Blog Template
  • Now Click On Customize Arrow & Click On Switch to First Generation Theme
  • Now Click On Switch Without a Backup & Now Turn off Navbar
  • Click On Edit HTML & Copy Code Bellow
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:[email protected];400;500;700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://codebarta.com/wcode/css/word_counter.css">
    <title>Live Word Counter</title>
</head>

<body>
    <header>
        <h1> codebarta.com Live Word Counter</h1>
    </header>
    <section class="main-section-wrapper">
        <div class="boxes-wrapper">
            <div class="box">
                <div class="box-header" id='word'>
                    0
                </div>
                <div class="box-footer">
                    words
                </div>
            </div>
            <div class="box">
                <div class="box-header" id='letter'>
                    0
                </div>
                <div class="box-footer">
                    letters
                </div>
            </div>
            <div class="box">
                <div class="box-header" id="microphone">
                    <i class="fas fa-microphone"></i>
                </div>
                <div class="box-footer">
                    voice
                </div>
            </div>
        </div>
        <div class="form-wrapper">
            <textarea id="paragraph" placeholder="Enter your paragraph here..."></textarea>
            <br>
        </div>
    </section>
    <script src="https://codebarta.com/wcode/js/word_counter.js"></script>
</body>

</html>
  • Remove all Code & Paste New Code Here
  • Now Click on Save Theme, That’s All
  • Now Your Advance Word Counter Tool is Ready to Use

How to add Word Counter Tool in WordPress

Step 1: Log in to your WordPress Dashboard.

Step 2: Locate “Pages or Post” from the left menu and click “+ NEW PAGE or New Post” to Create a static page in WordPress.

Step 3: On the new page from Compose to Custom HTML.

Step 4: Now copy the code from below and paste it there.

<style>
// Character Count Tool by https://codebarta.com/
input[type="button"]{border:none;padding:5px 12px;text-transform:uppercase;text-align:center;color:#fff;display:inline-block;white-space:nowrap;background-color:#f57c00;cursor:pointer;font-weight:500;font-size:100%;position:relative;top:-1px;margin:0 10px;line-height:23px;transition:all 0.3s ease-in-out}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<center>Enter your character here and press Calculate button to calculate Characters</center>
<br /><br />
<center>
<form method="POST">
<table border="0" cellpadding="0" cellspacing="0"><tbody>
<tr><td width="auto"><textarea cols="65" name="charcount" rows="12" style="background: #fafafa; width:100%" wrap="virtual"></textarea></td></tr>
<tr><td width="auto"><div align="center">
<br />
<input onclick="countit(this)" type="button" value="Calculate Characters" /> <input name="displaycount" size="20" style="background: #fafafa;height:27px" type="text" /></div>
</td></tr>
</tbody></table>
<br /></form>
<br />
<script language="JavaScript">
function countit(what){
formcontent=what.form.charcount.value
what.form.displaycount.value=formcontent.length
}
</script><br />
</center>

Step 5: Finally publish your WordPress Page or Post.

You will find this  Word Counter Script for Blogger |  How was the article of Create Word Counter Tool in Blogger . You must tell by commenting in the comment box below. Or if you want to give any kind of suggestion, then you can share your opinion with us in the comment box below.

Leave a Comment