Cara Membuat Penomoran Otomatis Pada Tag Blockquote

Hallo kawan-kawan, kali ini Saya mau memberitahu Cara Membuat Penomoran Otomatis Pada Tag Blockquote.

Pada aplikasi untuk membuat kode pasti kita sering lihat kodenya berurutan dengan nomor dari atas sampai ke bawah. Namun, ternyata bukan hanya pada aplikasi saja bisa seperti itu, pada blockquote pun bisa, seperti blockquote yang terdapat pada website blog Kang Ismet. Kata blog Kang Ismet lebih baik menggunakan tag pre dibanding blockquote. Namun, bagi kita yang masih menggunakan blockquote, bisa coba membuat penomoran otomatis pada Blockquote dari blog Kang Ismet berikut ini.

Kita bisa meletakkan kode di bawah 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;
}

Lalu letakkan kode di bawah 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 ? Sudah dicoba kah blockquote dengan penomoran otomatis ? Itulah sedikit informasi mengenai Cara Membuat Penomoran Otomatis Pada Tag Blockquote. Cara tersebut Saya dapat dari blog Kang Ismet, semoga bermanfaat.

The post Cara Membuat Penomoran Otomatis Pada Tag Blockquote appeared first on Kursus Website Terbaik.