Cara Membuat Click to Copy Pada Syntax Highlighter

Syntax highlighter adalah sebuah wadah dari kode script agar tidak berantakan. Pada umumnya, di syntax highlighter ada fitur double click to selection, tetapi itu mungkin agak ribet bagi pengunjung blog, atau malah tidak ada fitur tersebut.
Jika kebetulan sobat memiliki blog yang sering membagikan tutorial, dan berisi source kode. sobat bisa pasang syntax highlighter dahulu agar lebih mudah dalam mengikuti tutorial ini.
Nah mulai sekarang, agar memudahkan pengunjung blog, kita pasang nih clipboard.js. Jadi tinggal klik tombol copy to clipboard, nanti kode yang ada di syntax highlighter akan ter copy, dengan ini pengunjung blog tidak akan ribet seleksi dan copy kode yang ada di syntax highlighter.
Silahkan sobat ikuti dengan baik tutorial Membuat Click to Copy Pada Syntax Highlighter ini, agar tidak terdapat kesalahan.

Cara Membuat Click to Copy Pada Syntax Highlighter

Sebelumnya, kita pasang dulu javascript clipboard.js nya agar tombolnya bisa berfungsi.

Masuk ke dasbor Blogger, lalu maasuk ke Template>Edit HTML, Pasti sudah tahu lah ya.

lalu cari kode </body> dan tambahkan kode di bawah ini tepat diatasnya

<script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js'/>
<script type='text/javascript'>
var clipboard = new ClipboardJS(&#39;.copytoclipboard&#39;);
</script>

Kemudian sobat cari lagi kode [[</b:skin< atau </style> dan tambahkan kode ini, tepat diatasnya.

/* click to copy by masgimenz.com */
.copytoclipboard {
  background-color: #eaeaea;
  border: none;
  color: #3e3e3e;
  padding: 10px;
  margin: auto;
  border-radius: 4px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.04), 0 3px 1px -2px rgba(0, 0, 0, 0.05), 0 1px 5px 0 rgba(0, 0, 0, 0.04);
  font-size: 16px;
  cursor: pointer;
}
.copytoclipboard:hover {
  background-color: #0e0e0e;
  color: #fff;
}

kalau sudah selesai, lalu Simpan.

Cara Menggunakan Click to Copy Pada Syntax Highlighter

Untuk menggunakan Click to Copy pada syntax highlighter sangat mudah, tentunya kita pakai kode button sebagai pemanggilnya.

caranya copas kode di bawah ini dan letakkan dibawah Syntax Highlighter yang berisi kode atau apapun yang ada di syntax highlighter pada Postingan blog, atau halaman yang ada syntax highlighter nya.

code nya :

<div style="text-align: center;">
<button class="copytoclipboard" data-clipboard-target="#kode" style="text-align: center;">
<i class="fa fa-clipboard"></i>
</button>
</div>

Perlu di ingat! jika, sobat akan menggunakan tombol dalam jumlah banyak ataupun lebih dari satu, sobat harus mengubah kode seperti yang saya beri warna merah silahkan sobat ganti, atau tambahkan angka dibelakangnya, contoh #kode1 dan juga di setelah tag <code> tambahkan juga id nya sama persis dengan #kode1, jadi lengkapnya seperti ini <code id="kode1">. Jadi kita hanya perlu menambahkan id="kode1" tepat di setelah tag <code (disini)>.

kalau bingung, sobat lihat gambar di bawah ini supaya lebih jelas.

Kalau masih bingung pengen yang simple tinggal pakai, saya beri kode nya seperti pada gambar di atas.

<pre><code ="kode1">

 <!-- sebuah kode HTML CSS JAVASCRIPT --> syntax ke satu

</code></pre>

<div style="text-align: center;">
<button class="copytoclipboard" data-clipboard-target="#kode1" style="text-align: center;">
<i class="fa fa-clipboard"></i>
</button>
</div>

Masih bingung juga? coba cermati dengan baik dan ulangi dari awal lagi, kalau sudah nyerah dan masih ngotot pengen pasang tombol itu atau ada masalah bisa sobat tanyakan di komentar. atau sobat juga bisa menghubungi saya lewat kontak yang tersedia.

Membuat Click to Copy Pada Syntax Highlighter memang agak ribet juga, tetapi ini akan membuat pengunjung blog menjadi semakin mudah. Karena tugas blogger adalah menyajikan informasi yang jelas dan mudah di akses. hehehe

sekian artikel tentang Cara Membuat Click to Copy Pada Syntax Highlighter kali ini. Semoga bermanfaat bagi semua. Terima kasih.

Bagikan Artikel ini