Cara Membuat Permalink Dengan Tombol Copy To Clipboard Untuk Blog AMP

Pernahkah sobat mendengar kata permalink dalam sebuah blog? Link tautan permanen yang mempunyai 2 pilihan, satu untuk tautan permanen otomatis dan yang satu nya lagi tautan permanen khusus. Permalink juga bisa kita sebut dengan link artikel untuk mengakses ke alamat artikel tersebut.

Dan sebagian blog yang menggunakan AMP mungkin ada yang menggunkan atau memasang tombol copy to clipboard di blog mereka. Fungsi nya sih sama seperti kita mengcopy alamat artikel yang kita miliki melalui address bar di browser kalian. Mungkin beda nya ini lebih mudah dan simple, kita hanya cukup mengklik pada tombol copy to clipboard dan alamat tersebut akan tersalin dengan otomatis.

Dan bagi sobat yang ingin mencoba untuk memasang tombol permalink copy to clipboard pada blog AMP sobat bisa ikuti langkah langkah nya dibawah ini.

Silahkan sobat pasang js amp-iframe dibawah ini pada template kalian. Tapi bila di template kalian sudah ada kode seperti dibawah ini, sobat bisa lewati langkah ini.

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

Lalu pasang kode CSS dibawah ini dan letakan pada style amp-custom blog AMP kalian.

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}

Dan yang terakhir silahkan copy kode HTML dibawah ini dan letakan kode tersebut 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>

Kelebihan Permalink dengan tombol Copy to clipboard untuk blog AMP ini bisa disimpan di dalam postingan, misalnya di bawah postingan atau di bawah judul artikel.

Untuk demonya silahkan coba di JSFiddle dibawah ini. Lalu klik ikon Copy to clipboard untuk menyalin permalink nya.



Itulah cara membuat tombol permalink copy to clipboard untuk blog AMP. Semoga artikel ini bisa bermanfaat buat sobat yang sedang mencari Cara Membuat Permalink Dengan Tombol Copy To Clipboard Untuk Blog AMP. Selamat mencoba!

Sumber Artikel : https://www.kompiajaib.com/2018/10/membuat-permalink-dengan-tombol-copy-to.html

Share this post