Membuat Seleksi Otomatis pada Tag Pre dan Tag Blockquote

Membuat Seleksi Otomatis pada Tag Pre dan Tag Blockquote - Untuk mempermudah dalam membagikan tutorial dengan kode-kode script anda bisa menggunakan syntax highlighter,bagi anda yang belum memasangnya silahkan baca tutorial sebelumnya tentang Memasang Syntax Highlighter pada blogger.
Tag Pre
Tag Blockquote

Pada kesempatan kali ini saya hanya akan membagikan bagaimana cara menyeleksi kode yang ada di dalamnya. Selain menggunakan Tag Pre dalam membagikan kode-kode tersebut anda juga bisa menggunakan Tag Blockquote,sebagai contoh bisa anda lihat pada gambar diatas.

Untuk membuatnya silahkan simpan kode JavaScript di ini ini diats kode  </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>

Edit Script

Kode diatas berlaku untuk tag apapun apabila anda ingin menggunakan tag pre, maka ganti blockquote yang di garis bawah diatas dengan pre

Untuk menyeleksi kode di atas saya menggunakan dbclick itu artinya ketika diklik ganda maka kode yang ada di dalamnya akan terseleksi otomatis,jika ingin hanya satu klik saja tinggal ganti dbclick dengan click

Semoga penjelasan diatas bisa bermanfaat  :D

Resource: http://blog.kangismet.net/2013/07/membuat-seleksi-otomatis-pada-tag.html

60 Responses to Membuat Seleksi Otomatis pada Tag Pre dan Tag Blockquote

  1. Great tutorial, another new thing for me to learn. Thanks!

    ReplyDelete
    Replies
    1. iya mbak kiki ada bule nih,, tadinya iseng2 aja komentar di blognya eh ternyata komentar balik juga :D

      Delete
  2. Jadi ngak perlu repot2 lagi ngeblok ya Maz...
    Keren :)

    ReplyDelete
  3. sangta jelas ,,sob..makasi tlah berbagi...mw dpraktek dulu..:)

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. Replies
    1. Agar memudahkan yang lagi nyari tutor untuk pasang JS maupun CSS :)

      Delete
    2. Tinggal klik sudah terseleksi semua, dan semua senang hehe :)

      Delete
    3. saya juga ikut senang mas ,hihi

      Delete
  6. lebih cepat buat seleksi yang diinginkan ya

    ReplyDelete
  7. ooo ini yang bloquote , baru tau bng, walaupun pernah pake :v

    ReplyDelete
    Replies
    1. hehe, terkadang bahasanya yang berbeda mas, walaupun kita pernah melihat atau mencobanya :D

      Delete
  8. Syntrax highlighter memang lebih keren keliatannya...tapi saya lagi gencar2nya meminimalisir javascript dan gambar agar blog lebih ringan dan cepat mas...karena sya lebih suka blog cepat...jd saya pakai blockquote saja

    ReplyDelete
    Replies
    1. Kalau suka yang fastloading pakai template yang simpel mas :)
      Gak usah neko" mempercantik tampilan,kan yang penting fast hehe :D

      Delete
    2. @Nyzam yang penting pembaca memahai apa yang kita berikan, entah itu pakai tag pre atau blockquote :) jadi pilih yang baiknya saja menurut kita :D
      @prisma : mempercantik juga perlu loh mas prisma biar pengunjung juga betah,hehe

      Delete
    3. Tapi kalau semua pengennya serba cantik kecepatan tetap jadi resikonya kan =D

      Delete
    4. iya juga c tapi meminimalisir javascript dan gambar pilihan tepat :D

      Delete
    5. Harus pintar-pintar mengatur saja ;)

      Delete
  9. wah keren juga nih kalau ada fitur seleksi otomatis nya. bisa dicoba nih tutorialnya ;)

    ReplyDelete
    Replies
    1. silahkam mbak ririn, bisa dan mudah kok,hehe :D

      Delete
  10. Kurang ngerti yang beginian hehe :D

    ReplyDelete
    Replies
    1. sabar nanti juga akan tahu kok kalau di pelajari dikit2 :D

      Delete
    2. Seperti saya juga, dulu tidak tahu apa" sekarang sudah lumayan mengerti :)

      Delete
    3. Tidak mas, masih sangat jauh dari mahir :)

      Delete
    4. namanya juga kode script tidak 100% akan hafal :D

      Delete
  11. tipsnya keren nih, bisa langsung coba ah :D

    ReplyDelete
  12. mantap sob tutorialnya. izin nyimak ya sob. terimakasih atas share nya sob. sangat berguna

    ReplyDelete
    Replies
    1. silahakn mas bayu, dan makasih kembali atas komentarnya :)

      Delete
  13. wah boleh juga nih dicoba untuk blog saya. kebetulan saya sering pasang kode script di postingan

    ReplyDelete
  14. cara merubah warna nya gimana? kok diblog saya bewarna abu abu, mohon bantuannya :)

    ReplyDelete
    Replies
    1. warna apa nih mas, diblog mana biar saya lihat

      Delete
    2. mungkin dia pengen seperti tag pre itu yang vanilla :D

      Delete
  15. langsung di tancap gan di template ane nice info sob :)

    ReplyDelete

Note:
► Silahkan Berkomentar Sesuai Tema.✔
► No LINK. SPAM & PROMOSI ✘
► Segala Komentar Yang Masuk tidak Saya Moderasi ✔
► Dilarang Promosi (kecuali Ijin Admin ) ✔
► Link Hidup = Hapus.✔