Cara Membuat Tools Penghitung Kata dan Huruf (Word Counter)

Kali ini, izinkan saya berbagi tutorial bagaimana caranya membuat dan memasang tools penghitung kata dan huruf (word counter) di blogspot.com yang terdiri dari HTML, CSS dan JavaScript (Js).

Dalam kaidah penulisan artikel berkualitas, saya memang tidak menyebutkan jumlah kata dan huruf yang diharuskan untuk memenuhi apa itu konten berkualitas yang sebenarnya. Akan tetapi, tools yang akan saya bagikan ini, barangkali berguna bagi kawan-kawan yang ingin mengecek untuk mengetahui total jumlah kata dan huruf pada artikel yang telah kawan-kawan buat.

Kalau sobat tidak ingin memasangnya, silakan gunakan punya saya: Tools Word Counter :)

Cara Membuat Tools Penghitung Kata dan Huruf (Word Counter)

1. Buka blogger > klik menu halaman

2. Pilih halaman baru > pasang judul terlebih dahulu (usahakan jangan typo) > publikasikan

3. Masuk lagi ke halaman tersebut > masuk ke mode tampilan HTML (bukan Compose).

4. Salin kode di bawah ini > tempel di kolom kosong yang disediakan > perbarui.

Kode Tools Word Counter

<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:90%;height:300px;margin:0 auto;display:block;background-color:#fff;padding:20px;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>

Catatan: Ganti teks yang sudah saya tandai pada kode di atas.

Begitulah tutorial bagaimana caranya membuat dan memasang tools penghitung kata dan huruf (word counter) di blogspot.com yang terdiri dari HTML, CSS dan JavaScript (Js).