Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Word Counter (Penghitung Kata) Berbagai Desain di Blog

Cara Membuat Tools Word Counter (Penghitung Kata) Dengan Berbagai Desain Menarik



Dalam dunia tulis menulis seperti Blogging tentu kita tidak asing lagi dengan apa yang dinamakan Word Counter (Penghitung Kata).

Sebuah tools yang mempunyai basic untuk mengetahui jumlah kata yang telah kita tulis. Dengan mengetahui jumlah kata pada tulisan tentu akan memudahkan kita mengukur batas kata minimal dan maksimal pada saat menulis.

Sehingga kita dengan mudah akan mengetahui telah sejauh mana kita dalam menulis sebuah artikel.

Tools penghitung kata seperti itu sangat berguna untuk orang yang berprofesi sebagai Content Writer (Penulis) yang biasanya dalam membuat artikel, mereka menetapkan jumlah kata sebagai nilai jual tulisannya.

Baca Juga: Cara Menghapus Kode ?m=0 atau ?m=1 Pada URL Blogger

Semakin sedikit kata yang dibutuhkan maka tulisan akan dihargai lebih murah. Sebaliknya semakin banyaknya kata yang dibutuhkan maka tulisan juga akan dihargai lebih mahal.

Jumlah kata yang dimasukkan ke dalam kategori tulisan pun bermacam-macam. Namun umumnya dimulai dari tulisan singkat yang berjumlah sekitar 250 kata sampai dengan tulisan panjang berjumlah 1000 kata bahkan lebih.

Terlepas kamu seorang Content Writer atau bukan. Namun yang jelas para pakar SEO lebih merekomendasikan artikel panjang lengkap daripada artikel yang singkat.

Artikel yang memiliki pembahasan lengkap dan panjang memiliki peluang besar untuk masuk halaman pertama pencarian mesin telusur Google.

Apalagi semenjak era algoritma Google BERT yang prioritas penilaiannya dominan  padaartikel yang mengulas suatu topik menarik yang panjang dan lengkap.

Baca Juga: Cara Membuat Tombol Berlangganan (Subscribe) Keren di Blogger

Maka jangan berharap banyak untuk tampil dihalaman depan pencarian Google terutama jika artikel kita hanya terdiri dari beberapa kata saja sehingga tidak memenuhi kualitas sebuah artikel.

Untuk itu tools Word Counter ini akan sangat berguna sekali bagi kita para Blogger pada umumnya untuk menghitung jumlah kata yang telah dibuat pada sebuah artikel.

Tools Word Counter yang akan kita buat ini tidak melibatkan situs pihak ketiga, melainkan kita hanya memanfaatkan script yang telah didesain untuk menampilkan penghitungan kata sehingga dapat kita pasang pada situs atau blog kita sendiri.

Dengan begitu mulai sekarang kita tidak perlu repot untuk mencari situs pihak ketiga yang menyediakan tools Word Counter tersebut.

Langsung saja di bawah ini terdapat 4 style ragam model Word Counter. Silakan dipilih dan disesuaikan dengan selera kalian.

Baca Juga: Cara Membuat Halaman Kontak di Blogger


Variasi Tools Word Counter



1. Model GreenFast




Scriptnya di bawah ini:

<div id="ppsWidgetCode">
</div>
<script type="text/javascript">
var widgetHtml = '<iframe src="https://www.prepostseo.com/widget/wordcount" style="border:0;width:100%;min-height:700px;"></iframe>';
var widgetTag = document.getElementById("ppsLink");
if (widgetTag === null){ 
 widgetHtml += '<center>
Redesign By Mas Fery</center>
';
 
} else {
 var linkUrl = widgetTag.getAttribute("href"); 
 if(linkUrl !== 'https://www.prepostseo.com/word-count-character-count-tool'){
  widgetHtml += '<center>
Redesign By Mas Fery</center>
';
 }
}

var isNew = document.getElementById("ppsWidgetCode");

document.getElementById("ppsWidgetCode").innerHTML = widgetHtml;
</script>

2. Model BlueBirds




Scriptnya di bawah ini:

