Cara Membuat Tool Word Counter di Blogger

Cara Membuat Tool Word Counter di Blogger – Tool Word Counter merupakan
software yang berfungsi untuk menghitung jumlah kata dalam satu paragraf, text
atau artikel.

Saat menulis artikel di dashboard penulisan blogger.com, saat ini belum ada
keterangan tentang berapa jumlah kata yang sudah kita ketik, berbeda dengan
platform lain seperti WordPress.org yang sudah memiliki fitur tersebut.

Oleh karena itu, diperlukan tool tambahan yang bernama word counter untuk
menghitung jumlah kata.

Cara Buat Tool Word Counter Blogger

Pada dasarnya di luaran sana sudah banyak layanan wordcounter gratis yang dapat kalian gunakan, namun bukankah lebih baik jika kalian memilikinya
sendiri?

Sehingga bisa lebih praktis karena untuk menggunakannya cukup mengaksesnya melalui situs web kalian?

ONLEN.ID sudah membuatkan Tool Word Counter Blogger yang bisa kalian gunakan di situs web berbasis blogger.com, untuk membantu kalian yang ingin memiliki alat penghitung kata sendiri.

Berikut ini tutorial membuat word counter blogger :

• Buka Blogger.com
• Sign In dengan Akun kalian
• Pilih menu “Halaman” dan klik “Buat Halaman Baru”
• Beri judul “Word Counter” atau “Tool Word Counter”
• Lalu ubah mode penulisan menjadi Tampilan HTML, seperti pada gambar berikut ini :

• Setelah itu masukkan Script berikut ini :

a. HTML

<div id="word-counter-tool">
  <h2>Word Counter Tool</h2>
  <textarea id="inputText" rows="10"></textarea>
  <div class="button-group">
    <button class="undo-btn" onclick="undo()">Undo</button>
    <button class="redo-btn" onclick="redo()">Redo</button>
    <button class="clear-btn" onclick="clearText()">Clear</button>
  </div>
  <div class="word-count">
    <strong>Word Count: </strong><span id="wordCount">0</span>
  </div>
</div>

b. CSS

#word-counter-tool {
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    width: 90%;
    max-width: 800px;
    margin: 20px auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  #word-counter-tool textarea {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    font-family: monospace;
    margin-top: 10px;
    resize: vertical;
  }

  #word-counter-tool .button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  #word-counter-tool button {
    flex: 1;
    min-width: 100px;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
  }

  #word-counter-tool button:hover {
    background-color: #45a049;
  }

  #word-counter-tool .undo-btn {
    background-color: #007BFF;
  }

  #word-counter-tool .undo-btn:hover {
    background-color: #0066cc;
  }

  #word-counter-tool .redo-btn {
    background-color: #28a745;
  }

  #word-counter-tool .redo-btn:hover {
    background-color: #218838;
  }

  #word-counter-tool .clear-btn {
    background-color: #f44336;
  }

  #word-counter-tool .clear-btn:hover {
    background-color: #d32f2f;
  }

  #word-counter-tool .word-count {
    margin-top: 10px;
    font-size: 18px;
  }

c. JavaScript

let inputTextArea = document.getElementById('inputText');
  let wordCountDisplay = document.getElementById('wordCount');

  let history = [];
  let currentHistoryIndex = -1;

  function updateWordCount() {
    const text = inputTextArea.value;
    const wordCount = text.trim().split(/s+/).filter(word => word.length > 0).length;
    wordCountDisplay.innerText = wordCount;
  }

  function saveToHistory() {
    // Save current state to history stack
    history.push(inputTextArea.value);
    currentHistoryIndex++;
  }

  function undo() {
    if (currentHistoryIndex > 0) {
      currentHistoryIndex--;
      inputTextArea.value = history[currentHistoryIndex];
      updateWordCount();
    }
  }

  function redo() {
    if (currentHistoryIndex < history.length - 1) {
      currentHistoryIndex++;
      inputTextArea.value = history[currentHistoryIndex];
      updateWordCount();
    }
  }

  function clearText() {
    inputTextArea.value = '';
    updateWordCount();
    history = [];
    currentHistoryIndex = -1;
  }

  inputTextArea.addEventListener('input', function () {
    // Save state to history on every change
    saveToHistory();
    updateWordCount();
  });

  // Initialize with an empty input
  updateWordCount();

• Jika sudah silahkan Save dengan klik Publish/Publikasikan

Apabila kalian kesusahan melakukan copy script di atas, kalian juga dapat
menyalinnya melalui GitHub ONLEN.ID di sini => https://github.com/onlendotid/tool-word-counter-blogger

Pengujian Tool Word Counter Blogger

Jika kalian sudah selesai membuat tool word counter, jangan lupa melakukan pengujian untuk mengetahui apakah tools sudah benar-benar bisa digunakan dan berfungsi dengan baik.

Pertama, buka halaman dari tools tersebut, contohnya milik ONLEN.ID ada di sini => https://www.onlen.id/p/word-counter.html

Jika sudah silahkan kalian cek setiap fitur di dalamnya dengan memasukkan text atau paragraf yang ingin dihitung jumlah katanya.

Di dalam tools ini ada beberapa fitur antara lain :

• Kolom Input : Untuk memasukkan text yang ingin dihitung jumlah katanya
• Tombol Undo : Untuk membatalkan perintah atau kembali ke keadan sebelumnya
• Tombol Redo : Unutk membatalkan perintah Undo sebelumnya
• Tombol Clear : Untuk menghapus seluruh tex di kolom input dengan cepat
• Indikator Word Count : Untuk menampilkan hitungan jumlah kata yang diproses

Pastikan keseluruhan fitur dapat berjalan dengan baik, apabila tidak berfungsi sama sekali maka kalian dapat mengulangi proses pembuatannya, dan pastikan kalian mengikuti tutorialnya dengan benar.

Penutup

Itulah tutorial membuat word counter blogger yang dapat ONLEN.ID bagikan, semoga dapat membantu kalian dalam mengembangkan situs web berbasis blogger.com