Cara Membuat Tag kbd dengan Efek Double Click to Select di Blogger

Cara Membuat Tag kbd dengan Efek Double Click to Select di Blogger

Tag kbd dengan efek double click to select ini berfungsi untuk memudahkan pengunjung blog anda untuk menyeleksi tulisan pada suatu postingan.

Terlebih lagi, untuk menandainya tidak perlu melakukan seleksi manual seperti biasanya. Tapi, hanya tinggal klik 2 kali, otomatis teks akan terseleksi.

Apabila blog anda adalah blog tentang tutorial blogging atau coding yang memungkinkan pengunjung blog anda melakukan seleksi pada code yang ada untuk dicopy paste, tag kbd dengan double click to select ini akan sangat berguna untuk memudahkan seleksinya.

Apalagi jika blog anda menggunakan kode anti copy paste...

Jadi anda tidak perlu bingung lagi, apalagi sampai mencopot kode tersebut jika ada postingan yang menyuruh pengunjung untuk meng-copy tulisan di blog anda.

Seperti yang sudah saya bilang sebelumnya, tag kbd akan memudahkan pengunjung blog anda untuk meng-copy kata-kata di blog anda.

Dan juga... tag kbd ini akan menjadi nilai lebih untuk pengunjung blog anda. Tulisan di blog anda akan menjadi lebih menarik di mata pengunjung dan memudahkannya mengikuti tutorial yang anda berikan.

Jika blog anda menarik di mata pengunjung, otomatis pengunjung pasti akan lebih sering mengunjungi blog anda 'kan?

Itulah beberapa keuntungan menggunakan tag kbd dengan efek double click to select ini.

Oke, mari kita lanjut ke cara membuatnya.

Membuat Double Click to Select pada Tag kbd

Buka dashboard blogger anda dan pergi ke Tema lalu pilih Edit HTML
Copy kode CSS berikut ini dan letakkan di atas kode </style> atau ]]></b:skin>

/* kbd Double Click to Select */
kbd{font-family:monospace;position:relative;color:#2196f3;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:#1976d2;
  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} 

Perhatikan kode dan keterangan berikut ini.

Kode Keterangan Diatas
No	Kode	Keterangan
1	Ukuran font pada teks kbd	95%
2	Warna pada teks kbd	#2196f3
3	Teks hover yang akan tampil	#1976d2
4	Warna teks hover	#fff
5	Ukuran font pada teks hover	75%

Nah anda bisa memodifikasi kode tersebut atau mengeditnya lagi sesuai dengan keinginan anda.

Kode CSS sudah, selanjutnya tinggal pasang kode Javascipt dulu agar jika di klik dua kali akan menyeleksi teks yang dipilih. Copy kode Javascript di bawah ini dan letakkan di atas kode </body> pada blog anda.

Sudah? Lanjut dengan simpan tema blog anda.
Pembuatan tag kbd dengan efek double click to select sudah selesai. Bagi anda yang ingin tahu cara menerapkannya ke postingan blog, simak caranya berikut ini.

Menerapkan Tag <kbd> dengan Double Click to Select pada Postingan Blogger
Untuk menerapkan pada postingan di blog anda, anda hanya perlu menggunakan tag <kbd> lalu diikuti dengan teks yang ingin ditampilkan...

atau lebih jelasnya seperti ini.

<kbd>ketik teks di sini</kbd>

Ganti ketik teks di sini dengan teks pilihan anda.

Penting

Untuk kamu pengguna template VioMagz, hapus kode berikut ini

kbd{font-size:80%;border:1px solid #777;padding:2px 5px;border-bottom-width:2px;border-radius:3px;}

Yap itulah cara membuat tag kbd dengan efek double click to select di blogger.

Tidak work di blog anda? Ulangi langkahnya baik-baik, mungkin ada yang salah :)

Terima kasih telah berkunjung dan jika anda suka artikel ini, jangan lupa untuk bagikan postingan ini ya ^_^