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

  • Background posting berbeda - beda di homepage
    buat sobat yang sedang mencari trik atau cara untuk membuat tampilan posting tampil dengan warna background yang berbeda beda di setiap lebel dan halaman depan blog saja dan suka dengan tampilan seperti ini bisa menggunakan trik mudah berikut ini. caranya pun juga cukup mudah, silahkan buka editor template blog sobat lalu cari kode </head&…
  • jQuery Show Hide Checkboxes
    Kali ini saya akan share Show Hide sederhana menggunakan jQuery Checkboxes value, prinsip kerjannya sama saja dengan jQuery show hide hanya saja berbeda di medianya. trik ini juga sebelumnya pernah saya gunakan untuk membuat show hide emoticon, konversi kode dan halaman OOT di komentar blog saya, jika mungkin anda juga berminat menggunakan jQu…
  • Menu Tab dengan jQuery
    Untuk menghemat tempat, tab view menu sangat efisien untuk solusinya karena Ukuran yang relatif kecil tapi bisa memuat space yang lumayan. kali ini saya akan membagikan cara membuat tab menu, silahkan simak jika anda sedang mencari cara membuatnya. Jika setelah jadi nanti lebar atau tinggi menu tab ini tidak sesuai, silahkan anda sesuaikan se…
  • Show hide related post (perbaharuan)
    Hallo para sobat blogger, masih semangat ngeblog kali ini saya mau share bagaimana cara dan trik membuat show hide pada related post di blog. triknya cukup mudah dan mungkin berguna untuk blog sobat agar tampil lebih ringkas dan beda dari yang lainnya... kira kira nanti hasilnya akan seperti berikut ini jika sobat ingin menerapkan trik s…
  • Membuat current page pada menu navigasi
    Current page atau Current menu adalah sebuah fungsi dimana di posisikan sebagai penanda halaman aktif pada menu navigasi yang sedang di buka atau di kunjungi, misalkan pada link menu navigasi Contact, maka link pada menu navigasi Contact yang akan di beri penanda berbeda dari link menu navigasi lainnya. biar sobat tidak bingung langsung saja l…
  • Memasang total post dan total comment
    Mungkin ini bukan trik baru, tapi saya coba terapakan kembali sedikit trik lama ini untuk menambah keunikan di dalam tampilan blog saya. memasang total post dan total comment bukan hal yang sulit, karena kita hanya perlu menggunakan sedikit script. script yang di gunakan seperti di bawah ini: Script untuk Total Posts <script style="text/j…

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