Menempatkan Tombol Salin ke Papan Klip di Halaman Web: 5 Langkah (dengan Gambar)
Menempatkan Tombol Salin ke Papan Klip di Halaman Web: 5 Langkah (dengan Gambar)

Daftar Isi:

Anonim
Menempatkan Tombol Salin ke Papan Klip di Halaman Web
Menempatkan Tombol Salin ke Papan Klip di Halaman Web

Ini mungkin terdengar sederhana, dan saya mungkin terlihat konyol untuk meletakkannya di Instructables, tetapi pada kenyataannya, itu tidak mudah. Ada CSS, Jquery, HTML, beberapa javascript mewah, dan, oh well, Anda tahu.

Langkah 1: Buat Pena

Buat Pena
Buat Pena

Ada situs keren bernama Codepen. Di masa lalu, hanya untuk membuat kode dalam HTML, saya harus

  1. Luncurkan File Explorer.
  2. Buka Dokumen Saya.
  3. Buat file.txt.
  4. Ganti nama file itu menjadi "MyHTMLDoc.html".
  5. Tekan OK untuk dialog peringatan.
  6. Tutup Penjelajah Berkas.
  7. Buka Visual Studio, yang membutuhkan waktu lima menit.
  8. Buka file di Visual Studio, yang membutuhkan waktu lima menit lagi. VS sangat lambat.
  9. Awal.
  10. Setelah selesai, saya harus membuka file di Edge untuk melihat pekerjaan saya.

Sekarang, yang perlu Anda lakukan adalah

  1. Luncurkan Tepi.
  2. Buka
  3. Di sudut kanan atas, tekan Pena baru.
  4. Mulai Pengkodean.

Lihat betapa lebih mudahnya? Cukup masukkan JS, CSS, dan HTML Anda di kotak masing-masing. Hasilnya muncul secara otomatis di sebelah kanan.

Faktanya, Codepen jauh lebih baik, saya menyarankan Anda untuk membuat akun Anda sekarang. Ya, saya benci menjadi orang yang mengiklankan, tapi saya tidak bisa menahannya. Ini jauh lebih baik. Tidak ada yang bisa saya lakukan.

Atau, jika Anda tidak ingin membuat akun, Anda dapat membuat pena tanpa akun. Anda dapat menyimpan pena Anda di bawah nama pengguna "Kapten Anonim".

Langkah 2: Tambahkan Referensi

Tambahkan Referensi
Tambahkan Referensi

Karena kita akan menggunakan Jquery dan hal yang (sangat) keren ini disebut "Balloon.css", kita harus menambahkan referensi terlebih dahulu. Jika Anda baru, saya akan memberi tahu Anda cara melakukannya di Codepen.

  1. Klik Pengaturan.
  2. Bergantung pada apakah referensi adalah lembar gaya atau skrip, klik CSS atau Javascript.
  3. Di bawah Tambahkan Eksternal (Javascript atau CSS) tambahkan referensi.

Menambahkan:

bla bla bla: BLAAAAAAA!!!!

Sekarang hapus itu dan masukkan tag HTML yang menautkan ke CDN favorit Anda untuk Jquery dan Balloon.css.

Langkah 3: Kode

Kode
Kode

Di bawah itu, tambahkan kode ini.

codepen.io/slate-coding/pen/oepQpX

Salin / tempel kode ke pena Anda.

Langkah 4: Mengubah Kode Itu Sesuai dengan Kebutuhan Anda

Mengubah Kode Itu Sesuai dengan Kebutuhan Anda
Mengubah Kode Itu Sesuai dengan Kebutuhan Anda

Anda dapat bermain-main sebanyak yang Anda suka dengan pena sesuai dengan kebutuhan Anda, lalu copy-paste kode ke mana pun Anda inginkan.

Langkah 5: Demo

Demo
Demo

codepen.io/alexvgs/pen/oepQpX