Cara Membuat Kotak Script Efek Double Click To Select Kotak Script Tag HTML

Cara Membuat Kotak Script Efek Double Click To Select Kotak Script Tag HTML kbd

seocope

SeoCope for Blogger Inspirative ( Tips and Trik ) - Cara Membuat Efek Double Click To Select Menggunakan Tag HTML kbd - Kali ini Saya akan memberikan tutorial blogger mengenai Cara membuat efek double click to select menggunakan tag kbd. Tujuannya untuk seleksi atau block kata yang diinginkan memanfaatkan tag HTML . Tutorial efek double click to select ini diadaptasi dari blog Arlina karena menurut Saya terlihat lebih keren. Selain itu menggunakan tag selection ini akan memudahkan ketika pembaca artikel akan mencopy sebuah script. Sebenarnya fungsi tidak hanya itu. Tetapi kebanyakan blog tutorial menggunakan dobel klik to select ini untuk membantu para pengunjung menyeleksi dan mencopy kode tutorial tersebut agar tidak terlalu lama block dari awal sampai akhir karakter. membuat seleksi teks otomatis tag kbd Memanfaatkan tag untuk membuat seleksi text efek double click to select

Tag HTML sangat bermacam-macam dan mempunyai fungsi masing-masing. Dan tag kbd merupakan salah satu tag HTML yang masih disupport HTML5. Penggunaan elemen ... digunakan untuk mengidentifikasi teks yang mewakili input keybord pengguna. Jadi digunakan untuk perintah input keyboard (kbd). Elemen memperlihatkan teks yang harus diketik pada keyboard. Berbeda dengan tag , tag menggunakan gaya defalut font monoscope. Karena itu tag kbd tidak banyak digunakan. Untuk itu ditambahkan sedikit gaya untuk membuat tag HTML kbd lebih komunikatif dan bermanfaat seperti pada penggunaan double click to select ini. Dalam hal ini berfungsi untuk input javascript sebagai getselection dan menambakan CSS untuk membuat lebih variatif.

Bagaimana penggunaan dan pemasangannya? Berikut di bawah ini

Cara membuat seleksi teks otomatis dengan efek double click to select menggunakan tag HTML kbd

#1. Buka dashbor blogger, pilih menu theme

#2 Pilih menu Edit HTML

#3 Copy dan paste kode CSS di bawah ini pada html tema tepatnya sebelum kode ]]>

atau . Gunakan CTRL+F untuk lebih cepat menemukannya.

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

Catatan:

#770e0e merupakan warna teks di dalam tag kbd. Silahkan ganti warna sesuai selera. Double click to select merupakan efek hover text. Silahkan ganti kata sesuai selera. #4c4c4c merupakan warna background teks hover. Silahkan ganti warnanya sesuai selera. 75% merupakan besar ukuran teks hover. Silahkan ganti ukuran sesuai selera.

#4 Setelah langkah di atas selesai, copy dan paste kode Javascript di bawah ini tepat di atas kode


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

#5 Simpan Template Cara Menggunakan tag HTML kbd #1 Buat artikel baru #2 Terdapat tab Compose dan HTML. Pilih tab HTML #3 Copy dan paste kode di bawah ini

Ketikkan Teks disini
Catatan Untuk memasukkan teks atau kode ke dalam tag kbd harus di parse terlebih dahulu. Demikian tutorial cara membuat sekaligus memasang efek double click to select menggunakan tag kbd untuk memudahkan seleksi teks secara otomatis dengan hanya dua kali klik. Semoga tutorial ini bermanfaat, apabila masih bingung mengenai tutorial tersebut bisa berkomentar di artikel ini.

Post a Comment

We are

Providing Quality services for App. Business. Designing. Marketing. Portfolio.

We help business owners and startups better serve more clients through digital enabled tools and strategies that increase market reach. We specialize in serving business owners through our practical experience and passion.

Read More

Standard

  • 01 User
  • 01 Project
  • 01 Advisor Team
  • Complete Statistics
  • E-mail Support
$ 99 /Mon

Effectively Enhance Your Business following this Tutorial

We help business owners and startups better serve more clients through digital enabled tools and strategies that increase market reach. We speciliaze in serving business owners through our practical experience and passion.

Read More
Can i ask for discount?

Some content. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas, mollitia? Porro quod officia in non et aperiam ipsa ab sit nihil necessitatibus corrupti explicabo quam sapiente est culpa nostrum, nisi, optio dicta cumque eum cum a repudiandae. Aperiam, qui aliquid.

Will I get premium support?

Some content. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas, mollitia? Porro quod officia in non et aperiam ipsa ab sit nihil necessitatibus corrupti explicabo quam sapiente est culpa nostrum, nisi, optio dicta cumque eum cum a repudiandae. Aperiam, qui aliquid.

Accordion title 3

Some content. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas, mollitia? Porro quod officia in non et aperiam ipsa ab sit nihil necessitatibus corrupti explicabo quam sapiente est culpa nostrum, nisi, optio dicta cumque eum cum a repudiandae. Aperiam, qui aliquid.

Is BizTratus reliable?

Some content. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas, mollitia? Porro quod officia in non et aperiam ipsa ab sit nihil necessitatibus corrupti explicabo quam sapiente est culpa nostrum, nisi, optio dicta cumque eum cum a repudiandae. Aperiam, qui aliquid.

How to buy this Template?

Some content. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas, mollitia? Porro quod officia in non et aperiam ipsa ab sit nihil necessitatibus corrupti explicabo quam sapiente est culpa nostrum, nisi, optio dicta cumque eum cum a repudiandae. Aperiam, qui aliquid.

Accordion title 3

Some content. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas, mollitia? Porro quod officia in non et aperiam ipsa ab sit nihil necessitatibus corrupti explicabo quam sapiente est culpa nostrum, nisi, optio dicta cumque eum cum a repudiandae. Aperiam, qui aliquid.

We Offer A Variety Of Industry Specific Marketing Solutions

We help business owners and startups better serve more clients through digital enabled tools and strategies that increase market reach. We speciliaze in serving business owners through our practical experience and passion.

Try it free