Blogging, Search Engine Optimization, Internet, Template, Widget hingga Monetize Blog.

Menerapkan Seleksi Otomatis pada Tag Pre dan Blockquote

Terdapat berbagai tag untuk menunjang kebutuhan penyajian konten di dalam posting. Misalnya konten yang berisi sebuah kode atau script, umumnya digunakan tag pre atau tag code dalam menyajikan konten tersebut. Namun tidak sedikit juga sahabat Blogger yang menggunakan tag blockquote. Sebaiknya terlebih dahulu kamu mengetahui apa itu tag pre, blockquote dan fungsinya agar dapat memilih tag mana yang lebih tepat dan cocok buat kamu dalam menyajikan script.

Dalam artikel sebelumnya saya telah membahas mengenai cara memberikan efek SyntaxHighlighter (pada tag pre) yang akan membuat perbedaan warna pada script yang disajikan. Dan pada kesempatan kali ini kita akan membahas cara lainnya dalam hal memberi kemudahan pada pengunjung saat mengakses konten yang berupa script yaitu dengan menerapkan seleksi otomatis.

Seleksi Otomatis

Saat kita membagikan script yang teramat panjang di dalam artikel, pengunjung akan sedikit kerepotan ketika hendak menyalin script tersebut. Namun dengan diterapkannya seleksi otomatis, pengunjung dapat menyalin seluruh script hanya dengan beberapa sentuhan. Berbeda dengan syntaxhighlighter, seleksi otomatis ini mudah untuk di modifikasi agar dapat diterapkan pada beberapa tag.

Menerapkan Seleksi Otomatis pada Penyajian Script

  • Silakan masuk ke dashboard Blogger.
  • Kemudian buka halaman Template dan klik Edit HTML.
  • Carilah kode </body> kemudian letakan script berikut di atas kode </body>.
<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>
  • Terakhir silakan Simpan Template.

Edit Script

  • Script akan terseleksi otomatis saat dilakukan dobel klik. Jika kamu ingin menyeleksi script hanya dengan satu kali klik, silakan ubah kode dblclick menjadi click.
  • Seleksi otomatis terpasang pada tag pre. Jika kamu ingin memasangnya pada tag blockquote atau tag code, silakan ubah kode pre dengan kode blockquote atau code.
  • Seleski otomatis hanya terpasang pada satu tag. Jika kamu ingin memasangnya pada tiga tag (pre, blockquote dan code), kamu bisa tiga kali memasang script di atas.

Artikel terkait : Menerapkan Seleksi Otomatis pada Tag Pre dan Blockquote

Artikel B-Tutorial Lainnya :

2 komentar:

  1. sy sudah menggunakannya di blog saya dan sukses.
    tapi masalahnya pada saat di paste hasilnya koq menjadi satu baru memanjang pdahal ada beberapa baris, tidak seperti di blog sobat kalo di paste hasilnya sesuai berapa baris yang dicopy.. mohn bantuannya sob, kira2 bentrok sama apa ya ?
    blog sy http://hanyalah[.]com

    ReplyDelete
    Replies
    1. Saya telah mengunjungi blog sobat dan mencoba seleksi otomatis nya normal sob..

      Delete

Copyright © 2014-2016 B-Tutorial - All Right Reserved