Membuat Penomoran Otomatis Pada Tag Blockquote

Membuat Penomoran Otomatis Pada Tag Blockquote - Banyak diantara rekan blogger memakai tag blockquote untuk menyebarkan kode. Walaupun bahwasanya aku lebih menganjurkan penggunaan tag pre dibanding blockquote.

Bagi teman yang masih setia dengan penggunaan blockquote, aku coba menciptakan penomoran otomatis pada Blockquote. CSS nya aku modifikasi dari tutorial DTE dalam 'membuat penomoran otomatis pada tag PRE'.

Simpan isyarat 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 isyarat 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>

Semoga bermanfaat.

Tweet

Subscribe to receive free email updates: