Cara Double Tap to Select All di Blog

"Cara double click to select all, cukup klik/tap 2 kali pada code untuk memblock semua baris kode, cocok artikel untuk artikel tutorial coding."

Cara menambahkan fungsi double tap/click to select area ke dalam Blog, bagi yang sering mengunjungi blog atau web tutorial coding dan edit-edit template pastinya telah akrab dengan proses copy paste code.

Apa itu Fitur Double Tap to Select? 

Fitur double tap atau double click to select memungkinkan kita untuk menyeleksi keseluruhan isi kode yang terdapat di dalam sebuah kolom/tag/parent yang telah ditentukan.

Ada kalanya kegiatan copas code ini sangat menyenangkan karena sang empunya Blog telah menerapkan double click to select, fitur ini dapat menjadi poin plus lho karena terbukti memudahkan pengunjung dalam menerapkan tutorial dalam artikel kita.

Tak jarang kita cukup diribetkan juga karena harus tap dan geser-geser terlebih dahulu untuk sekedar memblock/select keseluruhan isi kode.

Tak ingin kan para pengunjung menjadi kapok alias ogah balik lagi karena pengalaman dalam menjalankan tutorial yang kurang menyenangkan. Daripada berlama-lama lagi yuk langsung simak tutorialnya.

Menerapkan Fungsi Double Click Select All di Blog

Harap lakukan Backup terlebih dahulu sebelum melakukan tutorial yang mengharuskan perubahan kode pada Template untuk berjaga-jaga.

1. Buka blogger dan masuk dengan akun google sobat
2. Buka Template dan pilih Edit HTML
3. Cari code </body> dan letakan kode dibawah ini tepat diatasnya (pilih salah satu)
   

   <script type='text/javascript'>
   //<![CDATA[
   for (var pres = document.querySelectorAll("pre,code"), i = 0; i < pres.length; i++) pres[i].addEventListener("dblclick", function() {
     var e = getSelection(),
       t = document.createRange();
     t.selectNodeContents(this), e.removeAllRanges(), e.addRange(t)
   }, !1);
   //]]>
   </script>

   Versi minify

   <script type='text/javascript'>
   //<![CDATA[
   for(var pres=document.querySelectorAll("pre,code"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
   //]]>
   </script>

4. Save Template

Dengan melakukan langkah diatas maka fitur Dblclick telah berhasil ditambahkan pada Blog sobat, untuk memanfaatkan fitur tersebut silahkan tulis artikel yang berisikan beberapa baris kode yang dibungkus dengan tag:

<pre><code>masukan kode disini</code></pre>

Untuk hasil atau demonya silahkan double tap pada baris kode diatas dalam artikel ini.

Script ini berfungsi untuk tag pre dan code. Jika ingin menambahkan tag, id atau class lain silahkan tambahkan dengan menggunakan tanda koma (,) sebagai pemisah. Contoh: pre,code,blockquote,(tag yang ditambahkan),dst.

Penutup dan Kesimpulan

Demikian tips Blog coding edit template sederhana bagaimana caranya agar kode di dalam artikel blog dapat di select all hanya dengan 2 kali click.

Terima kasih kepada blog bloggingbray sebagai referensi rujukan kode yang CatatanDroid gunakan dalam artikel kali ini, bagaimana sobat cukup mudah bukan? semoga bermanfaat dan selamat mencoba! CatatanDroid