Cara Membuat Word Counter di Blog - Gubuk Pintar
Cara Membuat Word Counter di Blog
Cara Membuat Word Counter di Blog

Cara Membuat Word Counter di Blog

Temukan cara membuat alat Word Counter di blog dalam artikel ini!

Cara Membuat Word Counter di Blog
Cara membuat Word Counter di blog ini akan sangat bermanfaat bagi kamu yang ingin mengetahui berapa jumlah kata dari suatu artikel dan kata kunci apa yang paling sering muncul.

Memiliki halaman Word Counter sendiri tentu membuat mu lebih mandiri dalam melakukan inspeksi artikel sehingga tidak harus mencari situs penyedia alat serupa.

Untuk itu, simak cara membuatnya dalam artikel ini ya!




Apa Itu Word Counter?

Word Counter adalah alat yang berfungsi untuk menghitung jumlah kata atau kalimat dalam sebuah teks atau dokumen. Khusus untuk Blogger, objek yang kita hitung disini adalah kata dalam sebuah artikel. Mengingat panjang artikel merupakan salah satu faktor yang banyak diperhatikan.

Dalam beberapa pekerjaan, terdapat kebutuhan terhadap jumlah kata atau karakter dari sebuah teks. Menghitungnya secara manual tentu akan sangat memakan waktu sehingga Word Counter ini hadir sebagai solusinya.

Cara Membuat Word Counter di Blog

Cara ini mungkin bekerja pula di platform lainnya tetapi untuk demonstrasi kali ini hanya akan menggunakan Blogger saja. Berikut ini cara membuatnya,
  1. Buka dasbor Blogger dan pilih tab Halaman

  2. Buat halaman baru

  3. Pilih metode penulisan HTML dan letakkan kode berikut ini,

    <style type="text/css">
    /* border box */

    html {
    box-sizing: border-box;
    -webkit-user-select: none;
    /* Chrome all / Safari all */
    -moz-user-select: none;
    /* Firefox all */
    -ms-user-select: none;
    /* IE 10+ */
    user-select: none;
    /* Likely future */
    }

    *,
    *:before,
    *:after {
    box-sizing: inherit;
    }

    b {
    font-weight: bold;
    }


    /* main app styles */

    body {
    width: 700x;
    margin: 0 auto;
    background-color: #FAFAFA;
    font-family: 'Source Sans Pro', sans-serif;
    color: #111;
    }

    .container {
    margin: 2% auto;
    padding: 15px;
    background-color: #FFFFFF;
    -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
    }

    h1 {
    font-size: 3rem;
    font-weight: 900;
    text-align: center;
    margin: 1% 0 3%;
    }

    textarea {
    width: 100%;
    height: 250px;
    padding: 10px;
    border: 1px solid #d9d9d9;
    outline: none;
    font-size: 1rem;
    resize: none;
    line-height: 1.5rem;
    }

    textarea:hover {
    border-color: #C0C0C0;
    }

    textarea:focus {
    border-color: #4D90FE;
    }

    .output.row {
    width: 100%;
    border: 1px solid #DDD;
    font-size: 1.4rem;
    margin: 1% 0;
    background-color: #F9F9F9;
    }

    .output.row div {
    display: inline-block;
    width: 42%;
    padding: 10px 15px;
    margin: 1%;
    }

    .output.row span {
    font-weight: bold;
    font-size: 1.5rem;
    }

    #readability {
    width: 52%;
    font-weight: bold;
    }

    #readability:hover {
    background-color: #4D90FE;
    color: #FFF;
    border-radius: 2px;
    cursor: pointer;
    }

    #readability:active {
    background-color: #307AF3;
    }

    .keywords {
    display: none;
    margin: 4% 0 0;
    font-size: 2rem;
    font-weight: 900;
    }

    .keywords ul {
    font-weight: 400;
    border: 1px solid #DDD;
    font-size: 1.4rem;
    background-color: #F9F9F9;
    margin: 2% 0;
    }

    .keywords li {
    display: inline-block;
    width: 44%;
    padding: 10px;
    margin: 1%;
    }


    /*
    ** Making it responsive
    */

    @media (max-width: 750px) {
    body {
    width: 600px;
    }
    .output.row {
    font-size: 1.2rem;
    }
    .output.row span {
    font-size: 1.3rem;
    }
    .keywords ul {
    font-size: 1.2rem;
    }
    }

    @media (max-width: 600px) {
    /* rewriting old styles */
    body {
    width: 100%;
    }
    .output.row {
    border: none;
    background-color: #FFF;
    }
    .output.row div {
    display: block;
    width: 100%;
    padding: 10px 15px;
    margin: 2% auto;
    border: 1px solid #DDD;
    font-size: 1.8rem;
    background-color: #F9F9F9;
    }
    .output.row span {
    font-size: 2rem;
    }
    #readability {
    width: 100%;
    font-size: 1.6rem;
    font-weight: 400;
    }
    .keywords {
    margin: 10% auto;
    }
    .keywords ul {
    font-weight: 400;
    border: none;
    font-size: 1.8rem;
    background-color: #F9F9F9;
    margin: 5% 0;
    }
    .keywords li {
    display: block;
    width: 100%;
    padding: 10px;
    margin: 2% auto;
    border: 1px solid #DDD;
    }
    }
    </style>
    <br />
    <div class="container">
    <h1>
    Word Counter</h1>
    <textarea placeholder="Enter your text here..."></textarea>
    <br />
    <div class="output row">
    <div>
    Characters: <span id="characterCount">0</span></div>
    <div>
    Words: <span id="wordCount">0</span></div>
    </div>
    <div class="output row">
    <div>
    Sentences: <span id="sentenceCount">0</span></div>
    <div>
    Paragraphs: <span id="paragraphCount">0</span></div>
    </div>
    <div class="output row">
    <div>
    Reading Time: <span id="readingTime">0</span></div>
    <div id="readability">
    Show readability score.</div>
    </div>
    <div class="keywords">
    Top keywords:
    <br />
    <ul id="topKeywords">
    </ul>
    </div>
    </div>
    <script type="text/javascript">
    /*
    **
    ** User stories:
    ** - Shows number of characters, words, sentences, paragraphs - Done
    ** - Show reading time - Done
    ** - Show keyword count - Done
    ** - Show reading level (Optional - how?) - Done
    ** - Above data should change/appear on every keypress - Done
    **
    */

    // Readability (Mashape) API Key for testing: PQ4FOFuaR6mshI6qpnQKQvkDZQXjp1o6Zcqjsnug7GvNggTzUE

    "use strict";
    var input = document.querySelectorAll('textarea')[0],
    characterCount = document.querySelector('#characterCount'),
    wordCount = document.querySelector('#wordCount'),
    sentenceCount = document.querySelector('#sentenceCount'),
    paragraphCount = document.querySelector('#paragraphCount'),
    readingTime = document.querySelector('#readingTime'),
    readability = document.querySelector('#readability'),
    keywordsDiv = document.querySelectorAll('.keywords')[0],
    topKeywords = document.querySelector('#topKeywords');

    // updating the displayed stats after every keypress
    input.addEventListener('keyup', function() {

    //keeping the console clean to make only the latest data visible
    console.clear();

    // character count
    // just displaying the input length as everything is a character
    characterCount.innerHTML = input.value.length;

    // word count using \w metacharacter - replacing this with .* to match anything between word boundaries since it was not taking 'a' as a word.
    // this is a masterstroke - to count words with any number of hyphens as one word
    // [-?(\w+)?]+ looks for hyphen and a word (we make both optional with ?). + at the end makes it a repeated pattern
    // \b is word boundary metacharacter
    var words = input.value.match(/\b[-?(\w+)?]+\b/gi);
    // console.log(words);
    if (words) {
    wordCount.innerHTML = words.length;
    } else {
    wordCount.innerHTML = 0;
    }

    // sentence count using ./!/? as sentense separators
    if (words) {
    var sentences = input.value.split(/[.|!|?]+/g);
    console.log(sentences);
    sentenceCount.innerHTML = sentences.length - 1;
    } else {
    sentenceCount.innerHTML = 0;
    }

    // paragraph count from http://stackoverflow.com/a/3336537
    if (words) {
    // \n$ takes care of empty lines: lines with no characters, and only \n are not paragraphs
    // and need to be replaced with empty string
    var paragraphs = input.value.replace(/\n$/gm, '').split(/\n/);
    paragraphCount.innerHTML = paragraphs.length;
    } else {
    paragraphCount.innerHTML = 0;
    }
    // console.log(paragraphs);

    // reading time based on 275 words/minute
    if (words) {
    var seconds = Math.floor(words.length * 60 / 275);
    // need to convert seconds to minutes and hours
    if (seconds > 59) {
    var minutes = Math.floor(seconds / 60);
    seconds = seconds - minutes * 60;
    readingTime.innerHTML = minutes + "m " + seconds + "s";
    } else {
    readingTime.innerHTML = seconds + "s";
    }
    } else {
    readingTime.innerHTML = "0s";
    }

    // finding out top keywords and their count
    // step-1: remove all the stop words
    // step-2: form an object with keywords and their count
    // step-3: sort the object by first converting it to a 2D array
    // step-4: display top 4 keywords and their count

    if (words) {

    // step-1: removing all the stop words
    var nonStopWords = [];
    var stopWords = ["a", "able", "about", "above", "abst", "accordance", "according", "accordingly", "across", "act", "actually", "added", "adj", "affected", "affecting", "affects", "after", "afterwards", "again", "against", "ah", "all", "almost", "alone", "along", "already", "also", "although", "always", "am", "among", "amongst", "an", "and", "announce", "another", "any", "anybody", "anyhow", "anymore", "anyone", "anything", "anyway", "anyways", "anywhere", "apparently", "approximately", "are", "aren", "arent", "arise", "around", "as", "aside", "ask", "asking", "at", "auth", "available", "away", "awfully", "b", "back", "be", "became", "because", "become", "becomes", "becoming", "been", "before", "beforehand", "begin", "beginning", "beginnings", "begins", "behind", "being", "believe", "below", "beside", "besides", "between", "beyond", "biol", "both", "brief", "briefly", "but", "by", "c", "ca", "came", "can", "cannot", "can't", "cause", "causes", "certain", "certainly", "co", "com", "come", "comes", "contain", "containing", "contains", "could", "couldnt", "d", "date", "did", "didn't", "different", "do", "does", "doesn't", "doing", "done", "don't", "down", "downwards", "due", "during", "e", "each", "ed", "edu", "effect", "eg", "eight", "eighty", "either", "else", "elsewhere", "end", "ending", "enough", "especially", "et", "et-al", "etc", "even", "ever", "every", "everybody", "everyone", "everything", "everywhere", "ex", "except", "f", "far", "few", "ff", "fifth", "first", "five", "fix", "followed", "following", "follows", "for", "former", "formerly", "forth", "found", "four", "from", "further", "furthermore", "g", "gave", "get", "gets", "getting", "give", "given", "gives", "giving", "go", "goes", "gone", "got", "gotten", "h", "had", "happens", "hardly", "has", "hasn't", "have", "haven't", "having", "he", "hed", "hence", "her", "here", "hereafter", "hereby", "herein", "heres", "hereupon", "hers", "herself", "hes", "hi", "hid", "him", "himself", "his", "hither", "home", "how", "howbeit", "however", "hundred", "i", "id", "ie", "if", "i'll", "im", "immediate", "immediately", "importance", "important", "in", "inc", "indeed", "index", "information", "instead", "into", "invention", "inward", "is", "isn't", "it", "itd", "it'll", "its", "itself", "i've", "j", "just", "k", "keep", "keeps", "kept", "kg", "km", "know", "known", "knows", "l", "largely", "last", "lately", "later", "latter", "latterly", "least", "less", "lest", "let", "lets", "like", "liked", "likely", "line", "little", "'ll", "look", "looking", "looks", "ltd", "m", "made", "mainly", "make", "makes", "many", "may", "maybe", "me", "mean", "means", "meantime", "meanwhile", "merely", "mg", "might", "million", "miss", "ml", "more", "moreover", "most", "mostly", "mr", "mrs", "much", "mug", "must", "my", "myself", "n", "na", "name", "namely", "nay", "nd", "near", "nearly", "necessarily", "necessary", "need", "needs", "neither", "never", "nevertheless", "new", "next", "nine", "ninety", "no", "nobody", "non", "none", "nonetheless", "noone", "nor", "normally", "nos", "not", "noted", "nothing", "now", "nowhere", "o", "obtain", "obtained", "obviously", "of", "off", "often", "oh", "ok", "okay", "old", "omitted", "on", "once", "one", "ones", "only", "onto", "or", "ord", "other", "others", "otherwise", "ought", "our", "ours", "ourselves", "out", "outside", "over", "overall", "owing", "own", "p", "page", "pages", "part", "particular", "particularly", "past", "per", "perhaps", "placed", "please", "plus", "poorly", "possible", "possibly", "potentially", "pp", "predominantly", "present", "previously", "primarily", "probably", "promptly", "proud", "provides", "put", "q", "que", "quickly", "quite", "qv", "r", "ran", "rather", "rd", "re", "readily", "really", "recent", "recently", "ref", "refs", "regarding", "regardless", "regards", "related", "relatively", "research", "respectively", "resulted", "resulting", "results", "right", "run", "s", "said", "same", "saw", "say", "saying", "says", "sec", "section", "see", "seeing", "seem", "seemed", "seeming", "seems", "seen", "self", "selves", "sent", "seven", "several", "shall", "she", "shed", "she'll", "shes", "should", "shouldn't", "show", "showed", "shown", "showns", "shows", "significant", "significantly", "similar", "similarly", "since", "six", "slightly", "so", "some", "somebody", "somehow", "someone", "somethan", "something", "sometime", "sometimes", "somewhat", "somewhere", "soon", "sorry", "specifically", "specified", "specify", "specifying", "still", "stop", "strongly", "sub", "substantially", "successfully", "such", "sufficiently", "suggest", "sup", "sure", "t", "take", "taken", "taking", "tell", "tends", "th", "than", "thank", "thanks", "thanx", "that", "that'll", "thats", "that've", "the", "their", "theirs", "them", "themselves", "then", "thence", "there", "thereafter", "thereby", "thered", "therefore", "therein", "there'll", "thereof", "therere", "theres", "thereto", "thereupon", "there've", "these", "they", "theyd", "they'll", "theyre", "they've", "think", "this", "those", "thou", "though", "thoughh", "thousand", "throug", "through", "throughout", "thru", "thus", "til", "tip", "to", "together", "too", "took", "toward", "towards", "tried", "tries", "truly", "try", "trying", "ts", "twice", "two", "u", "un", "under", "unfortunately", "unless", "unlike", "unlikely", "until", "unto", "up", "upon", "ups", "us", "use", "used", "useful", "usefully", "usefulness", "uses", "using", "usually", "v", "value", "various", "'ve", "very", "via", "viz", "vol", "vols", "vs", "w", "want", "wants", "was", "wasn't", "way", "we", "wed", "welcome", "we'll", "went", "were", "weren't", "we've", "what", "whatever", "what'll", "whats", "when", "whence", "whenever", "where", "whereafter", "whereas", "whereby", "wherein", "wheres", "whereupon", "wherever", "whether", "which", "while", "whim", "whither", "who", "whod", "whoever", "whole", "who'll", "whom", "whomever", "whos", "whose", "why", "widely", "willing", "wish", "with", "within", "without", "won't", "words", "world", "would", "wouldn't", "www", "x", "y", "yes", "yet", "you", "youd", "you'll", "your", "youre", "yours", "yourself", "yourselves", "you've", "z", "zero"];
    for (var i = 0; i < words.length; i++) {
    // filtering out stop words and numbers
    if (stopWords.indexOf(words[i].toLowerCase()) === -1 && isNaN(words[i])) {
    nonStopWords.push(words[i].toLowerCase());
    }
    }
    // console.log(nonStopWords);

    // step-2: forming an object with keywords and their count
    var keywords = {};
    for (var i = 0; i < nonStopWords.length; i++) {
    // checking if the word(property) already exists
    // if it does increment the count otherwise set it to one
    if (nonStopWords[i] in keywords) {
    keywords[nonStopWords[i]] += 1;
    } else {
    keywords[nonStopWords[i]] = 1;
    }
    }

    // step-3: sorting the object by first converting it to a 2D array
    var sortedKeywords = [];
    for (var keyword in keywords) {
    sortedKeywords.push([keyword, keywords[keyword]])
    }
    sortedKeywords.sort(function(a, b) {
    return b[1] - a[1]
    });
    // console.log(sortedKeywords);

    // step-4: displaying top 4 keywords and their count
    topKeywords.innerHTML = "";
    for (var i = 0; i < sortedKeywords.length && i < 4; i++) {
    var li = document.createElement('li');
    li.innerHTML = "<b>" + sortedKeywords[i][0] + "</b>: " + sortedKeywords[i][1];
    topKeywords.appendChild(li);
    }
    }

    // displaying top keywords only if there is a word in the text area
    if (words) {
    keywordsDiv.style.display = "block";
    } else {
    keywordsDiv.style.display = "none";
    }

    });

    // readability level using readability-metrics API from Mashape
    readability.addEventListener('click', function() {

    // placeholder until the API returns the score
    readability.innerHTML = "Fetching score...";

    var requestUrl = "https://ipeirotis-readability-metrics.p.mashape.com/getReadabilityMetrics?text=";
    var data = input.value;

    var request = new XMLHttpRequest();
    request.open('POST', encodeURI(requestUrl + data), true);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    request.setRequestHeader("X-Mashape-Authorization", "PQ4FOFuaR6mshI6qpnQKQvkDZQXjp1o6Zcqjsnug7GvNggTzUE");
    request.send();

    request.onload = function() {
    if (this.status >= 200 && this.status < 400) {
    // Success!
    readability.innerHTML = readingEase(JSON.parse(this.response).FLESCH_READING);
    } else {
    // We reached our target server, but it returned an error
    readability.innerHTML = "Not available.";
    }
    };

    request.onerror = function() {
    // There was a connection error of some sort
    readability.innerHTML = "Not available.";
    };
    });

    // function to convert FLESCH READING SCORE into meaningful string.
    function readingEase(num) {
    switch (true) {
    case (num <= 30):
    return "Readability: College graduate.";
    break;
    case (num > 30 && num <= 50):
    return "Readability: College level.";
    break;
    case (num > 50 && num <= 60):
    return "Readability: 10th - 12th grade.";
    break;
    case (num > 60 && num <= 70):
    return "Readability: 8th - 9th grade.";
    break;
    case (num > 70 && num <= 80):
    return "Readability: 7th grade.";
    break;
    case (num > 80 && num <= 90):
    return "Readability: 6th grade.";
    break;
    case (num > 90 && num <= 100):
    return "Readability: 5th grade.";
    break;
    default:
    return "Not available.";
    break;
    }
    }
    </script>

  4. Publikasikan halaman
Contoh dari penerapan langkah-langkah diatas dapat kamu lihat di halaman Word Counter Gubuk Pintar seperti berikut ini,


Fitur Word Counter

Ada beberapa fitur yang dapat kamu manfaatkan dengan menggunakan Word Counter yang kita buat ini, antara lain
  • Characters
    Menunjukkan jumlah total huruf (termasuk spasi) dalam teks.

  • Words
    Menunjukkan jumlah kata yang ada dalam teks.

  • Sentences
    Menunjukkan jumlah kalimat yang ada dalam teks.

  • Paragraphs
    Menunjukkan jumlah paragraf bacaan dalam teks.

  • Reading Time
    Menunjukkan prakiraan waktu baca dari teks yang di uji.

  • Readability Score
    Menunjukkan nilai keterbacaan dari teks berdasarkan beberapa level akademik.

  • Keywords
    Menunjukkan jumlah kata kunci yang paling sering muncul dalam teks tersebut.
 

Penutup

Seperti itulah cara membuat Word Counter di blog, kini kamu sudah dapat memanfaatkannya. Selamat menggunakan!

***

Apabila memiliki pertanyaan seputar artikel Cara Membuat Word Counter di Blog, silahkan tulis dikolom komentar ya.

Bila artikel ini bermanfaat, bantu Gubuk Pintar menyebarkan manfaatnya dengan membagikan artikel ini ke sosial media mu melalui tombol share di bawah ini. Terimakasih orang baik!

Baca juga:

Gubuk Pintar
"If you waiting for idea for write than you're not a writter. You just a waiter"
Buka Komentar

0 komentar:

Posting Komentar