<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
.daerah-tombol-2{
 color:#fff;
 background:#2980b9;
 text-align:center;
 padding:20px 20px 40px 20px;
 margin:30px;
 border-radius:4px;
 font-weight:bold;
}
.daerah-tombol{
 background:#2980b9;
 text-align:center;
 padding:20px 20px 40px 20px;
 margin:0;
 border-radius:4px;
}
#belakang{
 background:#ecf0f1;
 position:relative;
 display:block;
 clear:both;
 border-radius:5px;
 padding:20px;
 border:1px solid rgba(0,0,0,0.05);
}
textarea{
 width:94%;
 height:300px;
 margin:0 auto;
 display:block;
 background-color:#fff;
 padding:20px;
 font:normal 13px 'Courier New',Monospace;
 border:0;
 box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);
 border-radius:5px 5px 0 0;
 resize:none
}
button{
 color:#fff!important;
 height:50px;
 font-size:14px;
 font-weight:bold;
 background:#07ACEC;
 padding:15px 25px;
 border-radius:4px;
 border:none;
 outline:none;
 box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
 cursor:pointer;
 transition:all .4s ease-in-out;
 text-transform:uppercase;
 margin-top:15px;
}
#outer-wrapper{
 margin:0 auto;
 text-align:left;
 float:none;
 background-position:center!important;
}
#post-wrapper{
 width:100%;
 max-width:100%;
 margin:0 auto;
 text-align:left;
 float:none;
 background-position:center!important;
}
.post-body,.post{
 background-position:center!important;
}
h2.post-title a,h1.post-title a,h2.post-title,h1.post-title{
 display:none;
 margin-top:0;
 margin:0;
}
#blog1,#artikel,.blog-posts{
 background-position:center!important;
}
.breadcrumbs{
 display:none;
 margin-top:0;
 margin:0;
}
#comments,#breadcrumb,#sidebar-wrapper,#menu-wrap{
 display:none;
 margin-top:0;
 margin:0;
}
.post-inner{
 padding:0 0 0 0;
 margin:20px auto;
}
.post-body ul#wrapin{
 display:block;
 position:relative;
 margin:30px auto 0 auto;
}
.post-body ul#wrapin li{
 display:block;
 margin:0 auto;
 text-align:left;
}
.post-body ul#wrapin br{
 display:none;
}
</style>
<br />
<div id="belakang"><form id="wordCount" method="get">
<div id="headWordCount"><textarea cols="30" height="100" id="textAreaCount" placeholder="Copy and Paste some words here (CTRL + V)" spellcheck="false"></textarea></div>
<br />
<div class="button-group">
<div class="daerah-tombol">
<button id="submitWordCount" type="submit"> HITUNG KATA </button> <button id="resetWordCount" type="reset"> SETEL ULANG </button></div>

<center>
<div class="daerah-tombol-2">
<div id="boxHasil"> <span style="font-size: large;"><b> HASIL :</b></span>
<br /><br />
<div id="hasilKata"></div>
<div id="hasilKarakter"></div>
</div>
</div> 
</center>

</div></form>

<script type="text/javascript">
 var namaNode = document.getElementById("textAreaCount"); var formNode = document.getElementById("wordCount"); var hasilNode = document.getElementById("hasilKata"); var hasil2Node = document.getElementById("hasilKarakter"); var submitNode = document.getElementById("submitWordCount"); var resetNode = document.getElementById("resetWordCount"); document.getElementById("submitWordCount").style.cursor ="pointer"; document.getElementById("resetWordCount").style.cursor="pointer"; function textCount(e){ hasilNode.innerHTML = 0; hasilNode.innerHTML = "JUMLAH KATA : " + namaNode.value.split(' ').length; hasil2Node.innerHTML = "JUMLAH KARAKTER : " + namaNode.value.length; e.preventDefault(); } function resetCount(e){ namaNode.value = ""; hasilNode.innerHTML =""; hasil2Node.innerHTML =""; e.preventDefault(); } submitNode.addEventListener("click", textCount); resetNode.addEventListener("click",resetCount);
</script>
</div>
</div>

3. Model Transparan





Scriptnya di bawah ini:

