Sabtu, 15 Oktober 2016

Memasang Seleksi Otomatis pada Tag Pre dan Tag Blockquote di Blogger

Tags

Membuat seleksi otomatis pada tag pre dan tag blockquote di blog ini akan mempermudah dan mempercepat pengunjung blog dalam melakukan seleksi dan meng-copypaste kode-kode script seperti CSS, HTML,  jQuery, JavaScript maupun teks-teks lain yang dimuat dalam tag pre atau tag blockquote.

Memasang Seleksi Otomatis pada Tag Pre dan Tag Blockquote di Blogger

Hal ini juga sering disebut Click To Select All (klik untuk pilih semua) yakni dengan sekali klik teks yang terdapat di pada tag pre atau tag blockquote akan ter-select.

Secara default blogger atau semua template untuk blogger sudah memiliki Tag blockquote. 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.

Coming Soon:
-Membuat Blockquote Menjadi Kotak Script Dalam Posting Secara Otomatis

Seleksi Otomatis pada Tag Pre dan Tag Blockquote


1. Login Blogger

2. Template - Edit HTML

3. Simpan kode di bawah ini sebelum Tag </body>

Untuk seleksi otomatis Tag Blockquote
<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 Tag Pre
<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>

Pada script di atas, saya menggunakan double click untuk seleksi teks secara otomatis.
Untuk menerapkan satu kali klik langsung terseleksi, maka hanya ganti dblclick menjadi click

Selated Post