Cara Menciptakan Dampak Double Click To Select Di Blogger

Kali ini aku akan menunjukkan cara menciptakan imbas double click pada goresan pena di artikel blog, selection ini bisanya sering di gunakan oleh blogger untuk membahas topik ihwal tutorial tujuan nya untuk mempermudah pembaca kalau ingin memprektekan tutorial yang di buat tinggal klik kata di tuju biar pembaca tidak repot lagi untuk copy paste

Terlebih lagi apa kalau blog kau memasang script anti copas dengan tag kbd yang di pasang pada Html akan menunjukkan imbas khusus pada kata yang kita inginkan biar sanggup di seleksi mengunakan double click, pribadi saja ke pembahasan silahkan ikuti langkah angkah di bawah ini untuk membuat imbas kbd di postingan blog kamu

Keuntungan memasang imbas double clik di blog

Memepermudah pengunjung untuk menerapkan tutorial yg ada dalm artikel
Melindungi dari pencurian artikel( apa kalau memasang script anti copas dengan imbas double kilk ini tidak perlu khawatri alasannya ialah kata yang di beri tag kbd sanggup di copy paste dengan mudah

Berikut ini cara menciptakan seleksi teks otomatis deengan imbas double click tag kbd html responsive

1.Silahkan login ke blogger.com pilih tema > edit html

2.Cari isyarat ]]></b:skin> atau isyarat </style> Kemudian copy isyarat css di bawah ini, dan letak kan sempurna sebelum isyarat tersebut.

/* 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}

Penting !

#770e0e : Kode warna tag kbd di tampilkan
Double click to select : goresan pena evek hover
#4c4c4c : Warna backgroud teks hover kbd
75% : Ukuran font teks hover

Agar lebih responsive dan cantik silahkan modifikasi isyarat di atas sesuai selera kamu

3.Selanjutnya cari isyarat </body> Letakan isyarat java script di bawah ini sempurna di atas isyarat tersebut.

<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>

4.Terakhir simpan templat

cara menerapkan Efek pada artikel silahkan ikuti cara di bawah ini biar tag kbd berfungsi dengan baik.

Cara menerapkan tag HTML kbd di postingan biar sanggup di Select

Buat postingan gres pilih kata di yang ingin di beri Efek Double Click To Select dengan isyarat ini <kbd>Ketikkan Teks disini</kbd> ganti goresan pena Ketikkan Teks disini dengan teks pilihan kamu.

Apabila kau ingin memasukan tag html dan javascript silah kan di parse dulu disini agar isyarat sanggup muncul

menciptakan imbas double click kbd bahwasanya sanggup terbilang gampang tutorial yang aku berikan di atas semoga sanggup membantu untuk menciptakan artikel responsive dan tidak ribet di mata pengunjung.

Itu saja tutorial ihwal menciptakan imbas double click to select di blogger semoga sanggup bermanfaat bagi kau terimakasih.