Seleksi Otomatis pada Pre dan Tag Blockquote di Blogger

Kesalahan yang Dilakukan oleh Seorang Blogger Pemula
Memasang Tag Pre dengan Tema Vanila di Blog
Membuat Widget Breaking News di Blog

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.

farhanweb.com 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.

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

[codegroup]
[js tab=”Untuk 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>
[/js]

[js tab=”Untuk 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>
[/js]
[/codegroup]

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

COMMENTS

WORDPRESS: 2
  • comment-avatar

    mas cara membuat catatan biru ini bagaimana ya mas mohon minta tutoril.nya saya…
    terima kasih

  • comment-avatar

    /* code blockquote */
    pre,code{font-family:"Courier New",Courier,Monospace;color:inherit;
    }
    pre{white-space:pre;word-wrap:normal;overflow:auto;
    }
    blockquote{background:#f0f0f0;margin-left:2em;margin-right:2em;padding:1em 1em;font-style:italic;font-size:110%;
    }
    blockquote:before {
    content: "f10d";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    padding-right:4px;
    color:#666;
    }