Cara Membuat Double Click To Select di Blogger

Pada kesempatan ini admin akan membagikan tutorial cara membuat double click to select seperti arlinacode di blogger.

Pasti kalian pernah melihat sebuah blogger yang dalam artikelnya dapat kita seleksi secara keseluruhan dengar cara menekan klik kiri 2 kali pada kode atau teks tertentu.

Cara ini menurut saya cukup keren dan berguna jika kita ingin menyeleksi kode tertentu. Untuk tutorialnya sebagai berikut.

Cara Membuat Double Click To Select di Blogger

1. Buka Blogger
2. Pilih Tema
3. Pada menu SESUAIKAN, pilih Edit HTML
4. Kemudian letakkan kode css ini tepat berapa diatas kode ]]></b:skin> atau </style>

   /* CSS KBD By felmika.com */
   kbd{position:relative;background:#ff5959;color:#fff;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;border-radius: 4px;padding: 2px 4px;}
   kbd:before{position:absolute;content:'Double click to select';display:table;bottom:29px;left:0;background:#87CEEB;color:#fff;padding:4px;border-radius:2px;font-size:75%;line-height:1;opacity:0;visibility:hidden;transform:scale(0.8);z-index:2;transition:all .3s;}
   kbd:hover:before{transform:scale(1.0);opacity:1;visibility:visible;transition:all .3s}

5. Selanjutnya letakkan kode ini tepat berada diatas kode </body> atau </body>

   <script type='text/javascript'>
   //<![CDATA[
   //Pre Auto Selection
   var pres = document.querySelectorAll('kbd');
   for (var i = 0; i < pres.length; i++) {
     pres[i].addEventListener("dblclick", function () {
       var selection = getSelection();
       var range = document.createRange();
       range.selectNodeContents(this);
       selection.removeAllRanges();
       selection.addRange(range);
     }, false);
   }
   //]]>
   </script>

6. Jika sudah pilih Simpan Tema

Untuk menerapkannya dalam postingan blogger kita tinggal menambahkan kode pemanggil dibawah ini.

Catatan: ganti yang saya beri mark dengan teks yang kalian inginkan.