Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogging

Cara Membuat Text Box Dengan Copy to Clipboard Pada Blog

Posting Komentar


 Halo semua, pada kali ini admin akan membagikan script lagi yaitu membuat text box dengan fitur clipboard, script ini berguna untuk blog kalian yang membahas tutorial blogging atau untuk kode diskon dan promo.

Langkah - Langkah Pemasangan Text Box Dengan Copy to Clipboard

Pertama, salin kode JS di bawah ini, dan letakkan di atas kode <head> di dalam Edit HTML

<!-- click to copy js code / paste above </head> Tag -->   
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
<script src='https://clipboardjs.com/dist/clipboard.min.js'/>

Kedua, setelah itu salin kode script di bawah ini, ke dalam tag </body>

<!-- click to copy js script code / Paste above </body> Tag -->
<script>
 $(function() {
    var clipboard = new ClipboardJS('.ClickToCopyButton');   
     $(".ClickToCopyButton").click(function() { 
             $(this).html('Copied!!'); 
              var that = $(this);
              var intrvrl =  setInterval(function(){  
              that.html('Click to Copy'); 
              clearInterval(intrvrl); }, 
            2000);
     });
});
</script>

Ketiga, agar tampilan lebih bagus salin kode css di bawah ini antara kode ]]></b:skin> atau </style>

/*-------Click-to-copy-------*/

.copyarea {
    display: flex;
    position: relative;
    width: 100%;
    height: auto;
}


.copyarea textarea {
  width: 100%;
  box-sizing: border-box;
  border: none;
  padding-top: 34px;
  padding-bottom: 34px;
  padding-right: 11px;
  padding-left: 11px;
  background: #f5f6f7;
}


.copyarea textarea:focus-visible {
    outline: -webkit-focus-ring-color auto 0px;
}


button.ClickToCopyButton {
    width: 30%;
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #fff;
    background: #0066ff;
}

button.ClickToCopyButton:hover {
    background: #000;
}



@media screen and (max-width: 500px)
{button.ClickToCopyButton {
    width: 100%;
}}


/*----xx------------Click-to-copy-------------xxxx---*/

Keempat, terakhir salin kode html di bawah ini pada postingan kalian yang ingin di beri text box

<div class="copyarea">
  <textarea width="100%" rows="11" id="Add-Unique-Tag">Tambahkan Teks</textarea>
<button class="ClickToCopyButton" data-clipboard-target="#Add-Unique-Tag">Click to Copy</button>
</div>


Ganti tulisan "Tambahkan Teks" sesuai yang kalian inginkan.


Sampai disini sebenarnya sudah selesai, namun ada sedikit tambahan untuk mempercantik tampilan, kalian bisa menambahkan warna gradient pada tombol click to copy.

Salin kode CSS di bawah ini, dan letakkan di atas kode ]]></b:skin> atau </style>

background: #first-color;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #first-color, #second-color);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #first-color, #second-color); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: #second-color;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #second-color, #first-color);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #second-color, #first-color); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


Sampai disini sudah selesai, dan selamat mencoba.

Posting Komentar untuk "Cara Membuat Text Box Dengan Copy to Clipboard Pada Blog"