3/01/2019

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.

No comments:

Post a comment

" Berkomentar Lah Dengan Bijak, Sesuai Judul Artikel Trimakasih "