Cara Mudah Membuat Seleksi Otomatis dengan Double Click di Blog

Kang Muroi May 13, 2018
Membuat Seleksi Otomatis dengan Double Click di Blog
Dengan menambahkan program Tag Selection 'kbd' ke blog sobat, pengunjung dari blog akan merasa lebih dimudahkan untuk menyalin text atau kalimat yang sahabat blogger sediakan pada blog. Mengapa demikian? Alasannya yaitu karena setiap pengunjung hanya perlu melakukan [ Double Click ] pada text yang di sediakan, dan selanjutnya kode tersebut akan langsung terseleksi semua, hal ini tentu akan memanjakan pengunjung pada blog sobat dan membuat pengunjung menjadi lebih betah untuk bertahan dan setia belajar dari artikel blog sobat. 

Kadang kala jika Anda berkunjung ke blong yang terlalu sederhana. Semua kegiatan yang ingin diambil dari blog tersebut harus dilakukan secara manual, tentu ini akan membuat sahabat bloger menjadi tidak betah untuk bertahan pada situs tersebut karena dirasa agak ribet, dan selanjutnya sobat pasti berpaling kesitus lain yang lebih kreatif, walaupun stus tersebut menyediakan informasi yang sama dengan situs yang terlalu sederhana tadi.

Dengan demikian otomatis penambahan Tag selection 'kbd' akan meningkatkan rating blog dimata pengunjung dari blog sobat. Berikut ini adalah contoh text script yang sudah admin beri kode seleksi otomatis :
<style> </body> </style> <head>

Seperti itulah hasil dari penambahan Tag Selection 'kbd' pada text script diatas, jika sobat tertarik untuk memasang Tag Selection 'kbd' tersebut ke blog sobat, sobat bisa simak dan pelajari panduan berikut.


Cara Membuat Seleksi Otomatis dengan Double Click di Blog

1.  Buka dashboard blogger sobat dan buka Tema >> edit HTML >> lalu salin Script dibawah ini tepat diatas kode ]]></b:skin> atau </style> gunakan Ctrl + F untuk melakukan pencarian lebih mudah.

kbd{position:relative;color:#28a1f0;}
kbd:before{position:absolute;content:'Double click to select';display:table;bottom:23px;left:0;background:#1abc9c;color:#fff;padding:6px;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}

2.  Selanjutnya sobat taruh java script berikut tepat diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
// Double Click
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.rawgit.com/Arlina-Design/FlamingTree/master/highlightpro.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

3. Kemudian simpan template sobat. 
4. Untuk Memanggil Kode tersebut agar bisa aktif gunakan cara berikut:
  • Buat Postingan baru, sobat pilih halaman HTML

  • Selanjutnya sobat berikan tanda berikut
 <kbd>Isi text sobat disini</kbd>
  • Kemudian sobat simpan

5. Sekarang Sobat bisa lihat sendiri hasilnya pada blog 
6. Selamat mencoba 

Semoga tutorial ini bermanfaat bagi sahabat bloger, Jika ada yang tidak sobat mengerti pada tutorial diatas, sobat bisa tanyakan pada kolom komentar dibawah, terimakasih telah berkunjung.

thanks to : Remote 99
Tags
Jika kamu berencana untuk satu tahun, maka taburlah padi. Jika kamu berencana untuk satu dekade, maka tanamlah pohon. Jika kamu merencanakan seumur hidup, maka didiklah seseorang.

Post a Comment

0 Comments