Membuat Penomoran Otomatis Pada Tag Blockquote - Arlina Design
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.

Membuat Penomoran Otomatis Pada Tag 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'.

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 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.

Membuat Penomoran Otomatis Pada Tag Blockquote

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.

Membuat Penomoran Otomatis Pada Tag 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'.

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 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.
Portal Bola Online

Related Post

Portal Bola Online
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Subscribe Our Newsletter

Notifications

Disqus Logo