Tuesday, December 8, 2015

Cara Seleksi/Blok Otomatis Pada Tag Pre di Blog

Cara Seleksi Otomatis Pada Tag Pre di Blog

Assalamu'alaikum warohmatullahi wabarokatu. Baiklah dalam posting kali ini saya akan membahas mengenai cara agar kode (baik itu kode HTML, CSS, JavaScript, maupun PMP) yang dituliskan di blog bisa terseleksi (atau dengan kata lain diblok) otomatis ketika di klik dua kali (bisa juga diatur pada klik 3x atau 1x). Tetapi sebelumnya sebagai sebuah pengantar saya akan menjelaskan tentang tag pre terlebih dahulu.

Apakah teman-teman sudah mengenal tak pre? Jadi seperti ini, tag pre merupakan tag HTML sebagai penanda bahwa di dalamnya berisi teks dengan jenis kode tetapi tidak untuk dijalankan, baik itu untuk menuliskan kode HTML, CSS, JavaScript maupun PHP, di halaman posting blog tanpa diartikan oleh mesin. Untuk membuat tag pre berwarna (highlight pre tag) silahkan baca Syntax Highlighter untuk Kode HTML/JS/CSS di Blogger.

Nah, bagaimana, teman-teman sudah mengetahui tentang tag pre? Kalau belum di bawah ini adalah sebuah kode JavaScript yang ditulis menggunakan tag pre, sehingga hasilnya tertulis dengan font tertentu yang membuatnya nampak seperti kode. Baiklah langsung saja saya pertama-tama buka dashboard Blogger teman-teman, buka Template > Edit HTML. Tambahkan kode berikut dibawah </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>

Perhatikan kode diatas, pada bagian blockquote dapat teman-teman ganti sesuai dengan tag apa yang anda inginkan. Misalnya teman-teman ingin agar teks dalam tag blockquote terseleksi otomatis ketika di klik dua kali, silahkan ganti pre menjadi blockquote. Namun teman-teman juga bisa menggantinya selain pre dan blockquote, terserah apapun yang anda inginkan. Selain itu teman-teman juga bisa mengganti bukan hanya klik dua kali tetapi bisa juga hanya dengan satu kali klik langsung terseleksi otomatis. Cukup ganti dblclick menjadi click.

Mungkin cukup sekian yang dapat saya bagikan kepada teman-teman, semoga saja bisa bermanfaat, ohiya kalau bisa silakan tinggalkan jejak teman-teman pada blog ini dengan memberikan komentar baik itu berupa saran, kritik, pujian (juga tidak apa-apa) atau mungkin salam perkenalan, sebab tak kenal maka tak sayang, sudah kenal belum juga disayang heheh, jadi ngelantur, baiklah, sampai jumpa di posting saya selanjutnya.
Disqus Comments