Cara Membuat Seleksi Otomatis dengan Double Click di Blog

Prodeku - Untuk anda yang suka membuat artikel tentang tutorial blogging, pastinya selalu menuliskan kode pada artikelnya dengan penggunaan tag pre atau tag code, baik itu penulisan HTML, CSS bahkan Javascript. Tentunya agar pengunjung dapat mengcopy kode tersebut untuk diterapkan kedalam blog nya. Namun, Banyak juga yang menggunakan tag blockquote untuk penulisan kodenya.

Untuk mempermudah pengunjung mencopy kode yang telah diberikan, ada baiknya menggunakan seleksi otomatis. Kenapa demikian? Karena hanya dengan mengklik atau klik ganda (Double Click) kode tersebut akan terseleksi semua. Jadi, tidak akan khawatir kalo ada kode yang tertinggal.

Contohnya seperti ini:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea  commodo consequat. Duis aute irure dolor in reprehenderit in voluptate  velit esse cillum dolore eu fugiat nulla pariatur.

Cukup dengan double click, text akan terseleksi semua. Untuk tutorialnya silahkan simak dibawah ini gans.

Tutorial Membuat Seleksi Otomatis

1. Buka akun blogger
2. Pilih menu Template > Edit HTML
3. Cari kode </body>. Kemudian letakkan kode ini tepat diatas kode </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>

4. Simpan Template.

Penjelasan: Script diatas digunakan untuk seleksi otomatis pada tag blockquote. Jika biasanya anda menggukanan tag pre, silahkan ganti yang berwarna pink dengan "pre". 

Demikian tutorial tentang Cara Membuat Seleksi Otomatis dengan Double Click di Blog. Terus ikuti tutorial lainnya hanya di Prodeku. Selamat mencoba!

Bagikan Artikel ini