Cara Membuat Sumber Link Otomatis Saat Artikel Dicopy + Generator

---

Sumber link otomatis adalah fitur yang menambahkan informasi sumber ketika sebagian teks artikel disalin oleh pengunjung. Teks asli tetap dapat dicopy seperti biasa, tetapi hasil clipboard akan diberi tambahan judul artikel, URL sumber dan pesan atribusi.

Fitur seperti ini berguna ketika pembaca menyalin kutipan untuk catatan, tugas, dokumentasi atau membagikan sebagian isi artikel kepada orang lain. Informasi sumber yang ikut tersalin membantu pembaca mengetahui dari halaman mana teks tersebut berasal.

Versi lama script CodeFlare masih menggunakan jQuery dan hanya menulis hasil clipboard sebagai teks biasa. Pada pembaruan ini engine dibuat ulang menggunakan native JavaScript sehingga tidak membutuhkan jQuery.

Script baru juga mendukung dua format clipboard sekaligus. Jika ditempel pada Notepad, hasilnya berupa teks biasa. Jika ditempel ke editor yang mendukung rich text, sumber dapat tetap berupa link aktif.

Selain source code final, artikel ini menyediakan Generator Sumber Link Otomatis sehingga Anda dapat membuat konfigurasi sendiri tanpa mengedit JavaScript secara manual.

Informasi Singkat

---

Script tidak mencegah pengguna menyalin artikel. Fungsinya adalah menambahkan informasi atribusi pada hasil clipboard.

Versi terbaru menggunakan native JavaScript tanpa dependency jQuery.

Anda dapat menentukan target area, teks notifikasi, label sumber, nama sumber, pesan tambahan dan apakah URL akan ditampilkan.

DAFTAR ISI

1. Cara Kerja Sumber Link Otomatis
2. Live Preview Copy Artikel
3. Source Code Native JavaScript
4. Cara Memasang di Template Blogger
5. Cara Memasang lewat Gadget
6. Pengaturan Script
7. Generator Sumber Link Otomatis
8. Target Hanya Area Artikel
9. Plain Text dan HTML Clipboard
10. Troubleshooting

Cara Kerja Sumber Link Otomatis

Ketika pengunjung menyeleksi teks kemudian menjalankan perintah copy, browser memicu event copy.

JavaScript dapat membaca teks yang sedang diseleksi, menambahkan informasi sumber kemudian menulis hasil baru ke clipboard.

01 Select Pengunjung memilih teks

02 Copy Event copy berjalan

03 Process Script menambah sumber

04 Clipboard Teks + sumber tersimpan

Misalnya pengunjung menyalin:

Blogger merupakan platform blogging milik Google.

Hasil yang ditempel dapat menjadi:

Blogger merupakan platform blogging milik Google. © CodeFlare Sumber: Cara Membuat Sumber Link Otomatis Saat Artikel Dicopy https://www.example.com/artikel.html Harap sertakan sumber saat membagikan kutipan.

Bukan Sistem Anti-Copy Mutlak

Script ini tidak dapat menjamin artikel tidak akan disalin. Pengguna tetap dapat mengambil teks melalui source halaman, Reader Mode, JavaScript yang dimatikan atau metode lainnya. Gunakan fitur ini sebagai bantuan atribusi, bukan sebagai sistem DRM.

Live Preview Copy Artikel

Coba blok sebagian teks pada kotak berikut kemudian tekan Ctrl+C pada Windows/Linux atau Command+C pada macOS. Pada smartphone gunakan menu Copy setelah menyeleksi teks.

AUTO SOURCE LINK LIVE DEMO

Pilih dan copy sebagian teks ini.

CodeFlare mengembangkan berbagai tutorial Blogger, widget, JavaScript dan eksperimen antarmuka yang dapat digunakan sebagai bahan belajar maupun dikembangkan kembali sesuai kebutuhan project.

Setelah teks ini dicopy, informasi sumber akan otomatis ditambahkan ke clipboard.

COPY ENGINE READY Native JavaScript

Copy sebagian teks demo kemudian paste ke Notepad untuk melihat hasilnya.

Source Code Native JavaScript

Berikut engine final yang dapat digunakan pada Blogger maupun website biasa.

