Ditulis oleh: Ditulis pada: 10/31/2018
Membuat Permalink Dengan Tombol Copy To Clipboard Untuk Blog AMP - Permalink adalah kependekan dari Permanen Link yang secara sederhana dapat diartikan sebuah tautan yang permanen yang mengarah ke sebuah halaman postingan blog.Sebenarnya permalink bukanlah sebuah link, tetapi merupakan sebuah URL. Ini karena kebiasaan penyebutan Permalink yang sebenarnya sebuah URL. Karena permalink merupakan sebuah alamat dari sebuah halaman web yang bersifat permanen, maka permalink dibuat secara unik. Artinya permalink dibuat berbeda antara satu dan lainnya agar ketika diakses tidak salah alamat.
Dan kali ini saya akan membagikan cara membuat atau menampilkan permalink dengan tombol Copy to clipboard untuk blog AMP. Ini berguna untuk memudahkan pengunjung untuk meng-copy Permalink atau URL postingan.
Permalink dengan tombol Copy to clipboard untuk blog AMP ini bisa disimpan di dalam postingan, misalnya di bawah postingan.
Ini menggunakan 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, jika 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='"https://cdn.staticaly.com/gh/KompiAjaib/kompi-html/master/copier_1.6.html#" + 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