Cara Membuat Efek Double Click To Select Menggunakan Tag HTML kbd - Kali ini Saya akan menawarkan tutorial blogger mengenai Cara menciptakan imbas double click to select memakai tag kbd. Tujuannya untuk seleksi atau block kata yang diinginkan memanfaatkan tag HTML <kbd>. Tutorial imbas double click to select ini disesuaikan dari blog Arlina sebab berdasarkan Saya terlihat lebih keren. Selain itu memakai tag selection ini akan memudahkan saat pembaca artikel akan mencopy sebuah script. Sebenarnya fungsi tidak hanya itu. Tetapi kebanyakan blog tutorial memakai dobel klik to select ini untuk membantu para pengunjung menyeleksi dan mencopy arahan tutorial tersebut biar tidak terlalu usang block dari awal hingga simpulan karakter.
Memanfaatkan tag <kbd> untuk menciptakan seleksi text imbas double click to select
Tag HTML sangat majemuk dan memiliki fungsi masing-masing. Dan tag kbd merupakan salah satu tag HTML yang masih disupport HTML5. Penggunaan elemen
Baca juga : Cara menghilangkan arahan m=1 url blog di blogspot
<kbd>...</kbd> dipakai untuk mengidentifikasi teks yang mewakili input keybord pengguna. Kaprikornus dipakai untuk perintah input keyboard (kbd). Elemen <kbd> menunjukkan teks yang harus diketik pada keyboard. Berbeda dengan tag <code>, tag <kbd> memakai gaya defalut font monoscope. Karena itu tag kbd tidak banyak digunakan. Untuk itu ditambahkan sedikit gaya untuk menciptakan tag HTML kbd lebih komunikatif dan bermanfaat menyerupai pada penggunaan double click to select ini. Dalam hal ini berfungsi untuk input j4vascript sebagai getselection dan menambakan CSS untuk menciptakan lebih variatif.Baca juga : Cara menghilangkan arahan m=1 url blog di blogspot
Bagaimana penggunaan dan pemasangannya? Berikut di bawah ini
Cara menciptakan seleksi teks otomatis dengan imbas double click to select memakai tag HTML kbd
#1. Buka dashbor blogger, pilih menu theme
#2 Pilih sajian Edit HTML
#3 Copy dan paste arahan CSS di bawah ini pada html tema tepatnya sebelum kode ]]></b:skin> atau </style>. Gunakan CTRL+F untuk lebih cepat menemukannya.
/* CSS FOR KBD */ kbd{position:relative;color:#770e0e;-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:23px; left:0; background:#4c4c4c; 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} Catatan:
#770e0e merupakan warna teks di dalam tag kbd. Silahkan ganti warna sesuai selera.
Double click to select merupakan imbas hover text. Silahkan ganti kata sesuai selera.
#4c4c4c merupakan warna background teks hover. Silahkan ganti warnanya sesuai selera.
75% merupakan besar ukuran teks hover. Silahkan ganti ukuran sesuai selera.
#4 Setelah langkah di atas selesai, copy dan paste arahan Javascript di bawah ini sempurna di atas arahan </body>
<script type='text/j4vascript'> //<![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> #5 Simpan Template
Cara Menggunakan tag HTML kbd
#1 Buat artikel baru
#2 Terdapat tab Compose dan HTML. Pilih tab HTML
#3 Copy dan paste arahan di bawah ini
<kbd>Ketikkan Teks disini</kbd> Catatan
Untuk memasukkan teks atau arahan ke dalam tag kbd harus di parse terlebih dahulu.
Demikian tutorial cara menciptakan sekaligus memasang imbas double click to select memakai tag kbd untuk memudahkan seleksi teks secara otomatis dengan hanya dua kali klik. Semoga tutorial ini bermanfaat, apabila masih galau mengenai tutorial tersebut sanggup berkomentar di artikel ini.