Yaitu cara memberi urutan nomor pada tag pre yang bisa langsung hanya dengan menambahkan css saja dan sedikit penambahan kode html pada elemen tag pre.
Cara Membuat Ururan Penomoran Pada Posting
Buka editor template bloggernya seperti biasa dan cari kode </style> atau kode tag pembungkus css template blog sobat
jika sudah letakkan css di bawah ini di atas kode </style>
pre.line-number{background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZSL29bZ3RiYy6JeagOoKHOeJ3Mgj8YjvSt7wzJz6qa2s_UxYpQn_V_NULCzwEJyrbgyiS7JWL7Y-iWaWQT4aNy82JYniK6J1WEWUKBUPc9ENsGjD9neLNd36oOmSnnx4rpQmPI048BGA/s1600/new-line-number.png)no-repeat top left;padding-left:54px;border-left:none;}
pre.line-number:after{content:"";width:35px;height:8px;background-color:#39424e;bottom:0;
left:0;position:absolute;}
pre[data-codetype="CSS"]{border-left-color:#5fbbba;}
pre[data-codetype="HTML"]{border-left-color:#4fc1eb;}
pre[data-codetype="JavaScript"]{border-left-color:#ff6c60;}
pre[data-codetype="JQuery"]{border-left-color:#99c262}
pre.line-number[data-codetype]:before {content:attr(data-codetype);display:block;
margin:-11px -13px 10px -54px;padding:8px 12px;font-family:Oswald,Arial,Sans-serif;font-size:14px;
text-transform:uppercase;background-color:#41749f;color:white;}
pre.line-number[data-codetype="CSS"]:before{background-color:#a9d86e;}
pre.line-number[data-codetype="HTML"]:before{background-color:#4fc1eb;}
pre.line-number[data-codetype="JavaScript"]:before{background-color:#ff6c60;}
pre.line-number[data-codetype="JQuery"]:before{background-color:#99c262;}
pre .line-number {float:left;margin:0 1em 0 -1em;color:#61686d;background-color:#39424e;
text-align:right;min-width:2.5em;padding-right:4px;}
pre .line-number {float:left;margin:0 1em 0 -1em;color:#61686d;background-color:#39424e;
text-align:right;min-width:2.5em;padding-right:4px;}
Kode Tag digunakan:
class="line-number"
Contoh Penggunaan kode, isi pada tulis kode sesuai kode posting:
<pre class="line-number" data-codetype="CSS"><code>.....tulis kode css......</code></pre>
<pre class="line-number" data-codetype="HTML"><code>....tulis kode html.......</code></pre>
<pre class="line-number" data-codetype="JavaScript"><code>....tulis kode javascript.......</code></pre>
<pre class="line-number" data-codetype="JQuery"><code>....tulis kode jquery.......
Selesai.
Catatan: Boleh ditambah script:
<script type='text/javascript'>
(function() {
var pre = document.getElementsByTagName('pre'),
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>