CARA MEMBUAT TAG PRE DENGAN NOMOR OTOMATIS

CARA MEMBUAT TAG PRE DENGAN NOMOR OTOMATIS – Cara memasang tag pre boleh dibilang hal yang masih awam di kalangan blogger. Pada umumnya mereka menggunakan tag blockquote karena lebih simpel dalam penggunaannya. Akan tetapi bagi sebagian blogger yang mengkhususkan pada tutorial yang kontennya berisi source kode alangkah baiknya untuk memasang tag pre ini agar tampilan postingan lebih cantik dan menarik.

Cara memasang tag pre dengan nomor otomatis?

Bagaimanakah cara agar tag pre terdapat nomor otomatis berikut ini cara pemasangannya
1. Masukan kode java script berikut ini pada template, letakan pada kode sebelum </head>
<script type='text/javascript'>
(function() {
    var pre = document.getElementsByTagName('pre'),
        pl = pre.length;
    for (var i = 0; i < pl; i++) {
        pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
        var num = pre[i].innerHTML.split(/n/).length;
        for (var j = 0; j < num; j++) {
            var line_num = pre[i].getElementsByTagName('span')[0];
            line_num.innerHTML += '<span>' + (j + 1) + '</span>';
        }
    }
})();​
</script>
2. Masukan kode CSS untuk tag pre tersebut, tempatkan bersama dengan kode CSS template blog
pre {
  background-color:#eee;
  overflow:auto;
  margin:0 0 1em;
  padding:.5em 1em;
}
pre code,
pre .line-number {
  /* Ukuran line-height antara teks di dalam tag <code> dan <span class="line-number"> harus sama! */
  font:normal normal 12px/14px "Courier New",Courier,Monospace;
  color:black;
  display:block;
}
pre .line-number {
  float:left;
  margin:0 1em 0 -1em;
  border-right:1px solid;
  text-align:right;
}
pre .line-number span {
  display:block;
  padding:0 .5em 0 1em;
}
pre .cl {
  display:block;
  clear:both;
}​

3. Untuk menggunakan tag pre dengan nomor otomatis ini gunakan format html berikut pada form penulisan artikel

<pre><code> ... </code></pre>

Hasil dari javascript diatas bisa dilihat di gambar berikut ini

tag pre with number
tag pre with number

Untuk langkah-langkah cara memasukan tag pre dalam postingan kalian bisa lihat dalam tutorial CARA MEMBUAT TAG PRE VANILA STYLE disitu disajikan lengkap mulai dari awal. Semoga artikel CARA MEMBUAT TAG PRE DENGAN NOMOR OTOMATIS ini bisa bermanfaat bagi para blogger semua. Untuk mengetahui lebih detail tentang isi dan fungsi javascript diatas bisa dilihat pada blog sumbernya Taufik Nurrohman 

Leave a Reply

Your email address will not be published. Required fields are marked *

No Live Link Please! and Leave a Relevant Comment