Cara Membuat Efek Double Click To Select Di Blogger
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-langkah di bawah ini untuk membuat efek kbd di postingan blog kamu
Keuntungan memasang efek double clik di blog
Mempermudah pengunjung untuk menerapkan tutorial yang ada dalam artikel
Melindungi dari pencurian artikel( apa bila memasang script anti copas dengan efek double klik 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 efek hover
- #4c4c4c : Warna backgroud teks hover kbd
- 75% : Ukuran font teks hover
Agar lebih responsive dan bagus silahkan modifikasi kode di atas sesuai selera kamu
3. Selanjutnya cari kode </body> Letakkan kode java script di bawah ini tepat di atas kode tersebut.
3. Selanjutnya cari kode </body> Letakkan 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 template
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 silahkan 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.
Apabila kamu ingin memasukan tag html dan javascript silahkan 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.
Belum ada Komentar untuk "Cara Membuat Efek Double Click To Select Di Blogger"
Posting Komentar