Cara Mudah Membuat Effect Double Click To Select Dengan Tag Selection 'kbd' di Blogger

Oleh Renna

Cara Membuat Tag Selection "kbd"
Tag Selection biasanya digunakan blog tutorial kode pemograman yang memakai script anti copas, tujuannya selain mempermudah juga untuk menyeleksi bagian-bagian tertentu kode pemograman, cara kerjanya tak jauh seperti blockquote, jadi hanya bagian-bagian tertentu saja yang bisa di copy paste.

Cara Mudah Membuat Effect Double Click To Select - Kored ID

Tentunya kita akan merasa kerepotan jika mengetik kode html yang ingin diterapkan kedalam template blog kita. Dengan memakai Tag Selection kbd kita bisa lebih mudah mencopy sebuah script, kita hanya tinggal doble klik kode yang kita inginkan tanpa harus lama ngblocknya dari awal sampai akhir.

Menurut mbak naminakiky.com, sebelumnya kbd sudah ada di css pada setiap template, dan pas di cek memang benar ada, namun jika diterapkan kedalam artikel hasilnya masih kurang maksimal. dan kebetulan saya memakai script anti copas, jadi kbd yang ada dalam css template tersebut tetap saja gak bisa di copy. jadi bagai mana cara membuat tag selection kbd biar bagian-bagian tertentu bisa di copas?

Baca Juga : Tips Cara Mengajukan Ulang Monetisasi Youtube Supaya Di Monetisasi Kembali

Cara Mudah Membuat Effect Double Click To Select Dengan Tag Selection 'kbd'

1. Login Ke Blogger.com
2. Pilih Tema -> Edit HTML
3. Cari kode </style> atau ]]></b:skin> . Untuk Lebih mudah mencarinya tekan ctrl+F
4. Copy Kode Dibawah ini tepat di atas kode </style> atau ]]></b:skin>

/* CSS KBD */
kbd{position:relative;color:#00BFFF;-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:#87CEEB;
  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}

Silahkan rubah kode dibawah ini sesuai selera masing-masing:

Kode Warna Tag kbd (Color) : #00BFFF
Tulisan Effect Hover (Content) : Double click to select
Warna Background Teks kbd (Background) : #87CEEB
Ukuran Font (Font-Size) : 75%

5. Langkah selanjutnya ialah mencari kode </body> . Letakan kode Javascript dibawah ini tepat 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>

6. Simpan Template

Baca Juga :

Cara Menggunakan Tag Selection HTML kbd kedalam artikel

1. Buat Postingan Baru
2. Pilih mode atau Tab HTML bukan Compose
3. Copy dan Paste kode dibawah ini

 <kbd>Ketikkan Teks disini</kbd>

Jika Anda ingin memasukan kode HTML seperti di atas sangat disarankan untuk parse dulu kode tersebut menggunakan tool Parse HTML. PARSE HTML DISINI

Sebenarnya membuat tag selection itu sangat mudah, namun orang-orang khusunya blogger pemula seperti saya, tidak tau istilahnya. Termasuk saya :v. Semoga bisa diterapkan kedalam blog anda.

Widget HTML Atas

Cara Mudah Membuat Effect Double Click To Select Dengan Tag Selection 'kbd' di Blogger