Monday, 17 March 2014

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

58 comments

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

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

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

This comment has been removed by the author.

Mantep, jadi lebih efisien :)

lebih cepat buat seleksi yang diinginkan ya

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

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

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

Kurang ngerti yang beginian hehe :D

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

tipsnya keren nih, bisa langsung coba ah :D

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

iya bener mas heri, main klik aja =D

hehe, terkadang bahasanya yang berbeda mas, walaupun kita pernah melihat atau mencobanya :D

@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

bisa silahkan diterapin :)

silahkam mbak ririn, bisa dan mudah kok,hehe :D

sabar nanti juga akan tahu kok kalau di pelajari dikit2 :D

silahakn mas bayu, dan makasih kembali atas komentarnya :)

Agar memudahkan yang lagi nyari tutor untuk pasang JS maupun CSS :)

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

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

Tidak mas, masih sangat jauh dari mahir :)

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

ada bule ya mas :D

namanya juga kode script tidak 100% akan hafal :D

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

Tinggal klik sudah terseleksi semua, dan semua senang hehe :)

Harus pintar-pintar mengatur saja ;)

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

saya juga ikut senang mas ,hihi

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

warna apa nih mas, diblog mana biar saya lihat

mungkin dia pengen seperti tag pre itu yang vanilla :D

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


EmoticonEmoticon