<script> //<![CDATA[ (function(){ "use strict"; var cfCopySetting={ target:".post-body", notify:true, notifyText:"Teks berhasil dicopy + sumber", sourceLabel:"Sumber", sourceName:"", showTitle:true, showUrl:true, message:"Harap sertakan sumber saat membagikan kutipan.", minLength:10 }; function cfCopyToast(text){ var old=document.getElementById("cfCopyToast"); if(old)old.remove(); var toast=document.createElement("div"); toast.id="cfCopyToast"; toast.textContent=text; toast.style.cssText= "position:fixed;"+ "z-index:999999;"+ "top:14px;"+ "left:50%;"+ "transform:translateX(-50%);"+ "max-width:calc(100% - 30px);"+ "padding:8px 12px;"+ "box-sizing:border-box;"+ "background:#0083da;"+ "color:#fff;"+ "font:inherit;"+ "font-size:13px;"+ "line-height:1.4;"+ "text-align:center;"+ "box-shadow:0 4px 15px rgba(0,0,0,.2);"+ "opacity:0;"+ "transition:opacity .2s ease;"; document.body.appendChild(toast); requestAnimationFrame(function(){ toast.style.opacity="1"; }); setTimeout(function(){ toast.style.opacity="0"; setTimeout(function(){ toast.remove(); },220); },1400); } function cfInsideTarget(selection,target){ if(!selection.rangeCount)return false; var range=selection.getRangeAt(0); var common=range.commonAncestorContainer; if(common.nodeType===3){ common=common.parentNode; } return target.contains(common); } function cfEscapeHtml(str){ return String(str) .replace(/&/g,"&") .replace(//g,">") .replace(/"/g,""") .replace(/'/g,"'"); } document.addEventListener("copy",function(e){ var selection=window.getSelection(); if(!selection||selection.isCollapsed)return; var text=selection.toString().trim(); if(text.length<cfCopySetting.minLength)return; var target=document.querySelector( cfCopySetting.target ); if(!target)return; if(!cfInsideTarget(selection,target))return; var url=location.href.split("#")[0]; var sourceName= cfCopySetting.sourceName.trim()|| document.title; var year=new Date().getFullYear(); var plainExtra= "\n\n© "+year+" "+sourceName; if(cfCopySetting.showTitle){ plainExtra+= "\n"+cfCopySetting.sourceLabel+ ": "+document.title; } if(cfCopySetting.showUrl){ plainExtra+="\n"+url; } if(cfCopySetting.message){ plainExtra+="\n"+cfCopySetting.message; } var plain=text+plainExtra; var container=document.createElement("div"); var range=selection.getRangeAt(0); container.appendChild( range.cloneContents() ); var htmlExtra= '<div style="margin-top:12px;font-size:12px;">'+ '<div>© '+year+" "+ cfEscapeHtml(sourceName)+ '</div>'; if(cfCopySetting.showTitle){ htmlExtra+= '<div>'+ cfEscapeHtml(cfCopySetting.sourceLabel)+ ': '+ cfEscapeHtml(document.title)+ '</div>'; } if(cfCopySetting.showUrl){ htmlExtra+= '<div><a href="'+ cfEscapeHtml(url)+ '">'+ cfEscapeHtml(url)+ '</a></div>'; } if(cfCopySetting.message){ htmlExtra+= '<div>'+ cfEscapeHtml(cfCopySetting.message)+ '</div>'; } htmlExtra+="</div>"; var html= container.innerHTML+ htmlExtra; if(e.clipboardData){ e.preventDefault(); e.clipboardData.setData( "text/plain", plain ); e.clipboardData.setData( "text/html", html ); if(cfCopySetting.notify){ cfCopyToast( cfCopySetting.notifyText ); } } }); })(); //]]> </script>

Tidak ada jQuery pada engine tersebut. Script hanya menggunakan API browser seperti Selection, copy event dan ClipboardEvent.clipboardData.

Cara Memasang di Template Blogger

BACKUP TEMPLATE

Sebelum mengedit HTML template Blogger, download backup tema terlebih dahulu agar dapat dikembalikan jika terjadi kesalahan.

01

Buka Blogger

Login kemudian pilih blog yang akan dipasang script.

02

Buka Tema

Pilih menu Tema.

03

Edit HTML

Buka menu tema kemudian pilih Edit HTML.

04

Cari </body>

Gunakan pencarian editor untuk menemukan tag penutup body.

05

Paste Script

Letakkan engine tepat sebelum </body>.

06

Simpan

Simpan template kemudian buka salah satu artikel untuk pengujian.

Pemasangan di template cocok jika fitur akan digunakan pada seluruh artikel.

Cara Memasang lewat Gadget

Jika tidak ingin mengedit template, script juga dapat dicoba melalui gadget HTML/JavaScript.

01

Buka Tata Letak

Pilih menu Tata Letak pada Blogger.

02

Tambahkan Gadget

Pilih area yang akan digunakan lalu klik Tambahkan Gadget.

03

HTML/JavaScript

Pilih gadget HTML/JavaScript.

04

Paste Script

Masukkan hasil dari generator atau source code final.

05

Simpan

Simpan gadget lalu buka halaman artikel.

Rekomendasi

Untuk penggunaan permanen dan seluruh halaman artikel, memasang satu engine di template biasanya lebih rapi daripada membuat banyak gadget dengan script yang sama.

