Membuat Tombol Copy URL dengan JavaScript / jQuery / HTML

5 Juni 2022
Baca 6 menit
3151 Views

Daftar Isi

Berikut ini adalah 5 contoh kode untuk membuat tombol copy URL atau Share URL menggunakan JavaScript / jQuery / HTML tanpa plugin tambahan, Anda dapat memilih salah satu dari 5 metode berikut untuk membuat tombol copy URL.

 

Membuat Tombol Copy URL dengan JavaScript / jQuery / HTML

Menggunakan JavaScript + Sweetalert

Kode JavaScript + Sweetalert

<html>
<button class="izdan-btn" onclick="copyToClipboard()" aria-label="Copy Link"> <svg xmlns="http://www.w3.org/2000/svg" class="izdan-icon bi-link-share" viewBox="0 0 16 16">
  <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
  <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
</svg></button>
 
 
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
function copyToClipboard(text) {
var inputc = document.body.appendChild(document.createElement("input"));
inputc.value = window.location.href;
document.execCommand('copy');
inputc.parentNode.removeChild(inputc);
Swal.fire(
  'Mantap!!!',
  'URL berhasil dicopy & ditambahkan ke papan klip!',
  'success'
);
}
</script>

<style>
.izdan-btn {
background-color: #007e8c;
width: 50px;
height: 50px;
border: 3px solid #00a1b3;
border-radius: 50px;
color: white;
}
.izdan-btn:hover {
background-color: #006666;
}
.izdan-icon {
fill: white;
}
</style>
</html>

Cara menggunakan kode di atas:

  1. Copy kode di atas
  2. Tambahkan HTML block pada halaman yang ingin Anda tambahkan tombol tersebut, lalu paste kode di atas

Output:

Ketika tombol diklik, browser akan memberikan sweetalert dengan animasi: URL berhasil dicopy & ditambahkan ke papan klip!, Anda dapat mengganti teks alert dengan memodifikasi kode di atas.

Tes Hasil:

 

Menggunakan JavaScript Tanpa Sweetalert

Kode JavaScript

<html>
<button class="izdan-btn" onclick="copyToClipboard()" aria-label="Copy Link"> <svg xmlns="http://www.w3.org/2000/svg" class="izdan-icon bi-link-share" viewBox="0 0 16 16">
  <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
  <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
</svg></button>

<script>
function copyToClipboard(text) {
var inputc = document.body.appendChild(document.createElement("input"));
inputc.value = window.location.href;
inputc.select();
document.execCommand('copy');
inputc.parentNode.removeChild(inputc);
alert("URL berhasil dicopy & ditambahkan ke papan klip!");
}
</script>

<style>
.izdan-btn {
background-color: #007e8c;
width: 50px;
height: 50px;
border: 3px solid #00a1b3;
border-radius: 50px;
color: white;
}
.izdan-btn:hover {
background-color: #006666;
}
.izdan-icon {
fill: white;
}
</style>
</html>

Cara menggunakan kode di atas:

  1. Copy kode di atas
  2. Tambahkan HTML block pada halaman yang ingin Anda tambahkan tombol tersebut, lalu paste kode di atas

Output:

Ketika tombol diklik, browser akan memberikan alert: URL berhasil dicopy & ditambahkan ke papan klip!, Anda dapat mengganti teks alert dengan memodifikasi kode di atas.

Tes Hasil:

 

 

Menggunakan jQuery + Sweetalert

Kode jQuery + Sweetalert

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var $temp = $("<input>");
var $url = $(location).attr('href');
$('#btn').click(function() {
Swal.fire({         //displays a pop up with sweetalert
                    icon: 'success',
                    title: 'URL berhasil disalin',
                    showConfirmButton: false,
                    timer: 1200
                });
$("body").append($temp);
$temp.val($url).select();
document.execCommand("copy");
$temp.remove();
});
});
</script>
</head>
<body>
<p class="izdan-button"><button id="btn" class="izdan-btn" aria-label="Copy Link"> <svg xmlns="http://www.w3.org/2000/svg" class="izdan-icon bi-link-share" viewBox="0 0 16 16">
  <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
  <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
</svg></button></p>


<style>
.izdan-btn {
background-color: #007e8c;
width: 50px;
height: 50px;
border: 3px solid #00a1b3;
border-radius: 50px;
color: white;
}
.izdan-btn:hover {
background-color: #006666;
}
.izdan-icon {
fill: white;
}
.text {
font-size: 100px;
}

</style>
</body>
</html>

Cara menggunakan kode di atas:

  1. Copy kode di atas
  2. Tambahkan HTML block pada halaman yang ingin Anda tambahkan tombol tersebut, lalu paste kode di atas

