Cara Membuat Form Auto Counter Word di Blogger

Auto Counter Word adalah sebuah kalkulator penghitung jumlah kata. Jika Anda seorang penulis artikel, Anda sebaiknya menghitung kata pada artikel yang Anda buat sendiri. Minimal jumlah kata pada artikel yang bagus itu adalah 100 kata, semakin melebihi 100+ kata maka akan sangat bagus. Google sangat menyukai artikel yang mencapai 1.000 kata bahkan Google bisa saja meletakkan artikel Anda di urutan paling pertama di SERP (Search Engine Optimization). Lalu bagaimana cara mengetahui berapa kata pada sebuah artikel? Untuk menghitung kata pada sebuah artikel bukan menghitungnya secara manual ya, jika Anda pernah menghitung secara manual berarti Anda orang yang sangat teliti sekali ^.^. Menghitung kata pada sebuah artikel Anda bisa menggunakan sebuah aplikasi seperti Microsoft Word. Namun, Anda tidak perlu menggunakan aplikasi, Form Auto Counter Word ini bisa di andalkan. Fiturnya sama seperti Microsoft Word dimana anda sedang mengetik, dan dimana Microsoft Word juga menghitung berapa jumlah karakter kata dan juga berapa kata dalam 1 halaman.

Sebelumnya saya pernah membuat artikel seperti ini juga, silakan Anda baca artikel saya sebelumnya. Artikel sebelumnya tidak beda jauh dengan artikel saat ini. Namun ada sedikit berbeda, jika form sebelumnya menggunakan tombol untuk mengh, berbeda dengan kali ini ketika Anda sedang mengetik maka secara otomatis jumlah kata akan dihitung.

Baca Juga :



Screenshoot :
Perhitungan kata dan karakter dalam sebuah artikel sangatlah penting. Apalagi untuk para Blogger untuk memaksimalkan tulisannya. Dampak memaksimalkan perhitungan kata adalah mengacu pada SEO, kabarnya semakin banyak jumlah kata dan karakter dalam suatu artikel akan semakin SEO artikel tersebut.

Jika Anda ingin mengajukan permohonan Google AdSense Anda akan berkesempatan akan diterima jika memperhatikan perhitungan kata dalam artikel Anda. Menurut Master SEO, Artikel yang bagus itu minimal 400 kata atau lebih. Banyak kata pada artikel juga belum cukup, jika artikel kurang bagus dan rapih percuma saja, jadi memaksimalkan jumlah kata pada artikel itu penting ya. Ok, langsung saja ke proses pembuatan.


Cara Membuat Form Auto Counter Word di Blogger


Cara Pertama : 

1. Buka Blogger - Kemudian Login.
2. Dashboard - Halaman.
3. Buat Halaman Baru.


Proses Pembuatan :

1. Buat Halaman Baru.
2. Buat Judul "Auto Counter Word" (bebas).
3. Copy & Paste kode berikut ini, dan letakkan pada bagian HTML bukan pada bagian COMPOSE.
<html>



<head>
    
    
 <style type="text/css">
#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;
}

.ribbon {
    position: relative;
    z-index: 1;
    padding: 1em 2em;
}

.ribbon-tampilan {
    font-size: 120%!important;
    text-transform: uppercase;
    width: 60%;
    position: relative;
    background: #2980b9;
    color: #fff;
    text-align: center;
    padding: 1em 2em;
    margin: 2em auto 3em;
}

.ribbon-tampilan:before,.ribbon-tampilan:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -1em;
    border: 1.5em solid #2980b9;
    z-index: -1;
}

.ribbon-tampilan:before {
    left: -2em;
    border-right-width: 1.5em;
    border-left-color: transparent;
}

.ribbon-tampilan:after {
    right: -2em;
    border-left-width: 1.5em;
    border-right-color: transparent;
}

.ribbon-tampilan .ribbon-nama:before,.ribbon-tampilan .ribbon-nama:after {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #2980b9 transparent transparent transparent;
    bottom: -1em;
}

.ribbon-tampilan .ribbon-nama:before {
    left: 0;
    border-width: 1em 0 0 1em;
}

.ribbon-tampilan .ribbon-nama:after {
    right: 0;
    border-width: 1em 1em 0 0;
}

textarea {
    width: 94%;
    height: 300px;
    margin: 0 auto;
    display: block;
    background-color: #fff;
    padding: 20px;
    font: normal 13px 'Courier New',Monospace;
    border: 2px solid #2980b9;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
    border-radius: 5px 5px 0 0;
    resize: none;
}

#belakang {
    background: #ecf0f1;
    position: relative;
    display: block;
    clear: both;
    border-radius: 5px;
    padding: 20px;
    border: 1px solid rgba(0,0,0,0.05);
}

.daerah-tombol-2 {
    color: #fff;
    background: #2980b9;
    text-align: center;
    padding: 20px 40px 20px;
    margin: 10px;
    border-radius: 4px;
    font-weight: bold;
}

