Membuat Seleksi Otomatis Pada Tag Blockquote dan Pre

Cara Membuat Seleksi Otomatis Pada Tag Blockquote dan Pre

Cara Membuat Seleksi Otomatis Pada Tag Blockquote dan Pre - Bagi sahabat yang suka berbagi tutorial, biasanya membagikan kode-kode yang suka dicopy. Standarnya penggunaan kode itu pada tag code atau tag pre. Akan tetapi setelah saya mengunjungi blog sahabat, tidak sedikit menggunakan blockquote untuk berbagi kode, itu dikarenakan blockquote lebih mudah digunakan dan tidak ribet, tinggal block > klik ikon "quote" mudah kan?, contoh penggunaan tag pre:

<pre>Sekarang aku makin sayang sama kamu</pre>

Untuk mempermudah mengcopy code yang dibagikan, sebaiknya menggunakan seleksi otomatis. Artinya, dengan hanya mengklik atau klik ganda (double click) kode tersebut akan terseleksi semua, tinggal melakukan Ctrl+C atau klik kanan kemudian Copy.

Cara Membuat Seleksi Otomatis Pada Tag Blockquote dan Pre
Untuk menerapkan seleksi otomatis pada tag blockquote:
1. Login ke Blogger
2. Dashboar > klik template > edit HTML
3. Simpan kode dibawah ini sebelum </body>


<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 menerapkan seleksi otomatis pada tag pre:
Ikuti langkah ke-1, 2, dan 3 seperti di atas.

<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 klik ganda (double click) untuk menerapkan satu kali klik langsung terseleksi, sobat tinggal mengganti dblclick menjadi click.

6 komentar untuk "Membuat Seleksi Otomatis Pada Tag Blockquote dan Pre"

  1. mantap gan, oh iya sekarang fastest magz sudaha versi 3 tuh..
    tapi masih premium, share dong yg versi 3nya dana pastinya free :)

    BalasHapus
    Balasan
    1. nanti kalo ada waktu saya clone lagi, hehe tapi menurut saya versi 3 nya jelek, bagus bersi 2.2

      Hapus
  2. Mantap gan triknya, jempol :D terima kasih...

    BalasHapus
  3. mantap nih saya coba untuk blog saya ya mas ..

    BalasHapus
  4. thanks infonya mas..
    lagi nyari yang beginian..

    BalasHapus
  5. Its such as you scan my mind! You appear to understand such a lot concerning this, such as you wrote the book in it or one thing. i believe that you simply may do with some pics to drive the message home to a small degree, however apart from that, this is often nice web log. an excellent scan. af26.com

    BalasHapus

Untuk menyisipkan kode, gunakan tag <i rel="code">Kode disini...</i> atau <i rel="pre">Kode disini...</i>
Untuk menyisipkan gambar, gunakan <i rel="image">URL gambar disini...</i>
Untuk menyisipkan catatan, gunakan <b rel="quote">Tulis catatan disini...</b>
Untuk menciptakan efek tebal, gunakan tag <b>Teks anda disini...</b>
Konversi Kode Back to Top

Back to Top