Cara Menciptakan Seleksi Otomatis Dengan Double Click Di Blog
Cara Membuat Seleksi Otomatis dengan Double Click di Blog - Halo sahabat blogger, pada kesempatan ini admin akan membagikan tips simpel perihal cara membuat tag selection keren di postingan blog sahabat dengan efek double click, untuk diterapkan dengan tujuan memperindah tampilan blog sobat, hal ini mampu dilakukan dengan menambahkan acara Tag Selection 'kbd' pada html template sahabat blogger.
Dengan menambahkan acara 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 alasannya yakni yakni setiap pengunjung hanya perlu melakukan [ Double Click ] pada text yang di sediakan, dan selanjutnya isyarat tersebut akan langsung terseleksi semua, hal ini tentu akan memanjakan pengunjung pada blog sahabat dan membuat pengunjung menjadi lebih betah untuk bertahan dan setia berguru dari artikel blog sobat.
Sobat pun pasti merasakan hal yang sama, jikalau seandainya sahabat berkunjung ke blong yang terlalu sederhana. Semua acara yang ingin sahabat ambil dari blog tersebut harus dilakukan secara manual, tentu ini akan membuat sahabat bloger menjadi tidak betah untuk bertahan pada situs tersebut alasannya yakni yakni dirasa agak ribet, dan selanjutnya sahabat pasti berpaling kesitus lain yang lebih kreatif, walaupun stus tersebut menyediakan isu 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 yakni referensi text script yang sudah admin beri isyarat seleksi otomatis :
<style> </body> </style> <head>
Seperti itulah hasil dari penambahan Tag Selection 'kbd' pada text script diatas, jikalau sahabat tertarik untuk memasang Tag Selection 'kbd' tersebut ke blog sobat, sahabat mampu simak dan pelajari panduan berikut.
Baca Juga :Cara Membuat Prims Syntax Highlighter Berwarna di Blog
Cara Membuat Seleksi Otomatis dengan Double Click di Blog
1. Buka dashboard blogger sahabat dan buka Tema >> edit HTML >> kemudian salin Script dibawah ini tepat diatas isyarat ]]></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 sahabat 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 mampu aktif gunakan cara berikut:
- Buat Postingan baru, sahabat pilih halaman HTML
- Selanjutnya sahabat berikan tanda berikut
<kbd>Isi text sahabat disini</kbd>- Kemudian sahabat simpan
5. Sekarang Sobat mampu lihat sendiri jadinya pada blog sobat, Keren bukan?
6. Selamat mencoba sahabat blogger
Semoga tutorial ini bermanfaat bagi sahabat bloger, Jika ada yang tidak sahabat mengerti pada tutorial diatas, sahabat mampu tanyakan pada kolom komentar dibawah, terimakasih telah berkunjung.
0 Response to "Cara Menciptakan Seleksi Otomatis Dengan Double Click Di Blog"
Post a Comment