TongkolPedia

Home
Blogger

Cara Membuat Efek Double Click To Select di Blogger Dengan Mudah

Pada kesempatan kali ini saya akan membagikan tutorial cara membuat efek Double Click To Select di Blogger. Untuk kamu yang sekarang ini lagi membangun blog dengan niche tutorial atau blogger yang sangat erat kaitannya dengan script, saya sarankan kamu untuk menggunakan efek Double Click To Select ini.
TongkolPedia - Pada kesempatan kali ini saya akan membagikan tutorial cara membuat efek Double Click To Select di Blogger. Untuk kamu yang sekarang ini lagi membangun blog dengan niche tutorial atau blogger yang sangat erat kaitannya dengan script, saya sarankan kamu untuk menggunakan efek Double Click To Select ini. 

Efek Double Click To Select berfungsi untuk memperindah tampilan artikel kamu dan juga memudahkan para pembaca. Dengan adanya efek ini, pembaca blog kamu lebih mudah untuk menyeleksi script yang kamu bagikan, tanpa harus menyeleksi dari awal hingga akhir. Berikut ini tutorial cara membuat efek Double Click To Sleect di Blogger dengan mudah.

Cara Membuat Efek Double Click To Select di Blogger Dengan Mudah


  • Buka akun blog kamu masing-masing di Blogger.
  • Masuk ke bagian Template - Edit HTML.
  • Selanjutnya, carilah kode ]]></b:skin> atau </style>. Silahkan gunakan Ctrl + F untuk memudahkan mencari kode.
  • Salin CSS dibawah ini dan tempelkan tepat diatas kode ]]></b:skin> atau </style>. 

/* CSS FOR KBD by TongkolPedia.net */
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}

Note:
#770e0e adalah warna teks pada tag kbd. Silahkan kamu ganti sesuai keinginanmu.
Double click to select adalah efek dari tulisan hover teks. Silahkan diubah sesuai keinginan.
#4c4c4c adalah warna background pad teks hover. Silahkan diganti sesuai keinginan.
75% adalah ukuran besar pada teks hover. Silahkan kamu ganti sesuai keinginan.

  • Setelah itu, Salin Javascript dibawah ini dan tempelkan tepat diatas kode </body>.
 <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>

  • Simpan template.


Cara Menggunakan Tag Kbd


  • Buatlah artikel baru atau edit saja artikel yang mau kamu tambahkan tag kbd.
  • Disana terdapat dua mode, yaitu Mode Compose dan HTML. Silahkan kamu pilih Mode HMTL.
  • Salin dan tempelkan kode dibawah ini.
<kbd>Tulis Teks disini</kbd>

Note:
Teks yang ditulis harus kamu parse terlebih dahulu menggunakan parse tools.



Penutup

Demikianlah tutorial kali ini tentang cara membuat efek Double click to select atau tag kbd di Blogger dengan mudah. Apabila masih bingung, silahkan tanyakan saja di kolom komentar dibwah ini atau langsung tanyakan melalui live chat. Semoga informasi kali ini bermanfaat bagi kamu.