×

Author / Admin / Editor

     Jagoan Redesign    

Blog yang membahas Tutorial Blogger, Games, Template, Tips Adsense, SEO, Web Design dan Teknologi

Iklan Bawah Posting

Cara Membuat Efek Double Click to Select KBD Keren di Blogger

Jagoanredesign - Kali ini saya akan membagikan sebuah tutorial Cara Membuat Efek Double Click to Select KBD Keren di Blogger, KBD merupakan menu yang biasanya wajib ada di blog atau website tutorial blogging atau coding.

Cara Membuat Efek Double Click to Select KBD Keren di Blogger

KBD dengan efek double click to select ini bertujuan untuk mempermudah pengunjung blog anda untuk menyeleksi teks di postingan blog, untuk mengcopy teks kbd pengunjung blog anda tidak perlu melakukan seleksi manual seperti biasanya. Tapi, hanya tinggal klik 2 kali, otomatis teks akan terseleksi.

Cara Membuat Efek Double Click to Select KBD Keren di Blogger

1. Silahkan Login ke Blogger.
2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.
3. Kemudian cari kode berikut ini ]]></b:skin>  atau </style>dan pastekan kode css dibawah ini tepat DIATAS kode tersebut.

/* Double Click to Select KBD Keren By Jagoan Redesign*/
kbd{font-family:monospace;position:relative;color:#ff0000;font-size:95%;-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:#fd0000;
  color:#fff;
  padding:6px;
  border-radius:3px;
  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}
untuk anda pengguna template VioMagz, silahkan anda hapus kode kbd seperti dibawah ini
kbd{font-size:80%;border:1px solid #777;padding:2px 5px;border-bottom-width:2px;border-radius:3px;}
4. Silahkan anda tambahkan kode Javascript dibawah ini tepat DIATAS kode </body>.
<script>
//<![CDATA[
//kbd Auto Selection by jagoan redesign
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. Silahkan anda SIMPAN TEMA dan Selesai.

6. Cara Menerapkan Tag <kbd> dengan efek Double Click to Select di Postingan Blogger.
<kbd>teks anda di sini</kbd>
Nah, itu adalah tutorial Cara Membuat Efek Double Click to Select KBD Keren di Blogger semoga totorial bermanfaat bagi anda semua. jika ada yang ingin  anda tanyakan silakan berkomentar saja di bawah.
Previous
Next Post »
avatar
Penulis Blog dan redesigner template blogger.

Related Posts

Komentar
Tutup Komentar

0

Post a Comment

  • Berkomentarlah secara bijaksana dan bertanggung jawab.
  • Tidak diperbolehkan mempromosikan barang atau berjualan.
  • Tulis komentar Anda untuk hal yang masih berhubungan dengan posting pada halaman ini.
  • Dilarang memuat Link Aktif pada kolom komentar
  • Komentar dengan link aktif akan otomatis dihapus.
  • Jika ingin menulis kode silahkan anda parse terlebih dulu (terutama Javascript dan HTML)
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel