Membuat Seleksi Otomatis Pada Tag Blockquote - Bagi sahabat yang suka berbagi tutorial, biasanya membagikan kode-kode yang suka dicopy. Standarnya penggunaan kode itu pada tag code atau tag pre. Akan tetapi setelah saya mengunjungi blog sahabat, tidak sedikit menggunakan blockquote untuk berbagi kode.seleksi otomatis pada tag blockquote

Untuk mempermudah mengcopy code yang dibagikan, sebaiknya menggunakan seleksi otomatis. Artinya, dengan hanya mengklik atau klik ganda (double click) kode tersebut akan terseleksi semua, tinggal melakukan Ctrl+C atau klik kanan kemudian Copy.

blockquote

Sebagai contoh penerapan seleksi otomatis ini, saya gunakan pada kode yang saya bagikan, sobat tinggal klik ganda, maka semua kode akan terseleksi. Saya menggunakan tag pre untuk semua kode yang saya bagikan. Bagi sobat yang menggunakan tag blockquote, untuk menerapkan seleksi otomatis ini, simpan kode dibawah ini sebelum </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>
Sebetulnya script di atas tidak mutlak untuk tag blockquote, karena selektornya berupa blockquote maka hanya berlaku untuk tag blockquote.

Editing Script


Seperti saya jelaskan sebelumnya, script di atas berlaku untuk tag apapun, apabila sobat ingin menerapkan untuk tag pre, maka ganti blockquote pada baris ke 2, menjadi pre.

Pada script di atas, saya menggunakan klik ganda (double click) untuk menerapkan satu kali klik langsung terseleksi, sobat tinggal mengganti dblclick menjadi click.

Semoga bermanfaat...

111 komentar

Bisa nggak Kang untuk Syntax Highlighter?

Balas

saya sudah pasang kang, tapi masalahnya auto selection pada komentar gk jalan kang. Gimana solusinya kang ?. Sya coba tambah kode eksekusinya tapi masih gk jalan kang.. :)

Mohon bantuannya kang.. :)

Balas

bisa mas, blockquote ganti sama pre. :)

Balas

Walah mayan buat nambahin aksesoris wkwk :D ane punya diklik kluar jin gan :p

Balas

Mas Ivan punya pas sy klik bukannya Jin yg kluar malahan Tuyul :)

Balas

oh jadi begitu caranya kang, maklum saya masih belajar jadi belum tahu apa-apa, hatur thnkyu kang infonya.

Balas

Saya juga cari2 selama ini dari dapur sampe atas loteng...eee ternyata ada disini

Balas

owh gitu ya kang, simpan dulu ah scriptnya :D

Balas

Saya pasang kapan-kapan Kang... hehe coz belum kepikiran buat bikin tutorial... saya mah jadi penikmat saja sambil dikit-dikit belajar ... :D

Balas

Klik punya ku aja keluarnya duit ...

Balas

saya belum paham sangat gan hehe
maklum newbie :D

Balas

kalau punya sya di klik langsung keluar berlian ...

Balas

bisa sob... betul kata Om Saeful :)

Balas

coba posisi script dipindah, saya liat dkt highlight.js... coba persid diatas </body>

Balas

ini juga baru ketemu di dompet =D

Balas

wkwkwkw.... gini nih kalau puasa.. pada error
ayo dibantu semua.. sim-salabim jadi apaaaa

Balas

silahkan sob.. awas kelupaan :)

Balas

kalo satu script untuk blockquot sama pre bisa apa enggak...??

Balas

jangan dipaksakan sob... ngeblog itu harus sesuai hobby

Balas

suka merendah gitu ah....

Balas

Ini biasanya harus wajib dipakai untuk yang tutorial berbagi kode script Kang,mengikuti terus ini saya Kang tutorialnya disini :)

Balas

sekarang udah bisa kang, ternyata ngaruh tempat penyimpanan juga. :)

Lumayan nambah ilmu baru deui. :)

Balas

