Skip to main content

follow us


www.azid.web.id - Cara Membuat Tombol Copy Clipbloard Link Pada Blog Non AMP. Sebenarnya setiap blog memiliki link yang sudah permanen sebagai url artikel agar antara artikel satu dengan yang lain tidak bertabrakan, jadi url setiap blog pasti berbeda satu dengan yang lain. Hal tersebut sering disebut dalam dunia blogger dengan nama "permalink" (permanen link).

Kadang kala disetiap postingan blog kita menjumpai sebuah tombol plus "+" dengan nama url postingan tersebut yang dibungkus dangan kotak panjang. Biasanya ditaruh diatas dan sering dibawah postingan. Peletakkan tombol ini disebut tombol clipboard permalink, peletakan tombol tersebut bertujuan untuk mempermudah pembaca mencopy-pasti url yang sedang ia baca tanpa susah menscroll ke address bar dan mencopy-nya. Dengan bantuan tombol tersebut tentunya mempermudah copy link dan membagikan atau menjadi sumber rujukan pembaca blog sobat.

Tombol clipboard sendiri selain untuk mempermudah pembaca mencopy url blog sobat juga memiliki manfaat untuk solusi mengatasi timbulnya link eketernal dan mengatasi link mati yang terkesan tidak spesial. Dengan menggunakan tombol clipboarad link ini tentunya akan terkesan menarak, lantaran selain bisa ditempel diatas atau bawah postingan juga bisa ditempatkan didalam postingan blog sobat.

Dengan membuat tombol clipboard permalink ini juga dapat berdampak baik pada skor SEO sobat, dikarenakan link yang sobat tempelkan berupa link mati yang hanya sebatas informasi link saja dan jika diklik tidak akan mengarah pada link tersebut. Dengan begitu link internal sobat akan semakin berkurang meskipun dapat disikapi dengan rel "nofollow".

Jika sobat ingin membuat tombol link clipboard permalink ini pada blog non AMP yang sobat miliki sobat bisa mengikuti tutorialnya dibawah ini:

Pertama, masuk blogger klik theme dan pilih edit HTML. Setelah itu copas kode berikut ini dan letakkan diatas kode </head>


<style>
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;}
.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;}
</style>

Kedua, langkah selanjutnya adalah jika sobat ingin menampilkan link otomatis dibawah atau diatas postingan sobat bisa meletakkan kode berikut ini diatas kode related post untuk dibawah postingan atau dibawah kode title postingan untuk diatas postingan. Sobat bisa mencarinya sendiri karena setiap template kadang berbeda-beda.


<div class="copybutton">
<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">
</iframe>
<b><data:post.url/></b>
</div>

Ketiga, sobat bisa save template.

Adapun untuk url manual dan menampilkan didalam postingan sobat bisa menggunakan kode dibawah ini


<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.domainanda.com/2019/04/cara-membuat-clipboard.html" width="35">
</amp-iframe>
<b>https://www.domainanda.com/2019/04/cara-membuat-clipboard.html</b>
</div>

KETERANGAN:

Ganti url "https://www.domainanda.com/2019/04/cara-membuat-clipboard.html" dengan url yang akan sobat jadikan link mati didalam postingan agar pengunjung bisa mengkliknya.

Untuk demonya sobat bisa copy dan pastekan pada new tab pada link dibawah ini, link tersebut akan memunculkan button clipboard permalink di atas postingan, didalam postingan dan bawah postingan.



https://demo-liputan9.blogspot.com/2018/10/kisah-koin-penyok-sebagai-pelajaran.html

Demikianalah tutorial saya tentang Cara Membuat Tombol Copy Clipbloard Link Pada Blog Non AMP. Semoga bermanfaat, Amin.
PERHATIAN!: setiap link template pada blog ini di direct 5 -7 kali jadi harap bersabar.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar