Rabu, 02 Mei 2018

Cara Membuat Kalkulator Kata di Halaman Statis

Cara Membuat Kalkulator Kata di Halaman Statis

Cara Membuat Kalkulator Kata di Halaman Statis
Cara Membuat Kalkulator Kata di Halaman Statis
Blog Mang Otep | Cara Membuat Kalkulator Kata di Halaman Statis - Word Counters atau sering juga disebut dengan kalkulator perhitungan kata adalah tools yang biasa para penulis terutama para blogger yang di gunakan untuk memeriksa jumlah kata dan karakter pada setiap artikel yang dibuatnya.

Perhitungan Kata dan Karakter sangatlah penting dalam pembuatan sebuah artikel, apalagi terutama untuk para blogger yang ingin memaksimalkan tulisan 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, karena hal tersebut merupakan satu dari sekian banyak ketentuan yang dibuat oleh google adsense. Tapi ingat banyak saja tidak cukup jika artikel kurang bagus dan rapih dalam segi bahasa dan perletakkannya.

Kali ini Blog Mang Otep 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 karakter 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

<div style="text-align: center;">
<span style="font-size: large;"><b>Word Counters By Mang Otep</b></span></div>
<br />
Blog Mang Otep | Word Counters adalah tools untuk penghitungan kata dan karakter dalam sebuah halaman blog, dapat digunakan 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>
Untuk pengaturan lanjutan kalian bisa edit sesuka hati kode CSS yang ada pada box diatas, seperti ukuran, warna, dan bentuk pembukaan artikel halaman statis anda. Kreasikan sedemikian mungkin agar bisa menjadi sesuatu yang berbeda dan Jangan lupa untuk credit tolong dilampirkan.

Demikianlah info dari Blog Mang Otep tentang artikel Cara Membuat Kalkulator Kata di Halaman Statis, semoga bermanfaat untuk anda. Jika menyukai blog ini kalian bisa klik like, share, and subscribe untuk berlangganan melalui email pribadi anda dalam artikel terbaru blog mamang ini.

Disana Gunung Disini Gunung, Ditengahnya Pulau Jawa
Kamu Bingung Infonya Nanggung, Mending Visit Blog Mang Otep Aja

Load comments