Membuat Permalink Dengan Tombol Copy To Clipboard Untuk Blog Amp

Permalink dengan tombol Copy to clipboard untuk blog AMP ini dapat disimpan di dalam postingan, contohnya di bawah postingan.

Ini memakai amp-iframe, menjalankan JS kustom yang dimuat di latar belakang dengan tombol placeholder yang tetap terlihat.

Untuk demonya silahkan coba di JSFiddle berikut ini. Silakan klik ikon Copy to clipboard untuk menyalin permalink-nya.

Jika Anda ingin mencobanya, silahkan ikuti langkah-langkahnya di bawah ini.

Silahkan pasang js amp-iframe berikut di edit HTML blog Anda, kalau sudah ada maka tidak perlu pasang lagi.

 <script async="async" custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Kemudian tambahkan CSS berikut di style amp-custom blog AMP Anda.

  button.copy-button{box-sizing:border-box;font:inherit;font-size:14px;line-height:1.2;border:2px solid transparent;background:#555;padding:0;text-align:center;color:#fff;display:block;cursor:not-allowed;width:100%;height:100%}
 .copybutton{display:flex;align-items:center;padding:0;margin:0;font-size:14px;font-weight:400;background:#E53935;color:#B71C1C;}
 .copybutton p{font-size:14px;font-weight:400;margin:0;padding:0 10px;height:35px;line-height:35px;background:rgba(255,255,255,.85);overflow:hidden;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap;width:100%}
 .copy-button svg{width:18px;height:18px;vertical-align:middle}
 .copy-button svg path{fill:#fff} 

Kemudian silahkan gunakan HTML berikut untuk menampilkan permalink dengan tombol Copy to clipboard untuk blog AMP ini, silahkan simpan di bawah postingan.

  <div class='copybutton'>
   <amp-iframe expr:src='&quot;https://cdn.staticaly.com/gh/KompiAjaib/kompi-html/master/copier_1.6.html#&quot; + data:post.url' frameborder='0' height='35' sandbox='allow-scripts' width='35'>
     <button class='copy-button' disabled='' placeholder=''><svg width="24px" height="24px" viewBox="0 0 24 24"><path fill="#000000" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" /></svg></button>
   </amp-iframe>
   <p><data:post.url/></p>
 </div> 

Selesai dan selamat mencoba.

Sumber: https://ampbyexample.com/playground/#url=https%3A%2F%2Fampbyexample.com%2Fadvanced%2Fcopy_button%2Fsource%2F

Share this post