Cara membuat penghitung kata di blog sendiri - Susah Tidur

Cara membuat penghitung kata di blog sendiri

Cara membuat penghitung kata di blog sendiri
Cara membuat penghitung kata di blog sendiri - SusahTidur - Hello sobat Susah Tidur. Pada kesempatan kali ini saya akan membagikan sebuah tutorial Bagaimana cara memasang penghitung kata ( word counter ) di blog. 

Buat kalian yang sudah cukup mengenal dunia blog mungkin sudah tidak asing lagi dengan apa yang dinamakan Penghitung kata atau bahasa kerennya Word Counter. Sebuah alat yang kegunaannya mengetahui jumlah kata yang sedang kita tulis. Dengan adanya penghitung kata tentu akan mepermudah kita dalam mengetahui batas minimal sampai maksimal sebuah kata yang kita tulis.

Bicara soal penghitung kata pastinya akan mengaju ke jumlah ya. Seberapa penting sih jumlah kata yang harus kita tulis dalam sebuah artikel. Konon katanya sih harus cukup banyak, banyak juga ga harus bertele-tele namun lengkap. Alasan ini diperkuat oleh para pakar SEO yang merekomendasikan untuk membuat artikel yang panjang dan lengkap dari pada artikel yang singkat.

Sebuah artikel yang panjang dan lengkap memiliki peluang yang besar untuk masuk ke halaman pertama pencarian Google. Diperkuat lagi semenjak era algoritma Google BERT yang memprioritaskan penilaianya yang dominan pada sebuah artikel yang mengulas suatu topik menarik yang panjang dan lengkap.

Tools penghitung kata ini tidak melibatkan pihak ketiga. Namun kita hanya memanfaatkan script yang telah di desain sehingga kita dapat memasang tools ini ke blog kita sendiri tanpa takut speed blog kita menurun.

Dengan demikian sobat tidak perlu lagi ketik "Tools Word Counter Online" di mesin telusur haha. Bagusnya lagi buat para pengunjung juga senang blog sobat itu lengkap. Baca juga : Cara membuat CSS Minifer di blog 

Pada tutorial ini saya akan membagikan ada 3 style tools word counter, jadi silahkan dipilih satu yang menurut sobat keren.

Model 1
Model 1
script nya
<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>
Model 2
Model 2
script nya
<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:100%;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>  
      
<input class="belajar" name="char" size="4" /> <b>Karakter</b>  
      <input class="belajar" name="word" size="4" /> <b>Kata</b>  
 </form>
</center>
Model 3
Model 3
Script nya
<h2>
<center>
Penghitung Kata SusahTidur</center>
</h2>
<center>
Masukan teks/artikel yang akan dihitung...</center>


<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>



<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>
</div>
Cara Memasang Pengitung Kata di blog
1. Sudah dipilih model yang diatas? silahkan COPY kodenya

2. Kemudian seperti biasa masuk ke dashboard blogger sobat.

3. Masuk ke menu Halaman > buat Halaman Baru

4. Beri judul yang sesuai contoh "Penghitung kata SusahTidur"

5. Di menu edit masuk ke mode "HTML" jangan di mode "Compose" karena yang kita pakai adalah kode.

6. Kemudian PASTE kan kode yang tadi kamu pilih ke kolom konten yang tersedia.

7.  Publikasikan 

Selamat sekarang sobat sudah mempunyai Tools Penghitung Kata, buat kalian yang masih bingung silahkan berkomentar di kolom komentar ya. Sekian dan terimakasih telah berkunjung ke SusahTidur. 


"Cara membuat penghitung kata di blog sendiri"
Tampilkan Komentar
Sembunyikan Komentar

Belum ada Komentar untuk "Cara membuat penghitung kata di blog sendiri"

Posting Komentar

Jangan malu bertanya!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel