Cara Memasang Tools Word Counter Pada Blog
Pada kesempatan kali ini saya akan membagikan Cara Membuat Tools Word Counter di Blogger.
Sebagai seorang Blogger atau apapun yang berhubungan dengan aktifitas menulis atau mengetik, kita di wajibkan untuk membuat tulisan yang menarik dan berkualitas pastinya.
Dan salah satu yang menjadi patokan utama tersebut adalah panjang kata atau panjang karakter kata.
Karena tingkat persaingan di mesin pencarian Google atau Browser lainnya seperti yandex semakin sengit.
Kebanyakan penulis berlomba-lomba dengan mengoptimasi tulisan mereka agar tulisan tersebut menjadi berkualitas.
Karena semakin berkualitas sebuah tulisan, maka kesempatan untuk mendapatkan page one atau peringkat tertinggi sangatlah besar.
Menghitung karakter tulisan sendiri sebenarnya bisa di lakukan dengan sangat mudah menggunakan situs-situs yang ada saat ini, contohnya 1text.com atau yang lainnya.
Tetapi jika kamu ingin memasang sendiri pada halaman situs kalian, maka postingan saya kali ini mungkin bisa menjadi refrensi.
Namun, perlukah memasang Word Counter sendiri pada blog? Jawabannya tergantung dari kalian, anda bisa memasang menggunakan fitur halaman yang ada pada Blogger maupun WordPress kalian.
Selain mudah, tampilan yang di sediakan juga bervariatif.
Untuk melihat demo gambar, kalian bisa lihat di bawah ini :
Ada tiga jenis penghitungan yang dilakukan. Yaitu kalimat, karakter spasi, serta karakter tanpa spasi.
Cara membuatnya sangatlah mudah, yang kita butuhkan hanyalah HTML, CSS, dan JavaScript.
Oke tanpa waktu lama kita langsung ke tutorial Cara Memasang Tools Word Counter di Blogger.
Cara Memasang Tools Word Counter Pada Blog
<!-- HTML -->
<div id="wordCounter">
<div class="wordArea">
<textarea id="text" placeholder="Paste your text here..." spellcheck="false"></textarea>
</div>
<div class="wordButton">
<table>
<tbody>
<tr>
<td>Sentence:</td>
<td id="wordCount">0</td>
</tr>
<tr>
<td>Character with space:</td>
<td id="totalChars">0</td>
</tr>
<tr>
<td>Character without space:</td>
<td id="charCountNoSpace">0</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- End HTML -->
<!-- CSS -->
<style>
#wordCounter .wordArea textarea{display:block;width:100%;height:240px;color:#333;font-family:"Fira Mono",sans-serif;font-size:13px;padding:20px;border-radius:3px 3px 0 0;resize:none}
#wordCounter .wordArea textarea:focus{color:#333}
#wordCounter .wordArea textarea::placeholder{color:#bbb}
#wordCounter .wordButton{display:flex;flex-wrap:wrap;flex-flow:column;background-color:#009ee0;color:#fff;font-family:"Noto Sans",sans-serif;font-size:13px;padding:40px;border-radius:0 0 3px 3px}
#wordCounter .wordButton table{border-color:#009ee0}
#wordCounter .wordButton table tr td{background-color:#009ee0;border:0}
.wordButton #wordCount,.wordButton #totalChars,.wordButton #charCountNoSpace{color:#fff}
</style>
<!-- End CSS -->
<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/gh/Ferisp/Widget@main/word-counter.js"></script>
<script>
counter=function(){
var value=$("#text").val();
if (value.length==0){
$("#wordCount").html(0);
$("#totalChars").html(0);
$("#charCountNoSpace").html(0);
return
}
var regex=/\s+/gi;
var wordCount=value.trim().replace(regex," ").split(" ").length;
var totalChars=value.length;
var charCountNoSpace=value.replace(regex,"").length;
$("#wordCount").html(wordCount);
$("#totalChars").html(totalChars);
$("#charCountNoSpace").html(charCountNoSpace);
}
$(document).ready(function(){
$("#count").click(counter);
$("#text").change(counter);
$("#text").keydown(counter);
$("#text").keypress(counter);
$("#text").keyup(counter);
$("#text").blur(counter);
$("#text").focus(counter);
})
</script>
<!-- End JavaScript -->
Catatan
Penutup
Subscribe Our Newsletter
0 Komentar
Posting Komentar
Kebijakan berkomentar :
Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata.
Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini.
Dilarang berkomentar menggunakan Link Aktif.
Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.