Membuat Permalink Dengan Tombol Copy To Clipboard di Blog Valid AMP

Membuat Permalink Dengan Tombol Copy To Clipboard di Blog Valid AMP - Permalink atau permanen link merupakan sebuah url yang ditaruh secara permanen di dalam postingan blog. Artinya link tersebut akan menuju ke sebuah halaman yang permanen, maka sewajarnya link ini harus dibedakan dengan link lainnya.

Link seperti ini biasanya digunakan untuk menaruh permalink keluar dari blog kita, misalnya ke alamat url blog lain yang berkaitan dengan topik pembicaraan pada saat itu. Link seperti ini akan menimbulkan external link jika kita menaruh link hidup didalam url tersebut, namun jika kita hanya menempatkan url saja (link mati), maka url tersebut tidak akan menjadi spesial dimata para pembaca.

Baca Juga : Fitur Terbaru "Test this link" di Blogger

Untuk solusi mengatasi timbulnya external link dan mengatasi link mati yang terkesan tidak spesial tersebut, kini ada terobosan yang dapat anda pakai dan terapkan di blog anda. Yaitu dengan menggunakan tombol Copy to Clipboard dan menggunakan Auto Selection pada url (link mati) tersebut. Tujuannya agar permalink tersebut dapat ditempatkan dengan spesial dan mudah untuk copy linknya tanpa menimbulkan external link.

Hal ini juga akan berdampak baik pada skor audit SEO anda, karena anda secara tidak langsung juga akan mengurangi atau bahkan menghilangkan jumlah external link yang ada di blog anda. Jika anda mempunyai external link yang terlalu banyak tanpa mengimbangi jumlah internal link yang ada di blog anda, hal tersebut akan berdampak negatif pada skor audit SEO anda.

Permalink dengan tombol Copy to clipboard Valid AMP ini bisa anda gunakan di dalam postingan, misalnya di bawah postingan atau ditempat anda menaruh permalink. Ini menggunakan amp-iframe sebagai tempat untuk menjalankan java script copy button yang dimuat di latar belakang.

Untuk demonya silahkan coba buka JSFiddle berikut ini. Silakan klik ikon Copy to clipboard untuk menyalin permalink-nya, atau silahkan klik permalink-nya untuk mengaktifkan auto selection.


Pertama, silahkan masuk pada menu "Edit HTML" pada blog anda dan pasang terlebih dahulu .js amp-iframe berikut ini diatas kode </head>, namun jika sudah ada, anda tidak perlu memasangnya lagi.

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

Kemudian simpan css berikut ini pada style-custom template amp blog anda.

button.copy-button{box-sizing:border-box;font:inherit;padding:0;display:block;cursor:not-allowed;width:100%;height:100%}
.copybutton:hover:before {  content: "Cick here to copy this link";padding: 5px 10px;position: absolute;margin-top:-70px;text-align: right;color: #fff;background: #6703ff;border-radius: 20px 20px 20px 0;transition:all .4s ease-in-out;font-size: 90%;line-height:normal;margin-left:20px}
.copybutton{background-color:#e0ccff;background: -webkit-linear-gradient(left,#e0ccff 0,#ffcce0 100%);background: linear-gradient(to right,#e0ccff 0,#ffcce0 100%);-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all;display:flex;align-items:center;padding:0;margin-top:5px;font-size:14px;font-weight:400;color:#000;width:min-content;}
.copybutton b {font-size:16px;font-weight:400;margin:0;padding:0 10px;height:35px;line-height:35px;overflow:hidden;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap;} 

Lalu klik "Simpan Template", dari sini tahap pemasangan sudah selesai, anda tinggal mengimplementasikan ke dalam postingan.

Ada 2 cara untuk mengimplementasikan tombol Copy to clipboard ini, jika anda menggunakannya untuk memasang permalink url halaman lain maka gunakan kode HTML berikut ini dan simpan dalam postingan anda (HTML mode).

<div class="copybutton">
<amp-iframe frameborder="0" height="35" sandbox="allow-scripts" src="https://cdn.staticaly.com/gh/rokim5421/kangkimin/e13f436e/copier.html#https://www.kangkimin.com/2019/04/cara-membuat-gradasi-warna-di-blog.html" width="35">
</amp-iframe>
<b>https://www.kangkimin.com/2019/04/cara-membuat-gradasi-warna-di-blog.html</b>
</div>

Keterangan :
Ganti permalink atau alamat url yang sudah saya tandai dengan alamat url yang ingin anda tempatkan.

Namun bila anda ingin menggunakannya untuk memasang permalink url halaman itu sendiri maka gunakan kode HTML berikut ini dan simpan langsung dalam menu "Edit HTML" template AMP blog anda (jadi tidak perlu melalui postingan).

<div class="copybutton">
<amp-iframe frameborder="0" height="35" sandbox="allow-scripts" expr:src='&quot;https://cdn.staticaly.com/gh/KompiAjaib/kompi-html/master/copier_1.6.html#&quot; + data:post.url' width="35">
</amp-iframe>
<b><data:post.url/></b>
</div>

Sekian pembahasan saya mengenai Cara Membuat Permalink Dengan Tombol Copy To Clipboard di Blog Valid AMP, semoga bermanfaat bagi anda semua, selamat mencoba :)