Cara Menciptakan Kalkulator Kata Di Halaman Statis

Cara Membuat Kalkulator Kata di Halaman Statis

| Cara Membuat Kalkulator Kata di Halaman Statis - Word Counters atau sering juga disebut dengan kalkulator perhitungan kata yaitu tools yang biasa para penulis terutama para blogger yang di gunakan untuk mengusut jumlah kata dan aksara pada setiap artikel yang dibuatnya.

Perhitungan Kata dan Karakter sangatlah penting dalam pembuatan sebuah artikel, apalagi terutama untuk para blogger yang ingin memaksimalkan goresan pena mereka terhadap SEO dan Google Adsense, kabarnya semakin banyak jumlah kata dalam suatu artikel akan semakin SEO postingan tersebut.

Dan untuk perihal Google Adsense, semakin banyak kata dari artikel kita akan semakin besar kesempatan untuk ditertima google adsense, sebab hal tersebut merupakan satu dari sekian banyak ketentuan yang dibentuk oleh google adsense. Tapi ingat banyak saja tidak cukup jikalau artikel kurang manis dan rapih dalam segi bahasa dan perletakkannya.

Kali ini akan membagikan tutorial bagaimana sih Cara Membuat Kalkulator Kata di Halaman Statis di blog kalian sendiri, sehingga dalam perhitungan kata nanti kalian tidak usah pergi ke situs lain dalam menghitung kata dan aksara artikel anda. Mari dilihat dengan seksama :

Cara Membuat Kalkulator Kata di Halaman Statis :

1. Masuk ke blogger.com
2. Kemudian pilih Halaman >> Buat Halaman Baru
3. Masukkan semua Kode dibawah ini ke dalam Mode HTML

Kode <div style="text-align: center;"> <span style="font-size: large;"><b>Word Counters By Mang Otep</b></span></div> <br />  | Word Counters yaitu tools untuk penghitungan kata dan aksara dalam sebuah halaman blog, sanggup dipakai untuk keperluan perhitungan kata dalam pembuatan artikel atau postingan Blog.<br /> <br /> <form id="wordCount" method="get"> <div id="headWordCount"> <textarea id="textAreaCount" placeholder="Salin dan Paste ( CTRL + V ) Kata Atau Tulis Kata Disini" spellcheck="false"></textarea>    <br /> <div class="button-group"> <button id="submitWordCount" type="submit" value="Count !"> Count</button> <button id="resetWordCount" type="reset" value="Hapus Semua !"> Reset Count</button></div> <center> <div id="boxHasil"> <span style="font-size: large;"><b>Result Word Counters :</b></span>     <br /> <div id="hasilKata"> </div> <div id="hasilKarakter"> </div> </div> </center> </div> </form> <script>     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 = "Jumah 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> <style scoped="" type="text/css"> #main-wrapper{padding:0;width:100%;border:0} textAreaCount{font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;color:#2a5ead;font-size:13px;padding:2px 4px;color:#d14;} #textAreaCount{border:0;width:68%;height:250px;margin:0 auto;display:block;background-color:#f0f0f0;color:#999;padding:15px;font:400 14px 'Courier New',Monospace;border-radius:6px;box-shadow:inset 0 0 10px rgba(0,0,0,0.05);transition:all 2s} #textAreaCount:hover,#codes:focus{background-color:#fafafa;color:#666;box-shadow:inset 0 0 10px rgba(0,0,0,0.1);} .button-group{width:100%;max-width:78.5%;float:none;margin:0 auto 0;text-align:center} button,button[disabled]:active{width:42.3%;border:none;padding:14px 12px;text-align:center;color:#fff;display:inline-block;white-space:nowrap;background-color:#3498db;cursor:pointer;font-size:13px;position:relative;top:-20px;margin:0 8px;letter-spacing:.5px;border-radius:3px;transition:all 0.2s} button:hover,button:focus{background:#43a9ed;color:#fff} button[disabled],button[disabled]:active{background:#43a9ed;color:#fff;} #opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;margin:0 10px 0 0;vertical-align:middle;border:none;outline:none} #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;} .post-body p{margin:0} #blog1,#artikel,.blog-posts{background-position:center!important;} #comments,#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{width:100%;max-width:68.5%;display:table;position:relative;margin:0 auto;font-size:13px} .post-body ul#wrapin li {display:block;margin:0 auto;text-align:left;} .post-body ul#wrapin br {display:none;} .option-input{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;position:relative;right:0;bottom:0;left:0;height:16px;width:16px;transition:all 0.15s ease-out 0s;background:#f0f0f0;border:none;color:#fff;cursor:pointer;display:inline-block;margin-right:0.5rem;outline:none;position:relative;border-radius:10%;} .option-input:hover{background:#eee} .option-input:checked{background:#2ecc71} .option-input:checked::before{height:16px;width:16px;position:absolute;content:'\f00c';font-family:fontawesome;display:inline-block;font-size:12.66667px;text-align:center;line-height:16px} .option-input:checked::after{-webkit-animation:click-wave 0.65s;-moz-animation:click-wave 0.65s;animation:click-wave 0.65s;background:#40e0d0;content:'';display:block;position:relative;z-index:100} .option-input.radio{border-radius:50%} .option-input.radio::after{border-radius:50%} .arlina-nav .share-box button {display:none} </style>  <br /> <div class="clear"> </div> 

• Link Demo

Untuk pengaturan lanjutan kalian sanggup edit sesuka hati isyarat CSS yang ada pada box diatas, ibarat ukuran, warna, dan bentuk pembukaan artikel halaman statis anda. Kreasikan sedemikian mungkin semoga sanggup menjadi sesuatu yang berbeda dan Jangan lupa untuk credit tolong dilampirkan.

Demikianlah informasi dari perihal artikel Cara Membuat Kalkulator Kata di Halaman Statis, semoga bermanfaat untuk anda. Jika menyukai blog ini kalian sanggup klik like, share, and subscribe untuk berlangganan melalui email langsung anda dalam artikel terbaru blog mamang ini.
Sumber https://www.mangotep.com/