Membuat Seleksi Otomatis pada Tag Pre

Seleksi otomatis pada tag pre ini berguna untuk menyeleksi atau mem-blok kode yang terdapat pada tag pre. Seleksi ini memudahkan anda untuk mem-blok kode yang terdapat pada tag pre hanya dengan sekali klik ataupun dua kali klik dengan menggunakan tambahan Javascript. Hal ini sangat berguna untuk menyeleksi atau mem-blok kode tanpa harus mem-blok kode secara manual, jadi cara ini sangat pas untuk blog anda dengan niche tutorial blog ataupun blog dengan kode-code yang banyak.

1. Buka dasbor blog anda
2. Pilih Template -- Edit HTML
3. Lalu cari kode </body>
4. Setelah itu letakkan kode berikut tepat di atas kode pada no. 3
Hanya satu klik gunakan kode di bawah ini

<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;click&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

Dengan dua kali klik gunakan kode di bawah ini

<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

5. Setelah itu tinggal Simpan Template

Sekian artikel ini saya buat untuk melanjutkan artikel yang lampau yaitu Membuat Tag Pre Keren di Blog.