Cara membuat animasi surat lama di blog

Hari ini saya akan share lagi ke anda tentang cara membuat animasi surat lama di blog . Dalam surat ini, kita akan menggunakan pena animasi. Ketika pena mengering - kita akan mencelupkannya ke dalam tinta. Bahkan, ditambahkan fitur untuk meniru-niru kesalahan yang akan dihapus selama mengetik. Sekarang mari kita lihat penerapannya.

View Demo

Bagaimana? Anda tertarik dengan animasi ini? Silahkan ikuti langkah-langkahnya..  

KODE HTML 

<div id="letter"></div>
    <img id="inkwell1" src="http://i1087.photobucket.com/albums/j479/jalupangna/inkwell1.gif" alt="inkwell1" />
    <img id="inkwell2" src="http://i1087.photobucket.com/albums/j479/jalupangna/inkwell2.gif" alt="inkwell2" />

    <div id="letter_src">
Prabu Siliwangi merupakan seorang raja yang sangat terkenal terkenil|||||||| di tanah sunda hingga sekarang, yang memimpin kerajaan Pajajaran.<br><br>
Dalam kitab Suwasit sejarah  seruruh||||||||seluruh aktivitas mengenai Prabu Siliwangi dikupas tuntas di dalamnya. Kitab tersebut berisi 22 bab perjalanan Prabu Siliwangi dimulai dari ayahnya, Prabu Anggararang Raja Kerajaan Gajah. Setelah Prabu Anggararang merana|||||||| merasa puteranya layak memangku jabatan raja, akhirnya kerajaan diserahkan kepada Pangeran Pamanah Rasa (sebelum bergelar Siliwangi).<br><br>
Sebutan dengan nama  siwangi||||||||Siliwangi, dipertegas bahwa nama/panggilan tersebut adalah gelar setelah Pangeran Pamanah Rasa masuk Islam sebagai salah satu syarat mempersunting murid Syaikh Qori|||||||| Quro, yakni Nyi Ratu Subanglarang. Dari isteri ketiga ini, kemudian melahirkan Kian Santang yang bergelar Pangeran Cakrabuana di Cirebon dan Rara Santang, ibunda Sunan Gunung Jati.<br><br>
    </div>

Kalimat-kalimat yang disorot warna kuning merupakan isi dari surat
Sedangkan tag <br><br> adalah untuk membuat paragraph baru dari penulisan surat
Tanda ||||||||  untuk mencoret kata yang salah

• Masuk ke akun Blogger anda -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript

• Pastekan kode di atas didalamnya
• Simpan Gadget... 
• Atau anda bisa meletakannya di dalam postingan (HTML bukan compose)

KODE CSS

body {
    background: url('http://i1087.photobucket.com/albums/j479/jalupangna/bg-3.jpg') no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}
#inkwell1 {
    bottom: 100px;
    left: 140px;
    position: fixed;
}
#inkwell2 {
    bottom: 100px;
    left: 140px;
    position: fixed;
    visibility: hidden;
}
#letter {
    font-family: Comic Sans MS;
    font-size: 18px;
    font-weight: bold;
    margin: 50px auto;
    position: relative;
    width: 75%;
}
#letter_src {
    display: none;
}

LANGKAH SELANJUTNYA: 

• Cari tag/kode ]]></b:skin> tekan CTRL+F untuk memudahkan pencarian
• Silahkan kopi dan Pastekan kode CSS di atas, tepat diatas tag
  ]]></b:skin> 
• Kemudian cari kode </body> dan letakan script kode javascript dibawah ini tepat diatas tag/kode </body>

<script type='text/javascript'> //<![CDATA[ window.onload = function(){ // public variables var vLetter = document.getElementById('letter'); var iSpeedInk = 5; // other variables var sText = document.getElementById('letter_src').innerHTML; var iCurChar = 0; var sChars = '<span>'; var iCurInk = 0; var sCurCaret = ''; var sCaret = " <img src='http://i1087.photobucket.com/albums/j479/jalupangna/pen.gif' style='position:absolute' />"; var doStep = function () { // current char var sChar = sText.charAt(iCurChar); // default char delay var iDelay = 32; if (sChar == '') { sCurCaret = ''; } else if (sChar == '|') { // we use | symbol to emulate 'error' symbol sChar = ''; sChars = sChars.substring(0, sChars.length-1); iDelay = 64; } else if (sChar == '<') { // pass tags var iPos = sText.indexOf('>', iCurChar); sChar = sText.substring(iCurChar, iPos + 1); iCurChar = iPos; } else if (sChar == '&') { // pass html entities var iPos = sText.indexOf(';', iCurChar); sChar = sText.substring(iCurChar, iPos + 1); iCurChar = iPos; } else if (sChar == '.') { // custom delay in case of . symbol iDelay = 300; } else if (sChar == ',') { // custom delay in case of , symbol iDelay = 100; } else if (sChar == ' ') { // custom delay in case of space symbol iDelay = 32; } else if (iCurChar > 5) { sCurCaret = sCaret; } // expenditure of ink if (sChar == ' ') { iCurInk += iSpeedInk; sChar = '</span><span style="color:RGB(' + (iCurInk) + ',' + (iCurInk) + ',' + (iCurInk) + ')">' + sChar; } if (document.getElementById('inkwell2').style.visibility == 'visible') { sCurCaret = sCaret; document.getElementById('inkwell2').style.visibility = 'hidden'; sChar = '</span><span style="color:RGB(0,0,0)">' + sChar; } // refresh Ink if (iCurInk > 160) { iCurInk = 0; document.getElementById('inkwell2').style.visibility = 'visible'; iDelay = 1000; sCurCaret = ''; } // add current char to chars sChars += sChar; // hide the caret at the end of the letter if (iCurChar == sText.length - 1) sCurCaret = ''; // update letter with new chars vLetter.innerHTML = sChars + sCurCaret; // goto next char iCurChar++; // next step if (iCurChar < sText.length) { setTimeout(doStep, 20 + iDelay); } } doStep(); }; //]]> </script>

•  Simpan template...Selesai

Semoga bermanfa'at....