How To Add Online Word Counter Tool In Blogger Blog

Add Online Word Counter Tool – Words, Characters, Sentences & Paragraphs Counter In Blog 

• 1.) Go to www.blogger.com.

• 2.) Login using your Gmail Account.

• 3.) After login, the Blogger Dashboard will open

• 4.) Click and Select The Blog where you want to add the code

• 5.) From the left menu, click on Layout and go to layout 

• 6.) Click +Add a Gadget where you want to show the widget (Sidebar / Footer / Header)

• 7.) From the gadget list, click HTML/JavaScript

Enter a Title (optional)

Copy the HTML/JavaScript code provided below and paste it into the Content Box.

• 8.) Click Save.

• 9.) Click Save Arrangement.

• 10.)  Click View Blog and Check Your Blog.

• 11.) Your HTML / JavaScript widget is Now Live.

Online Word Counter Tool – Words, Characters, Sentences & Paragraphs Counter HTML/Javascript Code :

<!-- ✅ Blogger-Friendly Word Counter -->

<div style="max-width:100%; margin:20px auto; background:#fff; padding:20px; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,0.15); font-family:'Segoe UI',sans-serif; text-align:center;">

  <h2 style="color:#ff5722; margin-bottom:15px; font-size:1.5rem;">📝 Word Counter</h2>

  <textarea id="blogTextInput" placeholder="Type or paste your text here..." 

    style="width:100%; padding:12px; border-radius:8px; border:1px solid #ccc; min-height:150px; font-size:16px; resize:vertical; box-sizing:border-box;"></textarea>

  <button onclick="blogCountText()" 

    style="width:100%; padding:12px; margin-top:10px; border:none; border-radius:8px; background:#ff5722; color:#fff; font-weight:600; cursor:pointer; font-size:16px;">Count Text</button>

  

  <div id="blogResult" style="margin-top:20px; font-size:16px; font-weight:600; color:#333; line-height:1.6; text-align:left; word-wrap: break-word;">

    Words: 0<br>

    Characters: 0<br>

    Sentences: 0<br>

    Paragraphs: 0

  </div>

</div>

<script>

function blogCountText(){

  const text = document.getElementById('blogTextInput').value.trim();

  // Words

  const words = text === "" ? 0 : text.split(/\s+/).length;

  // Characters

  const chars = text.length;

  // Sentences

  const sentences = text === "" ? 0 : (text.match(/[.!?]+/g) || []).length;

  // Paragraphs

  const paragraphs = text === "" ? 0 : text.split(/\n+/).filter(p=>p.trim()!=="").length;

  document.getElementById('blogResult').innerHTML = `

    Words: ${words}<br>

    Characters: ${chars}<br>

    Sentences: ${sentences}<br>

    Paragraphs: ${paragraphs}

  `;

  alert(`🎉 Done! Words: ${words}, Characters: ${chars}, Sentences: ${sentences}, Paragraphs: ${paragraphs}`);

}

</script>