Membuat Penomoran Otomatis Pada Tag Blockquote

Membuat Penomoran Otomatis Pada Tag Blockquote - Blockquote adalah salah satu tag yang biasa diguankan oleh para blogger untuk berbagi kode atau script. Walaupun sebenarnya ada baiknya jika kita ingin berbagi kode bisa menggunakan Tag pre dibandingkan blockquote.

Namun, untuk anda yang masih suka menggunakan blockquote, kali ini saya akan berbagi tips sedikit tentang bagaimana caa membuat penomoran otomatis pada tag blockquote tersebut. Yang tentu dapat membuat tampilan blockquote anda menjadi lebih menarik. :)

Untuk kode CSS ini, sebenarnya telah diposting oleh Blog.kangismet.net. :)

Baiklah, langsung saja kalo gitu, untuk menerapkan Penomoran Otomatis pada Tag Blockquote silahkan ikuti langkah-langkah dibawah ini :

• DEMO

Simpan kode ini di atas ]]></b:skin> atau </style>

 blockquote {
  background-color:#eee;
  font:normal normal 12px/14px "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
  color:#444;
  overflow:auto;
  margin:0 0 1em;
  padding:1em;
}
blockquote,
blockquote .line-number {
  /* Ukuran line-height antara teks di dalam tag <blockquote> dan <span class="line-number"> harus sama! */
  font:normal normal 12px/14px "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
  display:block;
  white-space:pre;
}

blockquote .line-number {
  float:left;
  margin:-1em 1em -1em -1em;
  text-align:right;
  background-color:#f1f1f1;
  color:#acacac;
  padding:1em .2em 1em .2em;
  border-right:1px solid #e0e0e0;
}
blockquote br {
display:none;
}

blockquote .line-number span {
  display:block;
  padding:0 .7em 0 1em;
}

blockquote .cl {
  display:block;
  clear:both;
} 

Simpan kode barikut ini di atas </body>

 <script type='text/javascript'>
//<![CDATA[
var pre = document.getElementsByTagName('blockquote'),
    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> 

Bagaimana? Cukup mudah bukan Cara Membuat Penomoran Otomatis Pada Tag Blockquote, Jika ada masalah silahkan ajukan disini. Sebisa mungkin saya akan membantu. :) Semoga bermanfaat dan Sampai Jumpa.

Source: http://blog.kangismet.net/2013/10/membuat-penomoran-otomatis-pada-tag-blockquote.html