Cara Membuat Tag Selection 'kbd' Dengan Efek Double Click To Select

Cara Membuat Tag Selection 'kbd' Dengan Efek Double Click To Select: Baikla shobat kali ini saya mau coba berbagi sedikit pengetahuan saya tentang cara membuat tag selection keren di postingan blog kamu dengan efek double click, tutorial ini sendiri saya bagikan karena ada temen pathner blog ini yang menanyakan cara membuat tag selection dengan efek double click itu bagimana??, nah di sini saya ingin menjawab pertanyaan temen saya mungkin juga akan bermanfaat bagi temen-temen blogger sekalian.
Tidak banyak pengetahuan saya tentang tag selection, tag selection setau saya di gunakan untuk membungkus kode dengan satu kata yang biasanya di gunakan untuk membungkus kode Html yang biasanya di gunakan untuk postingan blog dengan refrensi penyedia Tutorial blog seperti blog ini.
Sedikit contoh (demo) yang bisa saya berikan: DoubleClick nah itu adalah demo/contoh dari penggunaan tag selection 'kbd' dengan efek double click, jika shobat berminat memasangnya silahkan langsung ikuti tutorialnya di bawah ini.

Cara Membuat Tag Selection 'kbd' Dengan Efek Double Click To Select

Memasang CSS untuk Tag Selection 'kbd' Dengan Efek Double Click To Select, di blog.

1. Silahkan shobat masuk ke Blogger>Tema>Edit Html, Lalu silahkan shobat cari kode ]]></b:skin>, pastekan kode CSS berikut tepat di atasnya, untuk mempercepat pencarian shobat klik tombol

CTRL

+

F

pada keyboard shobat.

kbd{position:relative;color:#d50000}kbd:before{position:absolute;content:'Double click to select';display:table;bottom:23px;left:0;background:#4c4c4c;color:#00ffe4;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}kbd,blockquote{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}kbd{display:inline-block;border:1px solid #e9e9e9;box-shadow:1px 1px 1px#c3c3c3;border-radius:3px;padding:.2em .5em;margin:.2em;transition:all .3s}kbd:hover{border-color:#f9ff00;color:#0a9fbf}kbd,blockquote{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder,input:-moz-placeholder,textarea:-moz-placeholder,input.placeholder_text,textarea.placeholder_text{color:#888}[placeholder]:focus::-webkit-input-placeholder{transition:opacity .5s .5s ease;opacity:0}

Double click to select: Silahkan shobat ganti sesuai dengan selera shobat (Pesan Saat Mouse Di Hover)

2. Silahkan shobat save tema/template shobat.
3. Jika sudah selesai sekarang shobat buat postingan baru atau jika sudah ada postingan lama yang ingin di masukan tag selection di dalamnya shobat bisa gunakan itu.
Nah pada langkah ini gampang saja kamu tinggal pastekan kode berikut dalam mode HTML

<kbd>Text yang di bungkus</kbd>

Silahkan shobat ganti Text yang di bungkus dengan text selection shobat.

4. Jika sudah silahkan shobat pertinjau terlebih dahulu postingan shobat lalu lihat hasilnya, jika sudah terakhir shobat klik publish.

Oky mungkin sampe di sini dulu semoga tutorial saya ini bisa bermanfaat bagi shobat ku sekalian. jangan lupa lika dan share yaaa!!!!

Artikel Terkait