Membuat Animasi Loading Type di PRISM SyntaxHihglighter

Membuat Animasi Loading Type Word di PRISM SyntaxHihglighter - Halo, apa kabar sobat blogger? Pada kesempatan kali ini saya ingin berbagi sedikit tips mengenai modifikasi tampilan Tag Pre-Code dipostingan blog. Jika pada artikel sebelumnya saya pernah membagikan bagaimana Cara Membuat PRISM SyntaxHighlighter di Blogger.

Seperti judulnya, kita akan Membuat Animasi Loading Type Word di PRISM SyntaxHihglighter, maka dari itu pastikan anda sudah menerapkan kode tag pre-code dipostingan blog sobat. Jika belum, silahkan coba pasang di Cara Membuat PRISM SyntaxHighlighter di Blogger.

Sebenarnya efek animasi loading type word ini akan bekerja seperti halnya kita mengetik di ms. word atau notepad. Sebab kata akan muncul perlahan dengan satu-persatu huruf dan kata, sehingga tampilan kode yang akan ditampilkan terlihat lebih menarik.

Bagaimana, apakah anda penasaran? Untuk menerapkan Animasi Loading Type Word di PRISM Syntax Highlighter sobat bisa mengikuti langkah sederhana dibawah ini.

Cara Membuat Animasi Loading Type Word di PRISM SyntaxHihglighter:

1. Masuk ke akun blogger
2. Klik Template > Edit HTML > cari kode </body>
3. Paste kode berikut tepat diatas kode </body>
4. Simpan template.

<script type='text/javascript'>
// Loading
$(function(){$(&quot;.post-body pre code&quot;).each(function(){for(var n=$(this),t=n.text(),e=t.length,a=&quot;&quot;,c=0;e&gt;c;c++)a+=&quot;<span>&quot;+t.charAt(c)+&quot;</span>&quot;;n.html(a)});var n=50;$(&quot;.post-body pre code span,.post-upper p.title span&quot;).each(function(t,e){$(e).hide(),setTimeout(function(){$(e).fadeIn(&quot;slow&quot;)},n+t*n)})});
</script>

Nah, jika sudah selesai menyimpan template. Sekarang sobat bisa melihat hasil dari Animasi Loading Type Word di PRISM Syntaxhighlighter dengan cara membuaka salah satu postingan sobat yang memiliki tag pre-code (syntaxhighlighter) didalamnya.

Update! Trik ini juga bisa digunakan untuk kode Blockquote. Jika sobat ingin menambahkan kode blockquote, sobat tinggal menambahkan kode .post-body blockquote sesudah kode .post-body pre code sehingga hasilnya menjadi .post-body pre code, .post-body blockquote.

Selamat mencoba..