Cara Membuat Efek Double Click To Select Di Blogger - Kali ini saya akan memberikan cara membuat efek double click pada tulisan di artikel blog, selection ini bisanya sering di gunakan oleh blogger untuk membahas topik tentang tutorial tujuan nya untuk mempermudah pembaca bila ingin mempraktekan tutorial yang di buat tinggal klik kata di tuju agar pembaca tidak repot lagi untuk copy paste.
Terlebih lagi apa bila blog kamu memasang script anti copas dengan tag kbd yang di pasang pada HTML akan memberikan efek khusus pada kata yang kita inginkan agar bisa di seleksi mengunakan double click, langsung saja ke pembahasan silahkan ikuti langkah angkah di bawah ini untuk membuat efek kbd di postingan blog kamu
Keuntungan memasang efek double clik di blog
- Memepermudah pengunjung untuk menerapkan tutorial yg ada dalm artikel
- Melindungi dari pencurian artikel ( apa bila memasang script anti copas dengan efek double kilk ini tidak perlu khawatri karena kata yang di beri tag kbd bisa di copy paste dengan mudah)
Berikut ini cara membuat seleksi teks otomatis deengan efek double click tag kbd html responsive
1.Silahkan login ke blogger.com pilih Tema > Edit HTML
2.Cari kode ]]></b:skin> atau kode </style> Kemudian copy kode css di bawah ini, dan letak kan tepat sebelum kode tersebut
/* 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}Penting !
- #770e0e : Kode warna tag kbd di tampilkan
- Double click to select : tulisan evek hover
- #4c4c4c : Warna backgroud teks hover kbd
- 75% : Ukuran font teks hover
Penting Agar lebih responsive dan bagus silahkan modifikasi kode di atas sesuai selera kamu
3.Selanjutnya cari kode </body> Letakan kode java script di bawah ini tepat di atas kode tersebut.
<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>4.Terakhir simpan templat
cara menerapkan Efek pada artikel silahkan ikuti cara di bawah ini agar tag kbd berfungsi dengan baik.
Cara menerapkan tag HTML kbd di postingan agar bisa di Select
Buat postingan baru pilih kata di yang ingin di beri Efek Double Click To Select dengan kode ini <kbd>Ketikkan Teks disini</kbd> ganti tulisan Ketikkan Teks disini dengan teks pilihan kamu.
Apabila kamu ingin memasukan tag html dan javascript silah kan di parse dulu disini agar kode bisa muncul
membuat efek double click kbd sebenarnya bisa terbilang mudah tutorial yang saya berikan di atas semoga dapat membantu untuk membuat artikel responsive dan tidak ribet di mata pengunjung.
Itu saja tutorial tentang membuat efek double click to select di blogger semoga dapat bermanfaat bagi kamu terimakasih.
