Seleksi/Blok Otomatis Teks pada Tag Pre di Blogger

Cara Agar Tag Pre di Blog Ter-Blok Otomatis

Halo kawan! Pada posting kali ini saya akan membahas tentang Blogger. Bagi kamu penulis blog mungkin pernah membuat artikel/postingan yang menyertakan kode atau sintaks untuk melengkapi isi postingan. Kode biasanya diselipkan pada postingan dengan teks yang monospace agar pengunjung atau pembaca blog mengetahui bahwa teks tersebut menunjukkan kode atau sebuah sintaks.

Salah satunya yang paling umum yaitu menunjukkan kode HTML, CSS, ataupun kode Javascript. Dengan membuat teks kode pada blog menggunakan font monospace dapat membuat tampilan halaman blog menjadi lebih menarik dan lebih jelas. Contohnya adalah teks ini adalah kode yaitu dengan menggunakan tag <code> atau dengan menggunakan tag <pre>.

Namun pada kebanyakan blog yang menyertakan teks kode dalam postingan, juga memudahkan pengunjungnya dengan fitur auto selection. Yaitu kode tersebut dapat langsung ter-blok atau terseleksi semuanya secara otomatis dan bisa langsung di copy oleh pembacanya dengan hanya klik 2x atau double click atau bisa diatur menjadi 3x klik semua kode terseleksi.

Cara tersebut biasanya disukai oleh pengunjung blog jika ingin langsung mengcopy sebuah sintaks dari tulisan di blog karena lebih mudah dan lebih cepat. Untuk membuat kode di blog yang ditulis dengan <code> atau <pre> menjadi ter-blok otomatis kamu bisa mengikuti langkah-langkah berikut ini:
  1. Buka Blogger
  2. Pada bagian Tema klik tombol Edit HTML
  3. Temukan </body> dan letakkan kode berikut di atasnya
  4. <script type='text/javascript'>
    var pres = document.getElementsByTagName(&quot;pre&quot;);
    for (var i = 0; i &lt; pres.length; i++) {
      pres[i].addEventListener(&quot;click&quot;, function (evt) {
          if (evt.detail === 3) {
            var selection = getSelection();
            var range = document.createRange();
            range.selectNodeContents(this);
            selection.removeAllRanges();
            selection.addRange(range);
        }
      }, false);
    }
    </script>
  5. Kamu bisa mengatur tag apa yang bisa terseleksi otomatis dengan mengganti pre
  6. Kamu bisa mengatur berapa kalik diklik agar kode langsung ter-blok semua dengan mengganti angka 3
  7. Klik tombol Simpan dan lihat hasilnya di blog kamu

Setelah itu kamu bisa mencobanya pada blog kamu dengan mengklik 3x pada tag pre, maka semua kode pada tag tersebut akan ter-blok secara otomatis. Dengan cara ini pembaca di blog kamu bisa dengan mudah untuk copy kode yang disediakan di postingan blog.

Contoh / demo

Sebagai demo kamu bisa bandingkan terlebih dahulu, coba klik 3x kode pada langkah ketiga di atas. Setelah itu klik di sini dan coba klik 3x lagi kode di atas lalu lihat perbedaannya.

Itulah beberapa langkah yang bisa kamu coba untuk membuat agar teks kode dalam tag pre di blogger bisa terseleksi otomatis seluruh teks kodenya, atau dengan kata lain teksnya bisa terblok otomatis secara keseluruhan. Jika ada hal yang kurang jelas, maka jangan sungkan untuk memberikan komentar kamu di bawah. Semoga artikel ini bisa bermanfaat. Terima kasih dan sampai jumpa!

Related Posts

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel