Cara Memasang Tools Word Counter Pada Blog

 

Pada kesempatan kali ini saya akan membagikan Cara Membuat Tools Word Counter di Blogger. 

Sebagai seorang Blogger atau apapun yang berhubungan dengan aktifitas menulis atau mengetik, kita di wajibkan untuk membuat tulisan yang menarik dan berkualitas pastinya. 

Dan salah satu yang menjadi patokan utama tersebut adalah panjang kata atau panjang karakter kata. 

Karena tingkat persaingan di mesin pencarian Google atau Browser lainnya seperti yandex semakin sengit. 

Kebanyakan penulis berlomba-lomba dengan mengoptimasi tulisan mereka agar tulisan tersebut menjadi berkualitas. 

Karena semakin berkualitas sebuah tulisan, maka kesempatan untuk mendapatkan page one atau peringkat tertinggi sangatlah besar. 

Menghitung karakter tulisan sendiri sebenarnya bisa di lakukan dengan sangat mudah menggunakan situs-situs yang ada saat ini, contohnya 1text.com atau yang lainnya. 

Tetapi jika kamu ingin memasang sendiri pada halaman situs kalian, maka postingan saya kali ini mungkin bisa menjadi refrensi. 

Namun, perlukah memasang Word Counter sendiri pada blog? Jawabannya tergantung dari kalian, anda bisa memasang menggunakan fitur halaman yang ada pada Blogger maupun WordPress kalian. 

Selain mudah, tampilan yang di sediakan juga bervariatif. 

Untuk melihat demo gambar, kalian bisa lihat di bawah ini :

Ada tiga jenis penghitungan yang dilakukan. Yaitu kalimat, karakter spasi, serta karakter tanpa spasi. 

Cara membuatnya sangatlah mudah, yang kita butuhkan hanyalah HTML, CSS, dan JavaScript. 

Oke tanpa waktu lama kita langsung ke tutorial Cara Memasang Tools Word Counter di Blogger.

 

Cara Memasang Tools Word Counter Pada Blog

1. Login ke hosting Blogger kalian

2. Setalah situs Blogger sudah di buka, silahkan pilih menu HALAMAN

3. Setelah itu buat HAlAMAN BARU dengan klik tombol berwarna Putih dan Oranye

4. Setelah itu kalian bisa salin kode di bawah ini

<!-- 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-color:#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-color:#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 -->

5. Setalah semua kode di atas sudah disalin, kalian bisa mengubah tampilan halaman kalian menjadi mode HTML, caranya tinggal pencet gambar tulisan sebelah kiri menjadi Tampilan HTML. 

6. Tempel kode yang sudah di salin, tepat di Tampilan HTML, setelah itu pencet PUBLIKASIKAN. 

7. Selesai

Catatan

Silahkan mengatur tampilan sesuai keinginan anda, script di atas ini menggunakan JavaScript eksternal yang di hosting di GitHub agar struktur kodenya menjadi rapih. 

Penutup

Sekarang Word Counter sudah jelas menjadu salah satu pokok penting dalam pembuatan artikel SEO. 

Disamping memudahkan anda untuk menghitung kata, pengunjung blog kalian juga bisa menggunakan untuk keperluan penulisan mereka. 

Cukup sekian artikel tentang Cara Memasang Tools Wors Counter Pada Blog ini, terimakasih sudah berkunjung ke situs pedein.com ini

Subscribe Our Newsletter