Cara Membuat Tag KBD Dengan Efek Double Click To Select Diblog

Tag kbd biasanya digunakan untuk memberitahu kepada pembaca bahwa teks atau tulisan yang ditandai dengan tag kbd ini adalah teks yang penting
Cara Membuat Tag KBD Dengan Efek Double Click To Select Diblog - Tag kbd biasanya digunakan untuk memberitahu kepada pembaca bahwa teks atau tulisan yang ditandai dengan tag kbd ini adalah teks yang penting. Dan biasanya penggunaan tag kbd ini digunakan pada blog tutorial blogging atau koding. 

Membuat tag kbd ini ada banyak jenisnya. Ada yang berupa tombol dan ditambah dengan fitur double click copy ada juga yang sederhana hanya berupa tombol yang berisi teks. Ada beberapa kelebihan saat kamu memasang tag kbd ini diblog kamu.

  • Kelebihan pertama adalah memberikan perhatian lebih pada teks yang diberi tag kbd ini agar si pembaca lebih teliti pada teks tersebut. 
  • Kelebihan kedua adalah memberikan kesan atau nilai yang lebih pada pembaca terhadap blog kita. 
  • Kelebihan ketiga adalah dapat membantu pembaca untuk mengetahui paragraf bagian mana yang penting dan mana yang setidaknya kurang penting.
Sebelum lanjut saya akan menjelaskan sedikit Mengenai pengertian tentang kbd ini. Kalau kamu sudah tidak asing lagi dengan tag kbd ini silahkan di lewat saja. Tapi bagi kamu yang masih asing, bisa baca terlebih dahulu tentang tag kbd ini. Berikut sedikit penjelasannya.


Elemen kbd ini merupakan singkatan dari pada keyboard. Tag kbd ini biasanya digunakan untuk membuat masukan perintah dari keyboard tersebut. Dan bisa juga digunakan untuk voice command.

Nah itu sedikit penjelasan tentang makna dari elemen kbd ini. Sekarang lanjut ke cara pemasangan tag kbd ini ke blog.

Cara Membuat Tag KBD HTML Diblog Dengan CSS

  • Pertama masuk dulu ke dashboard blogger kamu.
  • Lalu masuk ke menu Theme > Edit HTML.
  • Setelah itu cari kode ]]></b:skin> dan letakan kode dibawah ini diatas atau sebelum kode ]]></b:skin> tadi.
/* kbd Double Click to Select by Tekno-Thalib */
kbd{font-family:monospace;position:relative;color:#d11919;font-size:95%;-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:#9a9af9;
  color:#fff;
  padding:6px;
  border-radius:3px;
  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}
  • Kalau sudah klik simpan. 
Sampai disini tag kbd sudah terpasang diblog kamu. Dan untuk cara penggunaan kbd ini adalah sebagai berikut.

Cara Menggunakan Tag KBD Di dalam Postingan Blog

  • Masuk ke postingan atau halaman yang ingin ditambahkan tag kbd ini.
  • Tambahkan tag berikut diantara teks yang ingin ditandai kbd.
<kbd>Masukan teks atau tulisan yang ingin ditandai kbd disini</kbd>
  • Selesai.
Ouh ya, selain gaya kbd diatas, kamu juga bisa coba menggunakan gaya yang satu ini. Gaya yang kedua ini ada fitur double click to select. Dan cara memasangnya sedikit berbeda dari yang atas. Berikut adalah cara memasang efek double click pada tag HTML kbd dipostingan blog.

Cara Memasang Efek Double Click To Select Pada Tag KBD

  • Masuk ke dashboard > Theme > Edit HTML.
  • Lalu tambahkan CSS dibawah ini diatas ]]></b:skin> atau </style>
/* 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}
#770e0e merupakan kode warna untuk teks yang diberi tanda dengan kbd ini. Silahkan ganti warnanya sesuai keinginan kamu.

Dan untuk teks hover yang akan muncul saat diklik, kamu bisa ganti dibagian content:'Double Click To Select';
  • Kemudian tambahkan kode javascript dibawah ini diatas atau sebelum tag </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>

Untuk cara pemasangan tag kbd sama saja seperti cara pertama tadi. 

Nah, itulah tutorial cara membuat kbd di postingan blog yang dimaksud di artikel ini. Semoga bermanfaat dan berhasil.

There are many unique things in the world that you haven't seen

Tulis Komentar

1. Centang kotak "Notify Me" sebelum anda berkomentar.
2. Hindari berkomentar diluar pembahasan artikel diatas.
3. Dilarang memasukan link aktif!
4. Gunakan <i>comment</i> untuk menuliskan kode.
5. Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL.
6. Jika ingin memasukan kode, parse terlebih dahulu (Terutama JavaScript dan HTML).
7. Dilarang mempromosikan produk atau situs apapun di kolom komentar!