saya belum tau cara menyatukannya sob... xixixix paling di double

Balas

iya sob... apalagi kodenya panjang2 :)

Balas

Thanks Kang Infonya.. Simpan dulu Scriptnya kang, nanti di coba deh :D

Balas

saya sudah terapkan dan bekerja dengan baik kang,hatur nuhun sekarang jadi ga repot lagi kalo mau copy paste kode script

Balas

Bisa nggak Kang kode js di atas di save di notepad baru disimpan lagi di google drive trus penerapannya kayak penerapan kode url replace pada postingan sebelumnya. Tinggal link file js nya aja yg dipasang..??

Balas

Sip kang ... disimpen dulu scriptnya...biar ga bingung carinya nanti hehehe...

Balas

Iya Kang ... Dari dulu memang sudah hobby ngeblog ... makanya saya ingin mendalami lagi Kang .... :D

Balas

entar di post ya kalo uda tau

Balas

congrats sob... saya udah liat diblognya :)

Balas

bisa sob, semua file JS bisa disimpan external seperti itu

Balas

mangga kang.. kade hilep muka deui ;)

Balas

bookmark dulu ah kang.. nuhun pisan nyak.. hederna edisi Ramadhan 'Idul Fitri sekarang :D siip deh

Balas

mantapp , ini yang saya tunggu2 .. mau nanya lupa lagi nama nya!! iya itu "seleksi" :D wkwkk

udah mahir javascript nih kang ismet .. ditunggu javascript antik selanjutnya mamang ku :)

Balas

klo memposisikan tulisan " klik ganda untuk seleksi" gimana ya kang, biar di tengah gitu ???

Balas

sekalian sama yang "klik ganda untuk seleksi " nya dong kang :D


belum ngerti simkuring sama yang bepor apter ituu !!! -____-

Balas

maklum kang nungguin adzan masih lama hihi

Balas

perlu saya pasangkan karena saya lebih memilih blockquete daripada syntax
biasa kang kalau udah tue ya pengennya yg cepet-cepet aja hehe

Balas

mhun kang Rian, skantenan nya ? , heheheh :)

Balas

makasih kang udah diterima request tutorial ane :D

Balas

Baca sambil belajar untuk kodenya Kang sambil berusaha untuk mengerti tata pelatakannya. :)

Balas

Blog kang ismet ga hebat ! yang hebat adalah AUTHORNYA ! Thanks kang, komen ane udh back to smula :) Blogger Indonesia yg 1 ini bener bener manteps

Balas

akhirnya keluar juga tutorial ini, saya pikir pake javascript banyak, ternyata cuma simpel :)
Nuhun Kang :)

Balas

saya nyari" ini blum dapet" kang.. udah nyari dikulkas masih aja ga dapet..
akhirnya ketemu disini... :D

Balas

Tutorial dari kangismet selalu terbaik, hehehe...
Ini yang akan menjadi inspirasi tulisan saya tentang desainer template terbaik :D

Balas

saya pake yang biasa aja kang,,,hehe biar greget :D

Balas

tinggal edit psedo elentnya aja, kalau emang pake pseudo element :)

Balas

Kalau kurang pas... edit aja :)
blockquote{position:relative}

blockquote::after {
content:" ";
width:0;
height:0;
opacity:0;
visibility:hidden;
position:absolute !important;
right:13px;
top:-7px;
transition:.3s ease-out;
-webkit-transition:.3s ease-in-out;
-moz-transition:.3s ease-in-out;
border-color:#222 transparent transparent;
border-style:solid;
border-width:6px 6px 0;
}

blockquote::before {
content:" Klik ganda untuk seleksi";
width:117px;
font-size:11px;
font-family:Tahoma,arial,sans-serif;
padding:3px 9px;
opacity:0;
visibility:hidden;
position:absolute;
top:-37px;
right:3px;
transition:.3s ease-out;
-webkit-transition:.3s ease-in-out;
-moz-transition:.3s ease-in-out;
background:#222;
color:#fff;
border-radius:5px;
padding:5px;
}