Output:

Ketika tombol diklik, browser akan memberikan sweetalert: URL berhasil disalin, Anda dapat mengganti teks alert dengan memodifikasi kode di atas.

Tes Hasil

 

Menggunakan jQuery Tanpa Sweetalert

Kode jQuery

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var $temp = $("<input>");
var $url = $(location).attr('href');
$('#btn').click(function() {
$("body").append($temp);
$temp.val($url).select();
document.execCommand("copy");
$temp.remove();
$(".izdan-button").text("URL berhasil disalin & ditambahkan ke papan klip!");
});
});
</script>
</head>
<body>
<span><button id="btn" class="izdan-btn" aria-label="Copy Link"> <svg xmlns="http://www.w3.org/2000/svg" class="izdan-icon bi-link-share" viewBox="0 0 16 16">
  <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
  <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
</svg></button></span>
 <p class="izdan-button">Klik tombol untuk menyalin URL!</p>

<style>
.izdan-btn {
background-color: #007e8c;
width: 50px;
height: 50px;
border: 3px solid #00a1b3;
border-radius: 50px;
color: white;
}
.izdan-btn:hover {
background-color: #006666;
}
.izdan-icon {
fill: white;
}
.text {
font-size: 100px;
}
.izdan-button {
text-align: center;
}


</style>
</body>
</html>

Cara menggunakan kode di atas:

  1. Copy kode di atas
  2. Tambahkan HTML block pada halaman yang ingin Anda tambahkan tombol tersebut, lalu paste kode di atas

Output:

Ketika tombol diklik, tulisan Klik tombol untuk menyalin URL! akan diganti dengan URL berhasil disalin & ditambahkan ke papan klip!, Anda dapat mengganti teks dengan memodifikasi kode di atas.

Tes Hasil:

Klik tombol untuk menyalin URL!

Menggunakan HTML

Kode HTML

<html>
<button class="izdan-btn" onclick="prompt('Silakan copy URL',window.location.href)" aria-label="Copy Link"><svg xmlns="http://www.w3.org/2000/svg" class="izdan-icon bi-link-share" viewBox="0 0 16 16">
  <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
  <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
</svg></button>

<style>
.izdan-btn {
background-color: #007e8c;
width: 50px;
height: 50px;
border: 3px solid #00a1b3;
border-radius: 50px;
color: white;
}
.izdan-btn:hover {
background-color: #006666;
}
.izdan-icon {
fill: white;
}
.text {
font-size: 100px;
}

</style>
</html>

Cara menggunakan kode di atas:

  1. Copy kode di atas
  2. Tambahkan HTML block pada halaman yang ingin Anda tambahkan tombol tersebut, lalu paste kode di atas

Output:

Ketika tombol diklik, akan muncul jendela popup untuk mengcopy URL: Silakan copy URL, Anda dapat mengubah teks perintah dengan memodifikasi kode di atas.

Tes Hasil:

 

Note:

Seluruh kode di atas sudah ditambahkan kode custom CSS, silakan Anda modifikasi sesuai selera Anda. Anda juga dapat memisahkan kode CSS dan meletakkannya di tempat yang lain, contohnya di Custom CSS melalui menu kustomisasi tema jika Anda menggunakan WordPress, atau menggunakan plugin Code Snippets, atau melalui custom CSS di page builder yang Anda gunakan. Contoh kode bisa diaplikasikan di mana saja, tidak hanya di situs yang menggunakan CMS WordPress.

Kesimpulan:

Kita dapat membuat tombol copy URL di WordPress dengan mudah tanpa perlu menginstall plugin tambahan, hanya dengan HTML, atau JavaScript, atau jQuery. Contoh kode di atas juga dapat di jalankan di website non WordPress. Anda dapat memisahkan kode CSS dari daftar kode di atas dan meletakkanya di tempat yang lain.

Tags: , ,

Penulis: Mohammad Ridwanullah

Founder www.zaad.my.id | Author | Web Developer | Alumni Darul Ihsan Sana Daja & Ma'had Al-Ittihad Al-Islami Camplong. Melanjutkan pendidikan S1 Fakultas Syariah di LIPIA Jakarta. Melanjutkan pendidikan S2 di Fakultas Syariah jurusan Fiqh dan Ushul Fiqh di LIPIA Jakarta.

Artikel Terkait

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

© 2021 – 2025 | www.zaad.my.id | All Rights Reserved
file-adduserslaptop-phoneclockdownloadmagnifiercrossmenulistchevron-leftchevron-right linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram