Cara Menambahkan "Double Click To Select" Di Text Tertentu Pada Blogger

RaVsign Official    December 31, 2020    blogger , widget   

Sobat mungkin suka ataupun pernah melihat khususnya pada sebuah website atau blog yang ber-artikel tentang tutorial seputar Programming ataupun penambahan sebuah widget, pasti terdapat code - code yang harus di copy dan di letakan di bagian tag setelah ataupun sebelum tag Html tertentu.

Biasanya dalam mempermudah pencarian tag Html untuk menyimpan code - code yang sudah di copy akan jika di hover oleh cursor pada text tertentu akan keluar tulisan "Double Click To Select" yang dimana jika kita double click di bagian text tag Html tersebut maka secara otomatis ter-select tanpa kita drag dari kanan ke kiri atau sebaliknya hanya untuk mengcopy text tag Html tersebut.

pertama, sobat buka terlebih dahulu editor HTML template sobat.
kedua, sobat copy CSS di bawah dan letakan tepat di atas tag </head>.

<style type="text/css">

kbd{position:relative;font-size:12px;background:#ffd6ab;padding:2px 7px;border-radius:10px}kbd::before{position:absolute;display:block;content:'Double Click To Select';background:#f57c00;color:#fff;font-size:12px;width:9rem;bottom:0;left:0;padding:1px;text-align:center;border-radius:10px;visibility:hidden;opacity:0;z-index:2;transition:all .3s}kbd:hover::before{bottom:25px;visibility:visible;opacity:1}

</style>

ketiga, setelah itu sobat copy script Javascript di bawah dan letakan tepat di atas tag </body>.

<script type="text/javascript">

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>

keempat, sobat buka postingan blog sobat dan cari text yang berisi tag Html, dan sobat sisipkan tag <kbd> sebelumnya dan ditutup dengan </kbd>.
kelima, otomatis text tag Html yang sudah berada di dalam tag <kbd> akan berubah dan jika di hover akan keluar tulisn "Double Click To Select".

• result