Cara Membuat Seleksi Otomatis Pada Blockquote dan Syntax Highlighter


0

Halo-halo, kemarin kan sudah ada artikel tantang cara measang syntax highlighter (baca: Cara Memasang Syntax Highlighter di Blogger), bagi yang sudah memasang syntax highlighter tersebut dan ingin membuat script yang ada di dalam syntax highlighter (tag pre) terseleksi otomatis hanya dengan double-click, cara ini saya dapatkan dari blog kang ismet dengan menggunakan langkah-langkah berikut :

Langkah 1 :

Pertama-tama kamu harus masuk dulu ke halaman Template terlebih dahulu, lalu masuk ke menu Edit HTML, jika bingung perhatikan gambar berikut :

Edit HTML

Setelah itu cari kode </body>. Setelah ketemu, letakkan kode javascript dibawah ini diatas kode </body> tadi.

<!-- Seleksi Otomatis Pada Tag Pre -->
<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&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>
<!-- Seleksi Otomatis Pada Tag Pre End -->

Jika sudah, silahkan save atau simpan template kamu dan coba di tes dengan cara klik dua kali (double-click) pada syntax higjlighternya. Jika dengan cara double-click semua kode dalam syntax highlighter terblok semua itu tandanya berhasil.

Lalu bagaimana untuk penerapan seleksi otomatis di blockquote? Langkah-langkahnya sama, kita hanya perlu merubah sedikit pada kode javascript tadi. Yaitu rubah tulisan yang diberi label tadi (pre) tadi dan ganti dengan blockquote. Atau jika tidak ingin repot silahkan copy kode barikut ini

<!-- Seleksi Otomatis Pada Tag Pre -->
<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>
<!-- Seleksi Otomatis Pada Tag Pre End -->

Mudah bukan? semoga artikel ini bermanfaat untuk kamu semua. Terimakasih.


Like it? Share with your friends!

0

What's Your Reaction?

Bangga Bangga
0
Bangga
Keren Keren
0
Keren
Lucu Lucu
0
Lucu
Sedih Sedih
0
Sedih
Wow Wow
0
Wow
Marah Marah
0
Marah
Takut Takut
0
Takut

Legend

Pecinta ayam goreng, tempe penyet dan klepon.

Comments

comments

6 Comments

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format