<script type="text/javascript">  
      function words(content){  
           var i=0;  
           var numberofwords=1;  
           while(i<=content.length){  
                if (content.substring(i,i+1) == " "){  
                     numberofwords++;  
                     i++;  
                }  
                if (content.substring(i,i+1) == "\n"){  
                     numberofwords++;  
                     i++;  
                }  
                i++;  
           }  
           return numberofwords;  
      }  
 </script>
   
 <style type="text/css">  
      input.belajar{color:#ff8e1f;font:14px verdana,sans-serif;font-weight:bold;background-color:#feffbf;border:1px dashed #c9c8c8;height:20px}  
      textarea.belajarisme{width:650px;height:350px;color:#24006b;font:12px arial;background:#fff;border:1px dotted #289728}  
 </style>  

<center>
 <form>
<textarea class="belajarisme" cols="50" onchange="this.form.char.value=this.value.length;this.form.word.value=words(this.value)" rows="5"></textarea>  
      <br />
<input class="belajar" name="char" size="4" /> <b>Karakter</b>  
      <input class="belajar" name="word" size="4" /> <b>Kata</b>  
 </form>
</center>

4. Model SimpleFast




Scriptnya di bawah ini:

<center>
Masukan teks/artikel yang akan dihitung...</center>
<br />
<div id="wct_embed_counts">
<textarea id="wct_embed_input_text" rows="12" style="-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%;"></textarea>

<br />
<div id="wct_embed_result" style="margin: 5px; text-align: center;">
<b>0</b> kata <b>0</b> karakter <b>0</b> karakter tanpa spasi <b>0</b> kata unik <b>0</b> kalimat <b>0</b> paragraf</div>
<script type="text/javascript">
//<![CDATA[
function wct_getWordStats(e){var t=[],n=e.trim();t.num_character=e.trim().length;var r=n.split(/\s+/).join("");t.num_character_wo_spaces=r.length,t.num_paragraph=0,n.length>0&&(t.num_paragraph=n.split(/\n+/).length);var a=n.replace(/(\w)[-_'](\w)/gi,"$10$2");a=a.replace(/(\d)[,.](\d)/gi,"$10$2"),t.num_sentence=0,a.length>0&&(t.num_sentence=a.replace(/"/gi,"").split(/[.?!:\n]+/).length);var _=a.split(/[\s\n]+/);if(t.num_word=0,a.length>0&&(t.num_word=_.length),t.avg_sentence_length=0!=t.num_sentence?Math.round(t.num_word/t.num_sentence*10)/10:0,0!=t.num_word){var c=r.length/t.num_word;t.avg_word_length=Math.round(10*c)/10}else t.avg_word_length=0;var d=[];t.num_unique_word=0,t.percentage_num_unique_word=0;for(var s=0;s<_.length;s++)d[_[s]]=1;var u=Object.keys(d).length;return t.num_unique_word=Object.keys(d).length,percentage_unique_words=Math.round(100*u/t.num_word),t.percentage_num_unique_word=percentage_unique_words,t}function wct_display_counts(){var e=document.getElementById("wct_embed_input_text").value;wordStats=wct_getWordStats(e),document.getElementById("wct_embed_result").innerHTML="<b>"+wordStats.num_word+"</b> kata <b>"+wordStats.num_character+"</b> karakter <b>"+wordStats.num_character_wo_spaces+"</b> karakter tanpa spasi <b>"+wordStats.num_unique_word+"</b> kata unik <b>"+wordStats.num_sentence+"</b> kalimat <b>"+wordStats.num_paragraph+"</b> paragraf"}var wct_embed_result=document.getElementById("wct_embed_result");wct_embed_result.setAttribute("style","margin:5px;text-align:center;");var wct_embed_input_text=document.getElementById("wct_embed_input_text");wct_embed_input_text.setAttribute("style","width: 100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;");var wct_embed_result=document.getElementById("wct_embed_result");wct_embed_result.innerHTML="<b>0</b> kata <b>0</b> karakter <b>0</b> karakter tanpa spasi <b>0</b> kata unik <b>0</b> kalimat <b>0</b> paragraf";var wct_textarea=document.getElementById("wct_embed_input_text");wct_textarea.value="",wct_textarea.addEventListener&&(wct_textarea.addEventListener("input",wct_display_counts,!1),wct_textarea.addEventListener("textInput",wct_display_counts,!1),wct_textarea.addEventListener("textinput",wct_display_counts,!1)),wct_textarea.attachEvent&&wct_textarea.attachEvent("onpropertychange",wct_display_counts);
//]]>
</script><br /></div>


#Cara Pemasangan Word Counter di Blog



*Masuk ke akun Blogger kalian masing-masing.

*Kemudian menuju ke bagian Halaman.

*Lalu buat Halaman Baru.

*Berilah judul halaman tersebut misalnya “Penghitung Kata, Word Counter” atau yang lainnya.

*Silakan pilih salah satu model desain Word Counter diatas. Lalu salin kode scriptnya dan tempel pada halaman yang telah dibuat tadi.

*Terakhir klik Publikasikan.

#Cara Penggunaan Word Counter di Blog



*Silakan salin semua tulisan yang telah kalian buat dan tempel ke dalam form Word Counter tersebut. Lalu nanti secara otomatis penghitung kata akan bekerja dengan menampilkan rincian berupa jumlah kata, paragraf atau spasi.

Semoga Tutorial Cara Membuat Tools Word Counter (Penghitung Kata) Bermanfaat. Share juga informasi ini pada yang lain. Terimakasih.