blockquote:hover::before, blockquote:hover::after {
opacity:.5;
visibility:visible;
}

Balas

hehehe.. tinggal klik nya kang :)

Balas

hehehe... sama2 makasih juga jadi bahan postingan :)

Balas

gampang ko sob.. perlahan2 aja bacanya

Balas

wah... teralu berlebihan sob... biasa aja ko..

Balas

banyak jalan menuju roma sob :)

Balas

kalau di kukas campur sama kolang kaling :)

Balas

wah biasa ja sob... banyak yang lebih baik ko...

Balas

Saya sampai sekarang masih pakai blockquote buat ngasi kode/script..hihihi
Pengen pasang syntax highlighter tapi rada bimbang, karena jarang share tutorial dan semacamnya. :D

Balas

Kalau menonaktifkan link yang disisipkan pada komentar pengunjung gmn, Kang...??

Balas

kunjungi disini http://blog.kangismet.net/2013/05/menghilangkan-link-aktif-pada-komentar.html

Balas

Kang, aku pasang kok ndak keluar yaa tulisan klik gandanya ?? Aku pakai Highlighter.pack.js

Balas

Tapi kan itu menurut orang lain mas, kalau menurutku kangismet yang terbaik :D

Balas

Trims, akan saya coba menggunakannya!

Balas

Kang ismet belajar dimana sih,pinter banget ~_~ pengen deh jadi murid perdana

Balas

makasi kang.
Ijin save dulu kodenya, lain kali mungkin butuh. :D

Balas

permisi kang,, kalo misalkan kode" javascript itu di ringkas masukkin googlecode bisa??
saya sudah coba kok malah ngga mau jalan ya kang ._.
solusi donk? ._.

Balas

Mau Tanya..

Itu Yang Titik" Item Ingilanginnya Gimana... Help !!


[img]http://2.bp.blogspot.com/-vAhVm9WibCk/UfIxXKuF0KI/AAAAAAAAAlg/Nr6AwCGgfv8/s1600/Help+Master.png[/img]

Balas

wah itu menu ya??
cssmu di hidden atau apa? :)
biasanya kalo di hidden/d encrypt jadi gitu :O

tanya ke kang ismet aja untuk lebih jelas ._.

Balas

Iya Itu Menu..

Hidden Magsudnya Gimana.. ??

Balas

bener kata Angwyn... biasanya terjadi karena template di encrypt atau dihilangkan CSS resetnya

Balas

kalau salah ngegabungin, bisa jadi ga jalan sob...

Balas

wkwkwkwk.... hasil dari menyepi di gua :)

Balas

berapa hari kang nyepinya + dimana gua nya ?. Mau nyoba biar pinter kaya kang ismet. wkwkwkwk :)

Balas

oh ya kang, kalau kolom widget bertumpuk juga akibat dari css reset kah ?. :)

Balas

kalau CSS reset, biasanya jadi berjejer ke bawah, kalau bertumpuk biasanya ada CSS yang ngga fix... tapi gatau juga sih.. sotoy aja wkwkwkwkw

Balas

maksudnya berjejer kang, baru tahu itu akibat dari CSS reset.. :). Pantesan cari sana cari sini gk ketemu solusinya.

Balas

Tanya dikit kang. mohon maaf keluar dari topik.
Gimana cara pasang Tag kondisional buat widget Followers kang?
Soalnya di blog saya itu gak ngaruh tiap kali saya pasang tag kondisional pada widget Followers. udh saya pake display:none pada CSS juga gak ngaruh. tetap aja nongol di Homepage.
Tapi kalo buat Widget lain bisa kang.
aneh -_-
Tolong solusinya kang :D

Balas

Saya udah coba terapkan apa yg dijelasin pada halaman itu kemarin tapi nda ada pengaruh apa2 ketika saya coba buat komentar dengan menyisipkan link aktif pada isi komentar saya, Kang makanya saya langsung copot kodenya. Kira2 dmn letak kesalahannya ya..??

