Cara Membuat HTML Tag kbd dengan Efek Double click to select
Senin, Juli 02, 2018
Add Comment
Mintailmu.com - Cara Membua Tombol HTML Tag "kbd" dengan Efek Double click to select - Pada kesempatan kali ini saya akan berbagi tutorial Bagaimana Cara Membuat Selection HTML Tag kbd dengan Efek Double click to select, ini digunakan untuk memepermudal melakukan select agar tidak susah mengklik sebuah kode, dan lebih bagus di lihat.
Elemen kbd merupakan singkatan dari Keyboard. Dimana tag <kbd> </kbd> digunakan untuk merepresentasikan masukkan dari user (berupa karakter dari keyboard atau dari alat lainnya seperti perintah suara (voice command).
Baiklah agar tidak banyak basi, mari kita mulai Tutorial Bagaimana Cara Membuat Selection HTML Tag kbd dengan Efek Double click to select ini, lihat dan pahami langkah-langkah berikut ini :
1. Buka Blogger - Login
2. Masuk ke dashboard - Pilih Tema
3. Klik Edit HTML
Cara Kedua :
1. Masuk ke Edit HTML
2. Lalu cari kode ]]></b:skin> ,Tekan Ctrl + F untuk mempermudah mencari kode agar lebih cepat
3. Jika sudah dapat kode tersebut, lalu copy kode di bawah ini di atas ]]></b:skin>
Cara Terakhir :
1. Buat Postingan Baru
2. Ada dua tombol Compose dan HTML
3. Pilih HTML
4. Lalu Copy Kode Di bawah ini
Nah itulahMembuat HTML Tag kbd dengan Efek Double click to select Responsive , sangat mudah bukan. ? Semoga tutorial ini dapat bermanfaat dan membantu anda, jika ada yang ingin di tayakan bisa koment di bawah ini. Terima kasih.
Elemen kbd merupakan singkatan dari Keyboard. Dimana tag <kbd> </kbd> digunakan untuk merepresentasikan masukkan dari user (berupa karakter dari keyboard atau dari alat lainnya seperti perintah suara (voice command).
Baiklah agar tidak banyak basi, mari kita mulai Tutorial Bagaimana Cara Membuat Selection HTML Tag kbd dengan Efek Double click to select ini, lihat dan pahami langkah-langkah berikut ini :
Cara Membuat HTML Tag kbd dengan Efek Double click to select
Cara Pertama :1. Buka Blogger - Login
2. Masuk ke dashboard - Pilih Tema
3. Klik Edit HTML
Cara Kedua :
1. Masuk ke Edit HTML
2. Lalu cari kode ]]></b:skin> ,Tekan Ctrl + F untuk mempermudah mencari kode agar lebih cepat
3. Jika sudah dapat kode tersebut, lalu copy kode di bawah ini di atas ]]></b:skin>
/* CSS FOR KBD */
kbd{position:relative;color:#28a1f0;-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}
4. Jika sudah lalu masukan kode JavaScript, Cari kode </body>, Jika sudah ketemu letakan kode di bawah ini tepat di atasnya 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>
5. Lalu simpan atau save template.Cara Terakhir :
1. Buat Postingan Baru
2. Ada dua tombol Compose dan HTML
3. Pilih HTML
4. Lalu Copy Kode Di bawah ini
<kbd>Masukan Disini</kbd>
5. Save dan Lihat hasilnyaNah itulahMembuat HTML Tag kbd dengan Efek Double click to select Responsive , sangat mudah bukan. ? Semoga tutorial ini dapat bermanfaat dan membantu anda, jika ada yang ingin di tayakan bisa koment di bawah ini. Terima kasih.
0 Response to "Cara Membuat HTML Tag kbd dengan Efek Double click to select"
Posting Komentar
Silahkan Anda berkomentar yang baik, menarik Dan Benar sesuai dengan isi Postingan Minta Iilmu .com.
Komentar-Komentar yang tidak diperbolehkan Di dalam Postingan Ini :
1. Berbau penghinaan SARA ,PXXN & SPAM
2. Komentar dengan Link hidup (SPAM)
3. Komentar tidak nyambung dengan isi postingan