Cara Memasang Tools Word Counter di Blog

Cara Memasang Tools Word Counter di Blog - Sebagai seorang blogger atau apapun yang berhubungan dengan aktifitas tulis menulis, kita diwajibkan untuk membuat tulisan yang menarik dan berkualitas. Dan salah satu yang menjadi patokan tersebut adalah panjang kata / karakter.

Karena tingkat persaingan di mesin pencari semakin sengit, kebanyakan penulis juga berlomba-lomba dalam mengoptimasi tulisan mereka agar lebih berkualitas. Semakin berkualitas sebuah tulisan, maka kesempatan untuk mendapatkan peringkat tinggi juga lebih besar.

Menghitung karakter tulisan sebenarnya bisa dilakukan dengan mudah menggunakan situs-situs yang ada saat ini. Tapi jika kamu ingin memasang sendiri, maka postingan kali ini mungkin bisa jadi referensi.

Rekomendasi: Cara Memasang Tools CSS Minifier di Blog

Namun perlukah memasang word counter sendiri di blog? Jawabannya tergantung. Anda bisa memasang menggunakan fitur halaman yang ada di Blogger maupun WordPress. Selain mudah, tampilan yang disediakan juga bervariatif.

Khusus untuk postingan kali ini, tampilan word counter akan seperti berikut:

Ada tiga jenis penghitungan yang dilakukan, yaitu kalimat, karakter dengan spasi, serta karakter tanpa spasi. Cara membuatnya juga mudah, yang kita butuhkan hanyalah HTML, CSS, dan JavaScript.

Cara Memasang Tools Word Counter di Blog

• Pilih menu HALAMAN
• Pilih HALAMAN BARU
• Pilih TAMPILAN HTML
• Tempel ke dalamnya:

<!-- HTML -->
<div id="wordCounter">
  <div class="wordArea">
    <textarea id="text" placeholder="Paste your text here..." spellcheck="false"></textarea>
  </div>
  <div class="wordButton">
    <table>
      <tbody>
        <tr>
          <td>Sentence:</td>
          <td id="wordCount">0</td>
        </tr>
        <tr>
          <td>Character with space:</td>
          <td id="totalChars">0</td>
        </tr>
        <tr>
          <td>Character without space:</td>
          <td id="charCountNoSpace">0</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<!-- End HTML -->

<!-- CSS -->
<style>
#wordCounter .wordArea textarea{display:block;width:100%;height:240px;color:#333;font-family:"Fira Mono",sans-serif;font-size:13px;padding:20px;border-radius:3px 3px 0 0;resize:none}
#wordCounter .wordArea textarea:focus{color:#333}
#wordCounter .wordArea textarea::placeholder{color:#bbb}
#wordCounter .wordButton{display:flex;flex-wrap:wrap;flex-flow:column;background:#009ee0;color:#fff;font-family:"Noto Sans",sans-serif;font-size:13px;padding:40px;border-radius:0 0 3px 3px}
#wordCounter .wordButton table{border-color:#009ee0}
#wordCounter .wordButton table tr td{background:#009ee0;border:0}
.wordButton #wordCount,.wordButton #totalChars,.wordButton #charCountNoSpace{color:#fff}
</style>
<!-- End CSS -->

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/gh/Ferisp/Widget@main/word-counter.js"></script>
<script>
counter=function(){
  var value=$("#text").val();
  if (value.length==0){
    $("#wordCount").html(0);
    $("#totalChars").html(0);
    $("#charCountNoSpace").html(0);
    return
    }
  var regex=/\s+/gi;
  var wordCount=value.trim().replace(regex," ").split(" ").length;
  var totalChars=value.length;
  var charCountNoSpace=value.replace(regex,"").length;
    $("#wordCount").html(wordCount);
    $("#totalChars").html(totalChars);
    $("#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>
<!-- End JavaScript -->

• Pilih PUBLIKASIKAN
• Selesai.

Catatan

Silahkan mengatur tampilan sesuai keinginan Anda. Oh iya, skrip di atas menggunakan JavaScript eksternal yang dihosting di GitHub agar struktur kode menjadi lebih rapi.

Demo

Rekomendasi: Cara Memasang Tools Parse Script di Blog

Penutup

Sekarang ini, word counter jelas menjadi salah satu pokok penting dalam pembuatan artikel SEO. Disamping memudahkan Anda, pengunjung juga bisa menggunakan untuk keperluan penulisan mereka.

Cukup sekian artikel tentang Cara Memasang Tools Word Counter di Blog ini, Terima kasih.