Cara Membuat Auto Number Pada Tag Pre

Cara Membuat Auto Number Pada Tag Pre - Hai sobat blogger, kali ini admin akan memberikan sedikit tutorial mengenai mempercantik tampilan syntax highlighter yang sedang kalian gunakan, yaitu dengan memberikan nomor urutan pada setiap baris di tag pre.

Pada artikel kali ini, tidak disertakan demo atau result. Saya yakin kalian sudah mengetahui dan pernah melihat syntax highlighter menggunakan pengurutan nomor pada setiap barisnya, seperti pada gambar diatas.

Langsung saja menuju ke tutorial cara pemasangannya, agar tidak terlalu lama baca artikel yang lama-kelamaan bisa membuat kalian bosan.

Silahkan backup template yang akan kalian edit, untuk berjaga-jaga, jika ada kesalahan dalam pengeditan.

Cara Memasang Auto Number Pada Tag Pre

1. Masuk ke akun Blogger kalian.

2. Silahkan menuju ke Template > Edit HTML.

3. letakkan CSS dibawah ini, sebelum kode </style> atau ]]></b:skin>

pre.line-number {background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU3P4vmA9wb0TBfstPvJGmbdwQerf9fNMWcFZsmvoTq9-DAcAsSKFM6I7j7V84eCkAoskvE1AafJB9ypxc98qNpZedRqLNesI4B0-DE8K4pPj6ZJO5kCnC5EyyLB6ILSYwgdRKdCidIGI/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.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}

4. Simpan Perubahan.

Perhatikan!!
Jika kalian ingin memasukkannya kedalam postingan atau artikel, silahkan gunakan tag pre sebelumnya tetapi dengan menambahkan sedikit kode dibawah ini.

class="line-number"

Sehingga akan menjadi rangkaian tag pre seperti dibawah ini.

<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.......</code></pre>

Tinggal kalian melihat hasilnya, sebelum kalian mengedit artikel lebih dalam, ada baiknya jika selalu pratinjau, apakah sudah ada hasilnya atau belum.

Sekian dulu artikel dari Cara Membuat Auto Number Pada Tag Pre, jika ada pertanyaan silahkan tanyakan melalui kolom komentar dibawah artikel ini.
Terima Kasih