Cara Membuat Tag Selection Dengan Efek Double Click To Select

Cara Membuat Tag Selection Dengan Efek Double Click To Select
Cara Membuat Tag Selection Dengan Efek Double Click To Select

Cara Membuat Tag Selection Dengan Efek Double Click To Select
Cara Membuat Tag Selection Dengan Efek Double Click To Select

Ariefchrome - Hallo Sahabat Ariefchrome pada kesempatan kali ini Ariefblog ingin berbagi artikel tentang bagaimana Cara Membuat Tag Selection Dengan Efek Double Click To Select. Pernah pada waktu itu saya sedang mencari refensi untuk keperluan artikel blog Ariefchrome dan pada saat itu saya menemukan tulisan yang jika diarahkan akan muncul seperti notifikasi yang bertuliskan Click to Select.

Pada saat itu saya langsung penasaran bagaimana cara membuatnya dan saya juga mengaplikasikannya ke blog saya. Setelah saya cukup merasa yakin, langsung saya dapat ide untuk membuat artikel Cara Membuat Tag Selection Dengan Efek Double Click To Select ini.

Element <kbd> digunakan sebagai untuk membuat masukan perintah dari perangkat keyboard, bisa juga digunakan untuk membuat suatu perintah yaitu (Voice Command) dll.

Untuk Warna, anda juga bisa merubah Sendiri termasuk untuk efek hover teksnya ddapat anda edit sesuai keinginan.

Langsung saja ikuti Langkah - langkah Cara Membuat Tag Selection Dengan Efek Double Click To Select di bawah :

Cara Membuat Tag Selection Dengan Efek Double Click To Select
Disini saya mencoba membuat tulisan Ariefchrome untuk di buat menjadi tag Selection : Ariefchrome
  • PERTAMA
    • Silahkan anda masuk pada Akun Blogger Anda.
  • KEDUA
    • Pilihlah pada Menu Tema, Klik Edit HTML, Masukkan Kode CSS dibawah dan letakkan diatas kode ]]></b:skin> atau </style>
kbd{position:relative;color:#f64c3b ;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;} kbd:before{position:absolute;content:'Double click to select';display:table;bottom:30px;left:0;background:#00a4ef;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}
  • PENGATURAN
    • #f64c3b Merupakan Warna Teks kbdnya, untuk warna silahkan edit sesuai keinginan anda.
    • Double Click to Select Merupakan Efek Hovernya. untuk Efek Hover silahkan edit sesuai keinginan anda.
    • #00a4ef Merupakan Warna backroud dari hover teksnya. untuk Warna backgroud&nbs edit sesuai keinginan anda.


  • Masukkan Script java dibawah dan letakkan diatas kode </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>



  • Jika sudah Selesai Simpan Tema Tersebut.

CARA MEMANGGIL TAG KBD PADA HTML
Cara Membuat Tag Selection Dengan Efek Double Click To Select
  • Silahkan Masuk ke Artikel anda.
  • Pilih Tab HTML samping Compose.
  • Kemudian Panggil tag kbdnya. contoh:  <kbd>Ariefchrome</kbd>
Dan Jika Selesai Simpan artikel anda , kemudian lihat artikel blog anda.

PENUTUP
Ariefchrome - Sekian artikel saya tentang bagaimana Cara Membuat Tag Selection Dengan Efek Double Click To Select, semoga dapat bermanfaat bagi anda, jangan lupa di Share :V. terimakasih...
Share This :
Terimakasih sudah berkunjung ke Ariefchrome. Silahkan Berkomentar dengan baik, Komentar Spam dan atau berisi Link Aktif tidak akan ditampilkan. Terimakasih