Permalink Dengan Tombol Copy To Clipboard di Blog AMP

Diposting pada

Tombol Copy To Clipboard di Blog AMP

Membuat Permalink Dengan Tombol Copy To Clipboard di Blog AMP – Pernahkah teman mendengar kata permalink dalam sebuah blog? Link tautan permanen yang memiliki 2 pilihan, satu untuk tautan permanen otomatis dan yang satu nya lagi tautan permanen khusus. Permalink juga mampu kita sebut dengan link artikel untuk mengakses ke alamat artikel tersebut.

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

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

Permalink Dengan Tombol Copy To Clipboard di Blog AMP

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='"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>

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 Permalink Dengan Tombol Copy To Clipboard di Blog AMP yang bisa kamu coba. Bila ada pertanyaan menyangkut isi artikel di atas, silahkan tinggalkan komentar kamu dibawah. Jangan lupa untuk bagikan ke teman teman di social media kamu bila dirasa bermanfaat.

Tinggalkan Balasan

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