Cara Membuat Tools Penghitung Kata (word counter) di Blogspot

Daftar Isi

Assalamualaikum wa rahmatullah. Segala puji bagi Allah, selawat dan salam semoga selalu tercurahkan kepada Rasulullah SAW.

Memulai tulisan dengan pujian dan selawat merupakan ikhtiar agar setiap ilmu yang kita bagikan di blog ini membawa keberkahan dan manfaat nyata bagi para pembaca.

Pada kesempatan kali ini, saya ingin membagikan panduan teknis mengenai cara membuat alat penghitung kata atau word counter sendiri di platform Blogger. Alat ini sangat berguna bagi Anda yang terbiasa mengarang draf artikel langsung di editor draf Blogspot tanpa perlu berpindah ke aplikasi pengolah kata lain.

Penerapan Tools Word Counter di Blogger - qowim.net

Mengapa Jumlah Kata Memengaruhi Kualitas Artikel?

Dalam praktik optimasi mesin pencari (SEO), panjang tulisan idealnya menyesuaikan dengan kedalaman pembahasan topik. Standar artikel yang komprehensif umumnya membutuhkan minimal 300 kata, dengan batas ideal berkisar antara 700 hingga 1.000 kata agar mampu menjawab kebutuhan informasi pembaca secara tuntas.

Ketika Anda menulis langsung di dalam form postingan Blogger, panel bawaan tidak menyediakan informasi statistik jumlah kata secara cermat (real-time). Berbeda dengan aplikasi Microsoft Word yang memiliki indikator statistik di bagian bilah bawah, pengguna Blogger sering kali kesulitan memantau panjang draf tulisan mereka.

Dengan memasang alat word counter mandiri di halaman statis blog Anda, Anda cukup menyalin seluruh teks draf lalu menempelkannya ke alat tersebut untuk mengetahui jumlah kata dan karakter dalam sekali klik.

Demo Alat: Anda dapat melihat contoh hasil penerapan alat penghitung kata ini secara langsung melalui halaman Word Counter qowim.net.

Langkah-Langkah Membuat Tools Word Counter di Blogspot

Silakan ikuti panduan praktis berikut untuk memasang widget penghitung kata pada halaman statis Blogspot Anda:

1. Masuk ke dashboard utama Blogger Anda.

2. Pilih menu Halaman (Pages) pada bilah navigasi kiri, lalu klik Buat Halaman Baru.

3. Alihkan mode tampilan editor dari Tampilan Menulis (Compose) menjadi Tampilan HTML.

4. Salin seluruh kode skrip berikut dan tempelkan ke dalam editor halaman:

<style>
.wc-container {
  background-color: var(--lightest-grey, #f8f9fa);
  border: 1px solid var(--light-grey, #e1e7ec);
  border-radius: 6px;
  padding: 20px;
  margin: 20px 0;
}
.wc-textarea {
  width: 100%;
  height: 250px;
  background-color: var(--primary-background, #ffffff);
  color: var(--dark-grey, #484f5b);
  border: 1px solid var(--light-grey, #e1e7ec);
  border-radius: 6px;
  padding: 12px;
  font-family: monospace;
  box-sizing: border-box;
  resize: vertical;
}
.wc-btn-group {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  justify-content: flex-end;
}
.wc-btn {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
.wc-btn-submit {
  background-color: var(--color-scheme-bg, #3949AB);
  color: #ffffff;
}
.wc-btn-reset {
  background-color: var(--medium-grey, #B8C4CD);
  color: #ffffff;
}
.wc-result-box {
  margin-top: 20px;
  padding: 15px;
  background-color: var(--primary-background, #ffffff);
  border: 1px solid var(--light-grey, #e1e7ec);
  border-radius: 6px;
  text-align: center;
}
.wc-result-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--darkest-grey, #212933);
  margin-bottom: 8px;
}
.wc-result-item {
  font-size: 15px;
  color: var(--dark-grey, #484f5b);
  margin: 4px 0;
}
</style>

<div class="wc-container">
  <form id="wordCountForm">
    <textarea id="textAreaCount" class="wc-textarea" placeholder="Tempelkan draf artikel Anda di sini (CTRL + V)..." spellcheck="false"></textarea>
    <div class="wc-btn-group">
      <button id="submitWordCount" type="submit" class="wc-btn wc-btn-submit">HITUNG KATA</button>
      <button id="resetWordCount" type="reset" class="wc-btn wc-btn-reset">SETEL ULANG</button>
    </div>
    <div class="wc-result-box">
      <div class="wc-result-title">HASIL ANALISIS:</div>
      <div id="hasilKata" class="wc-result-item">JUMLAH KATA: 0</div>
      <div id="hasilKarakter" class="wc-result-item">JUMLAH KARAKTER: 0</div>
    </div>
  </form>
</div>

<script type="text/javascript">
(function() {
  var textArea = document.getElementById("textAreaCount");
  var hasilKata = document.getElementById("hasilKata");
  var hasilKarakter = document.getElementById("hasilKarakter");
  var submitBtn = document.getElementById("submitWordCount");
  var resetBtn = document.getElementById("resetWordCount");

  function processCount(e) {
    e.preventDefault();
    var text = textArea.value.trim();
    var words = text ? text.split(/\s+/).length : 0;
    var chars = text.length;

    hasilKata.innerHTML = "JUMLAH KATA : " + words;
    hasilKarakter.innerHTML = "JUMLAH KARAKTER : " + chars;
  }

  function resetCount(e) {
    textArea.value = "";
    hasilKata.innerHTML = "JUMLAH KATA : 0";
    hasilKarakter.innerHTML = "JUMLAH KARAKTER : 0";
  }

  submitBtn.addEventListener("click", processCount);
  resetBtn.addEventListener("click", resetCount);
})();
</script>

Catatan Penting: Jika skrip HTML atau JavaScript di atas tidak berjalan optimal saat ditempelkan, gunakan alat Parse Code HTML terlebih dahulu untuk mengonversi karakter khusus sebelum mempublikasikannya.

5. Beri judul halaman tersebut, misalnya Word Counter.

6. Klik tombol Publikasikan.

Kesimpulan

Kehadiran alat word counter di blog sendiri sangat membantu mempercepat alur kerja penulisan artikel. Selain dapat digunakan untuk kebutuhan pribadi, halaman statis ini juga bisa menjadi fasilitas interaktif yang bermanfaat bagi para pengunjung blog Anda.

Apabila Anda memiliki pertanyaan teknis seputar pemasangan kode di atas, silakan tuliskan pada kolom komentar di bawah ini. Semoga bermanfaat.