Cara Menciptakan Permalink Dengan Tombol Copy To Clipboard Untuk 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 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 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 dapat ikuti langkah langkah nya dibawah ini.

Silahkan teman pasang js amp-iframe dibawah ini pada template kalian. Tapi jika di template kalian sudah ada aba-aba menyerupai dibawah ini, teman 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 aba-aba 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 aba-aba HTML dibawah ini dan letakan aba-aba 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 teman yang sedang mencari Cara Membuat Permalink Dengan Tombol Copy To Clipboard Untuk Blog AMP. Selamat mencoba!

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

Bagikan Artikel ini