Cara Menciptakan Permalink Dengan Tombol Copy To Clipboard Untuk Blog Amp

Pernahkah sahabat 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 dapat 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 menyerupai kita mengcopy alamat artikel yang kita miliki melalui address kafetaria 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 sahabat yang ingin mencoba untuk memasang tombol permalink copy to clipboard pada blog AMP sahabat dapat ikuti langkah langkah nya dibawah ini.

Silahkan sahabat pasang js amp-iframe dibawah ini pada template kalian. Tapi jikalau di template kalian sudah ada isyarat menyerupai dibawah ini, sahabat dapat lewati langkah ini.

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

Lalu pasang isyarat 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 isyarat HTML dibawah ini dan letakan isyarat 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 dapat disimpan di dalam postingan, contohnya 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 menciptakan tombol permalink copy to clipboard untuk blog AMP. Semoga artikel ini dapat bermanfaat buat sahabat yang sedang mencari Cara Membuat Permalink Dengan Tombol Copy To Clipboard Untuk Blog AMP. Selamat mencoba!

Sumber Artikel : https://bacainartikel.blogspot.com/search?q=cara-membuat-permalink-dengan-tombol-copy-to-clipboard

Berbagi :