Balas

maksudnya ingin dihilangkan di homepage aja? blognya yang mana sob? biar saya liat dulu, di http://stylentz.blogspot.com/ saya tidak menemukan sob...

Balas

akhirnya ketemu disini kang nyari kemana2...

Balas

ijin share tutorial ini dan tutorial" yang bermanffat lain ya kang,tetap ada sumber kok :)

Balas

Wah-Wah...
keren Nih Tipsnya...
Langsung coba ahk..

http://maverickzetta.blogspot.com/2013/07/cheat-line-garis-8-ball-pool.html

Balas

Maunya tampil di Halaman Item aja kang. tpi aneh cmn widget itu gabisa
. Gpp lah kang gajadi saya pasang, udh saya apus widgetnya. :D

Balas

thnks for your article,,,nice blog,,,

Balas

Waduh jarang pake blockquote nih, tapi lumayan lah nambah ilmu mah.
Hatur thankyu kang :)

Balas

kang, kalau background "klik ganda untuk seleksi" itu bisa diubah atau nggak ?

Balas

nih kang sangat membantu ahhehehe kunjungi balik yahh nekodia.blogspot.com

Balas

Kalo blok link aktif, aku pernah pake yang kodenya mas taufik. Alhamdulillah berhasil, coba aja mampir ke dte

Balas

itu untuk yang blockquote sob, yang syntax highlighter ya ga bisa.
Mohong kang kasih kode untuk yang make syntax

Balas

Kang, kalo "Klik ganda untuk seleksi" untuk tag pre gimana.?
udah coba-coba ga jadi-jadi....

Balas

di atas udah ada http://blog.kangismet.net/2013/07/membuat-seleksi-otomatis-pada-tag.html?showComment=1374765495406#c339199794688117444

Balas

kenapa gak dibikin on hover aja biar praktis, digabungin antara pre, code dan quote kang, hhi... :)

Balas

bisa aja.. tapi saya pribadi ga suka kalau select on hover :)
$(function() {
$('pre,code,blockquote').attr('title', 'Klik untuk menyeleksi semua kode!').click(function() {
var refNode = $(this)[0];
if($.browser.msie) {
var range = document.body.createTextRange();
range.moveToElementText(refNode);
range.select();
} else if($.browser.mozilla || $.browser.opera) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(refNode);
selection.removeAllRanges();
selection.addRange(range);
} else if($.browser.safari) {
var selection = window.getSelection();
selection.setBaseAndExtent(refNode, 0, refNode, 1);
}
});
});

Balas

Untuk membuat perintah "Klik ganda untuk seleksi" seperti kang ismet, bagaimana yah ?

*NICE INFONYA" :)

Balas

itu di komentar atas udah ada :)

Balas

cara menambahkan div pada Klik untuk menyeleksi semua kode! bagaimana kang ...?

Balas

maksudnya tooltip yang muncul ketika hover?

Balas

iya kang, tapi yang untuk pre bukan blockquote

Balas

Menarik artikelnya nih Kang ijin simak
Mau tanya Kang, kalau pada script diatas pada baris ke 2, blockquote
kalau di gabung kan, atau di satukan dengan tag pre, bisa gak yah? maksudnya agar bisa berlaku, untuk blockquote, atau untuk Syntax, bisa gak Kang? trima kasih

Balas

kan kalau pengunjung liat blog ga tau supaya terpilih semua kodenya, mohon dibalas ya om. :)

Balas

keren kang ismet. Ini yang ane cari-cari, hehehe :D

Balas

udah di pasang waktu di klik ganda kok gak ngaruh yah kang, apa ada yg salah atau bentrok kode lain.. coba cek di hollabacktexas.blogspot.com makasih kang :D

Balas

wahh itu mah ganti template aja deh ahahah :ngakak:
aha-blogs.blogspot.com hadir memberi info blog |o|

Balas

Poskan Komentar


×
Chat