Pengaturan Script

Semua konfigurasi berada pada object:

var cfCopySetting={ target:".post-body", notify:true, notifyText:"Teks berhasil dicopy + sumber", sourceLabel:"Sumber", sourceName:"", showTitle:true, showUrl:true, message:"Harap sertakan sumber saat membagikan kutipan.", minLength:10 };

target Area tempat script aktif. .post-body

notify Menampilkan toast setelah copy. true

notifyText Teks notifikasi. Copied

sourceLabel Label sebelum judul sumber. Sumber

sourceName Nama brand. Kosong = judul halaman. CodeFlare

showTitle Tambahkan judul artikel. true

showUrl Tambahkan URL halaman. true

message Pesan tambahan. Custom

minLength Minimal jumlah karakter agar engine aktif. 10

Pengaturan minLength berguna agar copy satu atau dua karakter tidak selalu mendapatkan tambahan sumber.

Generator Sumber Link Otomatis

Gunakan generator berikut untuk membuat script sesuai kebutuhan blog. Hasil generator tidak membutuhkan jQuery.

AUTO SOURCE GENERATOR Native JavaScript Engine

READY

Target Selector Contoh: .post-body, article, #main-wrapper

Teks Notifikasi

Label Sumber

Nama Sumber / Brand

Pesan Tambahan

Minimal Karakter

Format Clipboard Plain Text + HTML Plain Text Saja

Notifikasi Judul Artikel URL Sumber

PREVIEW OUTPUT

Setelah generator menghasilkan script, klik Copy Code kemudian tempel hasilnya sebelum </body> pada template Blogger.

Target Hanya Area Artikel

Salah satu peningkatan penting pada versi ini adalah penggunaan selector target.

Jangan selalu memasang event copy ke seluruh halaman jika sumber otomatis hanya dibutuhkan pada teks artikel.

Misalnya struktur template:

<div class="post-body"> Isi artikel... </div>

Gunakan:

target:".post-body"

Dengan begitu, copy pada menu, sidebar, komentar atau bagian lain tidak ikut dimodifikasi.

Sesuaikan Selector Template

Nama class area posting dapat berbeda pada setiap template. Gunakan Inspect Element untuk mengetahui wrapper konten artikel yang digunakan template Anda.

Plain Text dan HTML Clipboard

Clipboard browser dapat menyimpan beberapa representasi data sekaligus.

text/plain Digunakan ketika teks ditempel ke Notepad, textarea atau editor plain text.

text/html Dapat digunakan editor rich text sehingga format dan link dapat tetap tersedia.

Engine default generator menggunakan keduanya.

Jika Anda hanya ingin hasil yang sangat sederhana, pilih Plain Text Saja pada generator.

Troubleshooting

Sumber tidak ikut tercopy

Periksa selector target. Jika elemen target tidak ditemukan, script sengaja tidak mengubah clipboard.

Script bekerja di sidebar tetapi tidak di artikel

Selector target kemungkinan terlalu luas atau salah. Gunakan wrapper khusus konten artikel.

Notifikasi tidak muncul

Pastikan opsi notify:true dan tidak ada CSS template yang menutupi elemen dengan z-index lebih tinggi.

Hasil paste tidak mempunyai link aktif

Aplikasi tujuan mungkin hanya menerima plain text. Link HTML hanya dapat dipertahankan jika editor tujuan menerima format HTML clipboard.

Source code ikut mendapat sumber

Jika tidak ingin kotak kode terkena engine, pastikan area code berada di luar target atau tambahkan pengecualian selector pada versi custom.

Copy sangat pendek tidak ditambahkan sumber

Periksa nilai minLength. Default generator adalah 10 karakter.

Generator tidak bisa copy code

Browser tertentu membatasi Clipboard API. Generator menyediakan fallback selection agar kode tetap dapat disalin.

USER EXPERIENCE

Jangan menambahkan teks sumber yang terlalu panjang. Tujuan fitur adalah membantu atribusi, bukan membuat hasil clipboard sulit digunakan oleh pembaca.

Pembaruan script Sumber Link Otomatis ini menghilangkan dependency jQuery dan menggantinya dengan native JavaScript yang lebih mudah dipasang pada template Blogger modern.

Fitur utamanya tetap sederhana: ketika pembaca menyalin bagian artikel, script menambahkan informasi sumber tanpa memblokir fungsi copy.

Generator juga membuat script lebih fleksibel karena setiap blog dapat menggunakan selector, label sumber, pesan atribusi dan pengaturan clipboard yang berbeda.

Gunakan fitur ini secara proporsional. Membantu pembaca mengetahui sumber konten biasanya memberikan pengalaman yang lebih baik daripada memblokir seluruh fungsi select dan copy pada halaman publik.