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

  • Navigation Menu dengan Efek jQuery
    Kali ini saya akan share Menu navigasi blogger, Menu navigasi adalah hal yang di perlukan sebuah blog untuk mengarahkan seorang pengunjung ke halaman tertentu. Menu navigasi yang bagus dengan tampilan yang menarik, tentu itu memberikan nilai plus tersendiri untuk tampilan blog anda sehingga menambah bagus dan cantik. Menu navigasi ini memilik…
  • Membanned spamer di komentar dengan jquery
    Kali ini saya ingin berbagi buat sobat yang udah males dan capek menghapus komentar para spammer, yang satu ini palinf buat suasana jadi males dan menjengkelkan bila hadir di komentar blog kita. jquery ini bisa sobat gunakan untuk menghapus dan membanned para spamer tersebut dengan menghilangkan isi komentar juga link profile mereka agar user …
  • Membuat show hide konversi kode dan emoticon
    Salam buat agan agin sobat blogger yang suka utak atik template, kali ini saya mau share cara membuat show hide konversi kode dan emoticon pada komentar blogger bagi anda yang sedang mencari trik ini silahkan saja untuk di simak. pertama buka editor template blogger lalu tambahkan css di bawah ini .box-konvert-kode-db { width:100%; …
  • Memperbaiki ukuran thumbnail homepage
    buat sobat blogger yang mengalami masalah pada thumbnail/gambar Post.snippet dan post.thumbnail yang kurang jelas dan tidak sesuai ukuran pada tampilan posting static page/homepage, bisa menggunakan trik ini agar tampilan gambarnya bisa terlihat jelas dan sesuai. caranya cukup mudah dan gak ribet ikuti saja trik berikut perhatikan kode scrip…
  • Memasang kode, gambar dan video di komentar
    Buat agan yang bingung dengan judul di atas sebenarnya adalah judul tentang cara menyisipkan dan mengijinkan kode, gambar dan video di komentar blogger. jadi kali ini kita akan membahas hal tersebut, karena saya pernah berkunjung ke sebuah blog yang memasang tool konversi kode tapi tidak memasang javascript ini jadi percuma juga menggunakan to…
  • Pencarian dengan tombol bersihkan
    Salah satu yang membuat blog kita menjadi user friendly adalah dengan adanya kotak pencarian, Kotak pencarian ini sangat penting untuk memudahkan pengunjung menjelajahi blog Anda atau mencari artikel lainnya di blog Anda. Fungsi kotak pencarian untuk saya sendiri adalah untuk mempermudah mencari posting yang akan saya tambahkan sebagai link i…

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