Cara Membuat Tools Penghitung Kata (word counter) di Blogspot

Assalamualaikum wa rahmatullah... Segala puji bagi Allah, selawat dan salam semoga selalu tercurahkan kepada Rasulullah ﷺ 

Wuih kaya mau tausiyah aja nih... 

Gak sih, ini bukan mau tausiyah. Ini dalam rangka mengamalkan ilmu saja. Biar tulisan ini berkah dan memberikan manfaat lebih baik diawali dengan memuji allah dan berselawat kepada Rasulullah. 

Insyallah mulai sekarang, postingan-postingan berikutnya akan diawali alhamdulillah dan berselawat kepada Rasulullah ﷺ 

Oke kali ini, saya akan membuat tutorial tentang bagaimana caranya membuat tools penghitung kata atau word counter di Blog. 

Kenapa penghitung kata ini penting untuk dibahas dan dilakukan setiap selesai menulis? 

Jawabannya sederhana, bahwa minimal postingan kita di blog itu 300 kata, standarnya adalah 700 kata dan lebih baik lagi adalah 1000 kata. Nah, bagi yang suka menulis langusng di formulir postingan blogger seperti saya, tentu tidak bisa memeriksa dan langsung mengetahui jumlah kata yang sudah ditulis. 

Apakah sudah memenuhi minimal satu postingan, atau belum? 

Jika kalian suka menulis terlebih dulu di aplikasi misalnya microsoft word, sangat mudah sekali mendeteksinya di bar bagian bawah ada informasi tentang jumlah kata, karakter hingga paragraf. 

Jadi, bagi yang menulis seperti saya langsung di blog, maka sangat penting sekali untuk mengikuti panduan atau tutorial ini. Minimal dipasang di blog sendiri, jadi kalau mau menghitung kata tinggal copas lalu diklik saja. Selesai... 

Okeh, langsung saja begini caranya membuat tool word counter atau penghitung kata di blog. 

1. Masuk dashboard blog kalian
2. Klik Halaman 
3. Buat halaman baru 
4. Pilih tampilan HTML, bukan mode menulis.
5. Silakan copas kode html 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>

   
   Keterangan
   Jika kode di atas rusak, silakan parse terlebih dahulu di sini. Parse Code.
6. Tempel saja
7. Lalu klik Publikasikan
8. Selesai

Mudah, bukan? Kalian mau cek hasilnya silakan kunjungi word counter milik saya di sini WORD COUNTER.

Cukup sekian tutorial blogger kali ini, jika ada pertanyaan silakan cantumkan di kolom komentar. Semoga bermanfaat. 

Wassalamualaikum... bbabaiiii...