Seleksi otomatis tag blockquote dan pre

Javascript jQuery

Jika blog anda adalah sebuah blog yang terkadang menyuguhkan kutipan/baris tag kode untuk tutorial blogger maka trik ini sangat berguna untuk diterapkan. selain mempermudah pengunjung untuk menyalin kode tag anda berikan trik ini juga mempercepat pengunjung anda menyalin kode tag yang terkadang cukup panjang tanpa harus memblock semua kode secara manual.

Trik ini menggunakan metode javascript dan jQuery yang tergolong mudah, contoh javascript lihat di bawah ini

var pre = document.getElementsByTagName('pre');
for (var i = 0, len = pre.length; i < len; i++) {
    pre[i].onclick = function() {
        autoSelect(this);
    };
}

kode di atas adalah kode javascript gambaran sebelum anda memasang ini, juga sedikit belajar untuk memahami.

Contoh Penggunaan

Parameter pre akan kita gunakan sebagai referensi menuju elemen yang ingin kita seleksi. Misalnya, kita ingin menyeleksi semua teks di dalam elemen yang memiliki ID pre

Membuat Fitur Seleksi Otomatis pada Tag PRE dengan javascript

var pre = document.getElementsByTagName('pre');
for (var i = 0, len = pre.length; i < len; i++) {
    pre[i].onclick = function() {
        autoSelect(this);
    };
}

Membuat Fitur Seleksi Otomatis pada tag PRE dengan jQuery

$('pre').on("click", function() {
    autoSelect(this);
});

Sedangkan dalam eksekusi perintah bila menggunakan doble-click baru ke seleksi, javascriptnya seperti berikut

pre[i].ondblclick = function() {
    autoSelect(this);
};

atau

$('pre').on("dblclick", function() {
    autoSelect(this);
});

untuk blockquote silahkan lihat kode berikut ini

var blockq = document.getElementsByTagName('blockquote');
for (var i = 0, len = blockq.length; i < len; i++) {
    blockq[i].onclick = function() {
        autoSelect(this);
    };
}

atau

$(document).ready(function() {
  $('blockquote').on("click", function() {
    autoSelect(this);
  });
});

Ganti tag elemen PRE dengan blockquote jika anda ingin yang di proses adalah elemen blockquote, Semua contoh di atas hanya gambaran saja, sekarang kita akan menerapkan semua yang saya gambarkan di atas pada blogger.

1. Login ke akun Blogger anda
2. Cari kode tag penutup </body> di HTML template anda
3. Jika sudah ditemukan, pastekan kode di bawah ini diatasnya

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

4. Simpan perubahan template anda dan buka salah satu posting yang memiliki baris kode dan coba klik ganda.

Kode di atas mencakup elemen PRE jika anda ingin menerapkannya dalan elemen quote ganti saja yang saya beri warna dengan blockquote.

Semoga berguna.....

Artikel Terkait

  • Daftar Isi Blog Tampilan Dinamis dengan jQuery
    Jika sebelumnya kita membahas daftar isi otomatis jquery navigasi maka sekarang kita coba membuat 'Daftar Isi Blog' dengan tampilan dinamis accroding dapat menggunakan jQuery seperti gambar di atas. Caranya gampang sobat Blogger, ikuti petunjuk berikut: 1. Login ke akun blogger anda 2. Pilih Entri Baru/Buat laman baru atau bisa menambahkan di…
  • Cara membuat efek loading menggunakan ajax
    AJAX bukanlah bahasa pemrograman baru, tapi cara baru bagaimana menggunakan standar yang ada. AJAX adalah seni bertukar data dengan server, dan memperbarui bagian-bagian dari suatu halaman web - tanpa reload seluruh halaman. AJAX dibuat pada tahun 2005 oleh Google, dengan Google Suggest. Google Suggest menggunakan AJAX untuk membuat antarmuka…
  • Modifikasi Alert Emoticon
    Saya telah membuat postingan Emoticon komentar otomatis namun pada postingan dahulu itu tidak ada modifikasi pemberitahuan pada saat emoticon tersebut di klik yang mana tampilannya masih menggunakan tampilan alert default. Demo Dan pada postingan saya kali ini saya akan membagikan cara modifikasi tampilan alertnya sesuka hati kita agar t…
  • Membuat Widget Numpage Navigasi untuk Komentar
    Komentar dengan Navigasi Widget Blogger adalah Widget untuk Komentar Anda. By Default Blogger Komentar ini memiliki navigasi halaman link (Terlama, Lama, Baru dan Terbaru) di bagian atas dan bawah bagian Komentar. Sementara pada pada Blogger yang Upgrade ke Threaded Comment, link pagination ini telah menghilang. Namun, Jika Anda ingin mengguna…
  • Membuat tooltip sederhana menggunakan jQuery
    Sebenarnya ada banyak cara untuk membuat tooltip, tidak hanya satu trik saja yaitu bisa dengan pseudo elements, dengan gaya CSS3 juga dengan javascript. Tooltip merupakan tampilan informasi berupa teks maupun gambar yang tampil saat cursor di arahkan (mouse over) pada sebuah item (biasanya pada link) dalam sebuah website/blog. Untuk kali in…
  • Syntax Highlighter sederhana
    Apa itu Syntax Highlighter? para blogger seringkali berbagi script atau potongan kode untuk pembaca atau siapapun yang membutuhkannya untuk pengembangan dan tampilan web atau blog. Kebanyakan menggunakan blockquote sebagai "bidang pembungkus" dari script atau potongan kode tersebut dan menandai dengan beberapa warna khusus sebagai indikator at…

3 komentar

  1. gan minta script untuk iklan melayang di blogger dung... saya lagi perlu sebelumnya terimakasi :)

    Pertanyaan sobat tidak akan dibalas, pindah ke halaman OOT.

    Jika Anda merasa bahwa ini adalah kesalahan otomatisasi sistem, cukup tuliskan kembali komentar lama Anda dengan format yang sama seperti sebelumnya, namun tanpa adanya kalimat promosi di dalamnya. Terima kasih.

    BalasHapus
Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...