Hallo sahabat blogger pada kesempatan kali ini saya akan berbagi tutorial Cara Membuat Tanda Double Click To Select Menggunakan Tag KBD di Blogger dengan mudah.
Cara ini sudah banyak di pakai oleh blogger ternama seperti Arlina, Igniel , dan blogger lainnya yang bertemakan tutorial. Double click ini berfungsi untuk menandai teks yang kita inginkan hanya dengan klik 2 kali tanpa harus menyeleksinya terlebih dahulu.
Apalagi jika blog kalian menggunakan script anti copy paste dan anti seleksi, dengan menggunakan double click to select ini akan memberikan efek khusus pada text atau kata yang kita inginkan agar dapat mudah di seleksi hanya dengan menggunkan double click to select.
Selain itu juga masih banyak manfaat dari menggunakan double click to select ini seperti mempermudah membaca untuk memilih text dalam artikel tersebut tan harus memilih manual dan cukup dengan klik 2 kali saja.
Nah, buat kalian yang ingin memasang double click to select di blog kalian bisa ikuti langkahnya di bawah ini.
Cara Membuat Tanda Double Click To Select Menggunakan Tag KBD Di Blog
- Buka Blog kalian
- Pilih Tema lalu pilih Edit HTML
- Salin kode di bawah ini dan letakan di atas kode ]]></b:skin>
/* KBD TELATNGODING.COM */
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:#1589E3;
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}Keterangan
770e0e Warna text yang ada di dalam kode KBD
1589E3 Warna yang di tampilkan pada " Double Click To Select "
- Lanjut copy kode di bawah ini dan pastekan di atas 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>- Simpan template kalian.
Cara Menerapkan Double Click To Select Di Blog Agar Aktif
Untuk menerapkanya juga sangat mudah ko, kalian buat postingan baru lalau pilih Mode HTML dan letakan kode di bawah ini kedalam Mode HTML<kbd>KETIK-TULISAN-ANDA</kbd>Kalian ganti text KETIK-TULISAN-ANDA dengan teks yang kamu inginkan.
Bagaimana sangat mudah bukan untuk membuat Double Click To Select untuk blog kalian, sekian dulu postingan dari saya tentang Cara Membuat Tanda Double Click To Select Menggunakan Tag KBD Di Blog. Jika ada pertanyaan silahkan berkomentar di bawah ini dan terimakasih atas kunjungannya.