Snippet, Tips Blogger

Membuat Penomoran Otomatis Pada Tag Blockquote

Banyak diantara rekan blogger menggunakan tag blockquote untuk berbagi kode. Walaupun sebenarnya saya lebih menganjurkan penggunaan tag pre dibanding blockquote.

Bagi sobat yang masih setia dengan penggunaan blockquote, saya coba membuat penomoran otomatis pada Blockquote. CSS nya saya modifikasi dari tutorial DTE dalam ‘membuat penomoran otomatis pada tag PRE’.

Membuat Penomoran Otomatis Pada Tag Blockquote

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{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 ini di atas </body>

<script>
//<![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>

Semoga bermanfaat.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *