Embed The Character & Word Counter On Your Webpage

Easily embed the character, word, sentence & paragraph counter on your own webpage. Although we would greatly appreciate if you would give us credits for using the counter, it is absolutely not mandatory to leave credits.


How do I embed it?

Simply add the following lines to your code:
Embed the javascript script on your webpage.

<script src="http://CharacterCountOnline.com/old/js/count.js"></script>

Add the counter together with a text box:

<form action="" method="post">

<span class="counter" id="counter">Loading...</span>
<textarea rows="20" cols="60" name="field1" id="field1" class="word_count" onFocus="javascript:if(this.value=='Copy and paste your text here to start counting characters.') this.value='';">Copy and paste your text here to start counting characters.</textarea>

</form>

Add the CSS to keep the design clean:

<style type="text/css">
.counter{background:#222;height:30px;line-height:30px;width:400px;border-radius:20px;color:#fff;display:block;text-align:center;margin:0 auto -15px;z-index:100;position:relative;text-transform:uppercase;font-size:10px;letter-spacing:1px;font-weight:bold;font-family:'Trebuchet MS',Arial,Helvetica,sans-serif}#field1{background-color:#fff;border:15px solid #fff;-moz-box-shadow:0px 0px 8px #fdfff0;-webkit-box-shadow:0px 0px 8px #fdfff0;box-shadow:0px 0px 8px #fdfff0;width:688px;position:relative;padding:20px 5px;font-size:11px;color:#666;z-index:1}

#field1{background-color:#fff;border:15px solid #fff;-moz-box-shadow:0px 0px 8px #fdfff0;-webkit-box-shadow:0px 0px 8px #fdfff0;box-shadow:0px 0px 8px #fdfff0;width:688px;position:relative;padding:20px 5px;font-size:11px;color:#666;z-index:1}#field1:focus{-moz-box-shadow:0px 0px 7px #000;-webkit-box-shadow:0px 0px 7px #000;box-shadow:0px 0px 7px #000}
</style>

(You are free to download the Javascript code to your own webpage to avoid requesting files from us)