#belakang-text {
    background: #0569ab;
    position: relative;
    display: block;
    clear: both;
    border-radius: 5px;
    padding: 20px;
    border: 1px solid rgba(0,0,0,0.05);
    font-size: 18px;
}

.hasil {
    color: #fff;
    background: #2980b9;
    text-align: center;
    padding: 20px 40px 20px;
    margin: 20px;
    border-radius: 4px;
}

button {
    color: #fff!important;
    height: 50px;
    font-size: 14px;
    font-weight: bold;
    background: #2980b9;
    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: 10px;
}

button:hover {
    background: #0569ab;
}
    
</style>    
    
    </head>

    
    
    <article>
    
<div class="ribbon">
<h1 class="ribbon-tampilan">
<strong class="ribbon-nama">AUTO COUNTER WORD</strong>
</h1>
</div>
<div id="wct_embed_counts">
<div id="belakang">
<textarea id="wct_embed_input_text"  cols="30" rows="20" placeholder="Type or copy and paste your word here..."></textarea>
    </div>
<div class="hasil">
<span style="font-size: large;"><b> RESULT :</b></span>
        </div>
<div class="daerah-tombol-2">
<div id="belakang-text">
<div id="wct_embed_result" style="margin: 5px; text-align: center;">
<script type="text/javascript">
//<![CDATA[
function wct_getWordStats(e){var t=[],n=e.trim();t.num_character=e.trim().length;var r=n.split(/\s+/).join("");t.num_character_wo_spaces=r.length,t.num_paragraph=0,n.length>0&&(t.num_paragraph=n.split(/\n+/).length);var a=n.replace(/(\w)[-_'](\w)/gi,"$10$2");a=a.replace(/(\d)[,.](\d)/gi,"$10$2"),t.num_sentence=0,a.length>0&&(t.num_sentence=a.replace(/"/gi,"").split(/[.?!:\n]+/).length);var _=a.split(/[\s\n]+/);if(t.num_word=0,a.length>0&&(t.num_word=_.length),t.avg_sentence_length=0!=t.num_sentence?Math.round(t.num_word/t.num_sentence*10)/10:0,0!=t.num_word){var c=r.length/t.num_word;t.avg_word_length=Math.round(10*c)/10}else t.avg_word_length=0;var d=[];t.num_unique_word=0,t.percentage_num_unique_word=0;for(var s=0;s<_.length;s++)d[_[s]]=1;var u=Object.keys(d).length;return t.num_unique_word=Object.keys(d).length,percentage_unique_words=Math.round(100*u/t.num_word),t.percentage_num_unique_word=percentage_unique_words,t}
function wct_display_counts(){var e=document.getElementById("wct_embed_input_text").value;wordStats=wct_getWordStats(e),document.getElementById("wct_embed_result").innerHTML="<b>"+wordStats.num_word+"<b> KATA </b><br/>"+wordStats.num_character+"<b> KARAKTER </b><br/>"+wordStats.num_character_wo_spaces+"<b> KARAKTER TANPA SPASI </b><br/>"+wordStats.num_unique_word+"<b> KATA UNIK </b><br/>"+wordStats.num_sentence+"<b> KALIMAT</b><br/>"+wordStats.num_paragraph+"<b> PARAGRAF</b> <br/>"}var wct_embed_result=document.getElementById("wct_embed_result");wct_embed_result.setAttribute("style","margin:5px;text-align:center;");var wct_embed_input_text=document.getElementById("wct_embed_input_text");wct_embed_input_text.setAttribute("style","width: 100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;");var wct_embed_result=document.getElementById("wct_embed_result");wct_embed_result.innerHTML="<b>0</b> <b> KATA </b><br/><b>0</b><b> KARAKTER </b><br/> <b>0</b> <b>KARAKTER TANPA SPASI</b><br/> <b>0</b> <b> KATA UNIK </b><br/> <b>0</b> <b> KALIMAT</b><br/> <b>0</b> <b> PARAGRAF</b> <br/> ";var wct_textarea=document.getElementById("wct_embed_input_text");wct_textarea.value="",wct_textarea.addEventListener&&(wct_textarea.addEventListener("input",wct_display_counts,!1),wct_textarea.addEventListener("textInput",wct_display_counts,!1),wct_textarea.addEventListener("textinput",wct_display_counts,!1)),wct_textarea.attachEvent&&wct_textarea.attachEvent("onpropertychange",wct_display_counts);
//]]>
    </script>
    <br /></div></div>
    </div></div>
    

    </article>
    
    
    
    <body>
    

    </body>
</html>
4. Publikasikan.


Demikian, bila Anda mengalami kesalahan atau ada yang ingin dipertanyakan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Membuat Form Auto Counter Word di Blogger

Related Post

0 Response to "Cara Membuat Form Auto Counter Word di Blogger"

Post a Comment