Membuat Penomoran Otomatis Pada Tag Pre

Setelah sebelumnya sebelum saya share cara membuat judul pada masing-masing tag pre, kali ini saya mau berbagi tentang cara bagaimana memberi urutan nomor pada tag pre yang bisa langsung hanya dengan menambahkan CSS saja dan sedikit penambahkan kode HTML pada elemen tag pre. Untuk bagaimana hasilnya silahkan di lihat di blog ini.

Kita langsung ke topik pembahasan tentang trik yang akan kita lakukan, sedikit manfaat dari nomor tag pre ini adalah berguna untuk lebih mudah jika pengunjung ingin hanya mengutip sebagian kode saja pada baris nomor tertentu dan juga berfungsi untuk merapikan tampilan artikel blog.

Membuat Penomoran Otomatis Pada Tag Pre sangat sederhana sekali, silahkan buka editor template bloggernya seperti biasa dan cari kode </style> atau kode tag pembungkus CSS template blog Anda.
Jika sudah letakkan css di bawah ini di atas kode </style>.

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

Untuk memasukkannya di dalam posting silahkan gunakan tag pre Anda sebelumnya dengan menambahkan kode HTML di bawah ini :

class="line-number"

Sehingga jadi seperti kode HTML seperti di bawah 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>

Buat Anda yang belum memiliki tag pre silahkan buat terlebih dahulu.

Demikian yang bisa saya tulis artikel cara membuat penomoran otomatis pada tag pre, semoga berguna dan berhasil...

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250