Cara Membuat Efek Double Click To Select Di Blogger - Hallo sahabat Terpedia, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Efek Double Click To Select Di Blogger, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogger, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Membuat Efek Double Click To Select Di Blogger
link : Cara Membuat Efek Double Click To Select Di Blogger

Cara Membuat Efek Double Click To Select Di Blogger

Cara Membuat Efek Double Click To Select Di Blogger - Hallo Sahabat Uci Design kali ini saya akan memberikan cara membuat efek double click pada tulisan di artikel blog, selection ini bisanya sering di gunakan oleh blogger untuk membahas topik tentang tutorial tujuan nya untuk mempermudah pembaca bila ingin memprektekan tutorial yang di buat tinggal klik kata  di tuju agar pembaca tidak repot lagi untuk copy paste 

Terlebih lagi apa bila blog kamu memasang script anti copas dengan tag kbd yang di pasang pada Html akan memberikan efek khusus pada kata yang kita inginkan agar bisa di seleksi mengunakan double click, langsung saja ke pembahasan silahkan ikuti langkah angkah di bawah ini untuk membuat efek kbd di postingan blog kamu

Keuntungan memasang efek double clik di blog

Memepermudah pengunjung untuk menerapkan tutorial yg ada dalm artikel
Melindungi dari pencurian artikel( apa bila memasang script anti copas dengan efek double kilk ini tidak perlu khawatri karena kata yang di beri tag kbd bisa di copy paste dengan mudah

Berikut ini cara membuat seleksi teks otomatis deengan efek double click tag kbd html responsive.

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

2.Cari kode ]]></b:skin> atau kode </style>Kemudian copy kode css di bawah ini, dan letak kan tepat sebelum kode 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 : tulisan evek hover
• #4c4c4c : Warna backgroud teks hover kbd
• 75% : Ukuran font teks hover

Agar lebih responsive dan bagus silahkan modifikasi kode di atas sesuai selera kamu 

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

Cara menerapkan tag HTML kbd di postingan agar bisa di Select

Buat postingan baru pilih kata di yang ingin di beri  Efek Double Click To Select dengan kode ini <kbd>Ketikkan Teks disini</kbd>  ganti tulisan Ketikkan Teks disini dengan teks pilihan kamu.

Apabila kamu ingin memasukan tag html dan javascript silah kan di parse dulu dibawah ini agar kode bisa muncul


Parse HTML

membuat efek double click kbd sebenarnya bisa terbilang mudah tutorial yang saya berikan di atas semoga dapat membantu untuk membuat artikel responsive dan tidak ribet di mata pengunjung.

Itu saja tutorial tentang membuat efek double click to select di blogger semoga dapat bermanfaat bagi kamu terimakasih.

Demikianlah Artikel Cara Membuat Efek Double Click To Select Di Blogger

Sekianlah artikel Cara Membuat Efek Double Click To Select Di Blogger kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Efek Double Click To Select Di Blogger dengan alamat link https://best-texas-holdem-mfe.blogspot.com/2019/02/cara-membuat-efek-double-click-to.html

Tweet