Membuat Tampilan Typewriter pada Postingan

Kalau pada beberapa waktu yang lalu blog ini pernah mengulas mengenai cara menampilkan huruf seperti huruf mesin ketik pada postingan, maka kali ini akan dibahas tentang gaya tulisan mengetik atau bisa juga disebut dengan "typewriter".

Jika Anda pernah mengetikkan sebuah naskah pada mesin ketik atau media lainnya maka nantinya sewaktu kita membuka postingan tersebut maka huruf-hurufnya akan muncul satu persatu. Suasananya mirip saat kita mengetik di mesin ketik.

Untuk membuat postingan tampil dengan typewriter ini diperlukan sebuah skrip khusus. Skrip ini didapat dari http://www.masbugie.com/2012/01/posting-dengan-tampilan-typewriter.html. Sebelum menerapkan skrip ini pada salah satu postingan di blog kita, ada beberapa hal yang harus diperhatikan, diantaranya:

1. Sebaiknya skrip ini digunakan untuk postingan yang berisi selain tutorial, misalnya tentang informasi atau berita karena minim menggunakan kode HTML.

2. Buatlah naskah di media lain terlebih dahulu untuk meminimalisir kesalahan. Jika sudah, baru digabungkan ke dalam skrip "typewriter".

3. Setiap berganti baris, berikan tag pemutus baris (tag break) yaitu tag br spasi garis miring.

4. Gaya suasana menulis di mesin ketik ini hanya muncul sekali tidak bisa berulang-ulang. Kalau mau diulang, ya tinggal di-reload aja halamannya.

5. Selamat mencoba dan semoga berhasil.

Ini dia nih skrip yang bisa bikin postingan kayak lagi ngetik di mesin ketik.

<br />
<style type="text/css">
 body{
  font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
  margin-top:0px;
   background-repeat:no-repeat;
  padding-top:1px;
 }
    #myContent, #myContent blink{
        width:100%px;
        height:100%px;
        background:black;
        color: #00FF00;
        font-family:courier;
    }  
    blink{
        display:inline;
    }
    </style><br />
    <script type="text/javascript">
  var charIndex = -1;
    var stringLength = 0;
    var inputText;
    function writeContent(init){
     if(init){
      inputText = document.getElementById('contentToWrite').innerHTML;
     }
        if(charIndex==-1){
            charIndex = 0;
            stringLength = inputText.length;
        }
        var initString = document.getElementById('myContent').innerHTML;
  initString = initString.replace(/<SPAN.*$/gi,"");
       
        var theChar = inputText.charAt(charIndex);
        var nextFourChars = inputText.substr(charIndex,4);
        if(nextFourChars=='<BR>' || nextFourChars=='<br>'){
         theChar  = '<BR>';
         charIndex+=3;
        }
        initString = initString + theChar + "<SPAN id='blink'>_</SPAN>";
        document.getElementById('myContent').innerHTML = initString;

        charIndex = charIndex/1 +1;
  if(charIndex%2==1){
             document.getElementById('blink').style.display='none';
        }else{
             document.getElementById('blink').style.display='inline';
        }
               
        if(charIndex<=stringLength){
            setTimeout('writeContent(false)',10);
        }else{
         blinkSpan();
        }
    }
        var currentStyle = 'inline';
    function blinkSpan(){
     if(currentStyle=='inline'){
      currentStyle='none';
     }else{
      currentStyle='inline';
     }
     document.getElementById('blink').style.display = currentStyle;
     setTimeout('blinkSpan()',500);
   
    }
    </script>
   
<div id="myContent">
</div><div id="contentToWrite" style="display:none">
TULISAN ANDA <br />
1. No Smoking, No Die <br />
2. No Women, No Cry <br />
3. No Watch, No Brook<br />
4. No Money, No Dong<br />
</div><script type="text/javascript">
writeContent(true);
</script><br />
<br />