Modifikasi Tampilan Tag Blockquote Dengan Penomoran Otomatis

Unknown

CSS

5 Nov 2013

Belum ada komentar

Modifikasi Tampilan Tag Blockquote Dengan Penomoran Otomatis - Setiap kita ingin menyisipkan kode tentunya menggunakan tag blockquote, tapi mungkin diantara visitor beranggapan kalau kode tersebut tidak teratur dan cenderung acak-acakan dalam segi bidang garis. Untuk itu, pada postingan ini akan dipandu membuat penomoran otomatis agar kode terlihat rapih dan mudah dipahami.

DEMO

Simpan kode berikut diatas kode ]]></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;
}

Next, simpan kode berikut diatas kode </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>

Lalu Simpan Template.., oke Semoga bermanfaat..