Membuat Seleksi Otomatis Pada Blockquote & Pre di Blog

Membuat seleksi otomatis pada tag blockquote atau tag pre ini akan mempermudah & mempercepat pengunjung dalam melakukan seleksi & meng-copypaste kode-kode script seperti HTML, CSS, JavaScript, jQuery atau teks lain yang dimuat dalam kode blockquote dan pre.
Hal ini juga sering disebut Click To Select All yakni dengan sekali klik teks yang terdapat di dalam blockquote / pre akan ter-select.

Secara default blogger atau semua template telah memiliki Tag blockquote ini. Namun jika tampilan blockquote blog anda kurang menarik untuk dijadikan kotak menyimpan script, maka anda bisa mengganti kode CSS nya dan mengganti tampilan blockquote menjadi seperti dibawah ini.

Dan untuk cara pemasangan tampilan blockquote seperti ini bisa Anda baca disini Cara Membuat Blockquote Menjadi Kotak Script Dalam Posting Secara Otomatis

Oke, mari kita lanjutkan ke topik posting ini dan simak langkah-langkah Cara Membuat Seleksi Otomatis Pada Tag Blockquote & Pre.

Membuat Seleksi Otomatis Pada Tag Blockquote & Pre

1. Login ke Blogger

2. Pada dashboard blog klik "Template" > "Edit HTML"

3. Simpan kode dibawah ini sebelum </body> 

Untuk seleksi Otomatis Pada Tag Blockquote ini kodenya:

<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;blockquote&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>

Untuk seleksi Otomatis Pada Tag Pre ini kodenya:

<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>

Catatan* :
Pada script di atas, saya menggunakan double click dalam men-seleksi teks.
Untuk menerapkan satu kali klik langsung terseleksi, maka ganti dblclick menjadi click
Membuat Seleksi Otomatis Pada Tag Blockquote & Pre