Notifikasi
Tidak ada notifikasi baru.
Beranda Blogger Website

Cara Membuat Halaman Penghitung Jumlah Kata di Blog

Yosa AP
Yosa AP
---
Cara Membuat Halaman Post Penghitung Jumlah Kata di Blogger - Hai Sobat. Pada kesempatan kali ini saya akan membuat tutorial tentang bagaimana cara membuat halaman post untuk menghitung jumlah kata di Blogspot. Sebuah artikel dikatan memiliki SEO yang baik adalah apabila memenuhi beberapa syarat. Salah satu syarat konten artikel SEO adalah memiliki setidaknya 300 kata pada setiap artikel. Akan lebih baik lagi jika kata dalam sebuah artikel dapat mencapai 1000 kata.

Cara Membuat Halaman Post Penghitung Jumlah Kata di Blog
Cara Membuat Halaman Post Penghitung Jumlah Kata di Blog

Nah, agar kita tidak kebingungan saat akan menghitung jumlah kata, maka kita memerlukan tool ini. Tool ini biasanya disebut dengan nama Word Counter atau Alat Penghitung Kata. Sobat TutorialKomputer, tidak perlu cemas karena tool ini gratis. Tidak perlu berlama-lama lagi mari kita membuatnya. Berikut tutorialnya.

Cara Membuat Halaman Penghitung Kata di Blogspot

Tool yang akan kita buat ini, selain dapat menghitung jumlah kata pada artikel juga bisa menghitung jumlah huruf dan jumlah kalimat. Sudah tertarik untuk membuatnya? Langsung saja mari kita buat.

1. Silahkan kalian buka blogger.com

2. Login dengan menggunakan akun gmail kalian masing-masing.

3. Apabila sudah login, langkah selanjutnya kalian bisa membuat Halaman Baru maupun Postingan Baru. Contohnya seperti di bawah ini.


4. Jika sudah, silahkan kalian ubah format kata yang akan kalian pakai ke mode html.

Cara Membuat Halaman Post Penghitung Kata di Blogspot

5. Langkah selanjutnya adalah salin kode dibawah ini.

<div style="text-align: center;"> <span style="font-size: large;">Alat Penghitung Kata : <b><a href="http://www.tutorialkomputer.net/" target="_blank">Jagoan Web</a></b></span> <span style="font-size: large;"> </span></div> <iframe src="https://www.prepostseo.com/widget/wordcount" style="border: 0; height: 100%; min-height: 1000px; width: 100%;"></iframe>


6. Pastekan kode diatas ke tempat yang sudah disediakan seperti dibawah ini.


7. Yang terakhir klik Publikasikan. Selamat halaman Word Count sudah berhasil dibuat.

Hasil demonya nanti akan seperti ini :

Tampilan Word Count
Tampilan Word Count


Selain kode script yang ada diatas, dibawah ini juga akan saya tampilkan kode script lainnya. Untuk cara pembuatannya langkah-langkahnya sama dengan yang diatas. Hanya kode script nya yang diganti.

Kode Script Word Counter Ala Ataeh

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

Kode Script Word Counter Ala BlueBirds

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

Kode Script Word Counter Ala Transparan

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

Cara Menggunakan Halaman Penghitung Kata

Cara penggunaannya sangat mudah, silakan kalian salin semua tulisan yang telah kalian buat dan tempelkan ke Penghitung Jumlah Kata tersebut. Lalu nanti secara otomatis penghitung kata akan bekerja dengan menampilkan rincian berupa jumlah kata, paragraf atau spasi.

Semoga tutorial tentang Cara Membuat Halaman Post Penghitung Kata di Blogspot yang saya berikan ini dapat bermanfaat. Sampai jumpa. .jangan lupa share juga yaa 
Blogger Website
Yosa AP
Yosa AP
Guru, Desainer, Programmer
Gabung dalam percakapan
Posting Komentar