Cara Menciptakan Efek Double Click To Select Di Blogger

Kali ini aku akan memperlihatkan cara menciptakan imbas double click pada goresan pena di artikel blog, selection ini bisanya sering di gunakan oleh blogger untuk membahas topik perihal tutorial tujuan nya untuk mempermudah pembaca kalau ingin memprektekan tutorial yang di buat tinggal klik kata  di tuju semoga 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 memperlihatkan imbas khusus pada kata yang kita inginkan semoga 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 sebab 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 arahan ]]></b:skin> atau arahan </style> Kemudian copy arahan css di bawah ini, dan letak kan sempurna sebelum arahan 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 manis silahkan modifikasi arahan di atas sesuai selera kamu 

3.Selanjutnya cari arahan </body> Letakan arahan java script di bawah ini sempurna di atas arahan 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 semoga tag kbd berfungsi dengan baik.

Cara menerapkan tag HTML kbd di postingan semoga sanggup di Select

Buat postingan gres pilih kata di yang ingin di beri  Efek Double Click To Select dengan arahan 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 arahan 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 perihal menciptakan imbas double click to select di blogger semoga sanggup bermanfaat bagi kau terimakasih.

Bagikan Artikel ini