Cara Membuat Fitur Double Click to Copy di Blogger

Cara membuat fitur double click to copy pada syntax highlighter di blogger dengan javascript.
Membuat fitur double click to copy pada syntax highlighter

Cara memasang fitur click to copy/select all di blogger - berguna untuk menyeleksi/menyalin kode di bagian tag <pre><code> pada Syntax Highlighter di dalam artikel.

Fitur ini sangat memudahkan pengunjung dalam menyeleksi kode yang panjang pada syntax highlighter di beberapa bagian artikel cukup tekan/click 2x sudah otomatis tercopy maupun diseleksi. Fitur ini cocok untuk blog yang membahas seputar tutorial terkait HTML, JavaScript dan CSS.

Dengan menggunakan kode JavaScript khusus fitur ini tidak akan mempengaruhi Kecepatan Loading blog jadi tidak perlu khawatir, tidak hanya itu ini juga dilengkapi dengan tampilan Notifikasi Copied menggunakan CSS untuk memberitahu pengunjung bahwa kode yang di select sudah tersalin.

Penasaran? bagaimana membuat fitur Double Click to Copy diblog langsung saja simak tutorialnya berikut ini.

Tutorial Memasang Double Click to Select All dan Copy Pre Content

Cara memasang fitur ini di Blogger tidak memerlukan banyak pengetahuan tentang HTML, CSS, atau JS sebab tutorial ini cukup mudah dipahami untuk itu pastikan ikuti step by step agar tidak ada masalah!

Peringatan!Sebelum memulai menambahkan Kode dalam template blog, sebaiknya di Backup terlebih dahulu Tema / Template anda saat ini, untuk menghindari jika terjadi masalah, anda dapat mengembalikan templatenya seperti semula.

  1. Buka akun blog di Blogger.com
  2. Lalu pilih menu Tema
  3. Klik ikon panah ke bawah di sebelah tombol 'Sesuaikan' 
  4. Tekan Edit HTML, otomatis diarahkan ke halaman kode XML. Edit HTML
  5. Selanjutnya tekan CTRL F dan temukan Kode tag ]]></b:skin> atau </style> dan tambahkan kode CSS berikut tepat diatasnya.
  6. /* Copied Notification by Guntur */
    .tNtf span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background:#323232;color:rgba(255,255,255,.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px; box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:slideinwards 2s ease forwards;-webkit-animation:slideinwards 2s ease forwards}
    @media screen and (max-width:500px){.tNtf span{margin-bottom:20px;left:20px;right:20px;font-size:13px}}
    @keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
    @-webkit-keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
    .drK .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}
    Posisi css di <style>

    Jika template anda memiliki fitur mode gelap / dark mode, anda dapat menyesuaikan nama class pada kode css .drK setiap template memiliki tag class mode gelap yang berbeda, jadi silahkan sesuaikan.

    Untuk menampilkan pesan Double Click to Copy pada kolom Syntax Highlighter Anda dapat menambahkan kode CSS berikut tepat di bawah CSS di atas, catatan khusus untuk Template Versi Terbaru dari Median UI, Fletro Pro dan iMagz.

    .pre:not(.tb):hover::before{content:'Double click to Copy'}
  7. Selanjutnya tambahkan kode tag pemanggil HTML berikut tepat dibawah kode  <body> atau &lt;body&gt;.

  8. <!--[ Copied Notification by Guntur ]-->
    <div id='toastNotif' class='tNtf'></div>
    Letakkan posisi tag html tepat dibawah <body>
  9. Lalu tambahkan kode JavaScript berikut tepat diatas kode  </body> atau jika tidak ketemu cari kode body yang sudah diparse seperti ini &lt;/body&gt;.

  10. <b:if cond='data:view.isSingleItem'>
      <script>/*<![CDATA[*/ /* Pre Content Copied by Guntur */ for(var preClick=document.getElementsByTagName("pre"),i=0;i<preClick.length;i++)preClick[i].addEventListener("dblclick",function(){var e=getSelection(),o=document.createRange();o.selectNodeContents(this),e.removeAllRanges(),e.addRange(o),document.execCommand("copy"),e.removeAllRanges(),document.querySelector("#toastNotif").innerHTML="<span>Copied to clipboard!</span>"},!1); /* double click */ for(var pres=document.querySelectorAll("pre,code,kbd"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1); /*]]>*/</script>
    </b:if>
    Letakkan posisi javascript di atas </body>
  11. Terakhir klik Save/Simpan perubahan selesai dan cek hasilnya.

Format Penulisan

Untuk penulisan Format Kode di Syntax Highlighter seperti berikut:

<pre><code>Your_Code_Here</code></pre>

khusus format penulisan tag pada kolom pre Syntax Highlighter template Median UI, Fletro Pro dan iMagz, versi terbaru seperti berikut:

<div class='pre html notranslate'>
  <pre>Your_Code_Here</pre>
</div>

Penggunaan nama class yang ditandai bisa anda ganti dengan class name html, css dan js sesuai kode pre yang digunakan.

Selesai! sekarang pengunjung Anda dapat mengekliknya dua kali untuk menyalin konten yang ada pada kolom Syntax Highlighter <pre> dengan mudah.

Demo

Untuk hasilnya akan seperti ini,
klik tombol dibawah!

Demikianlah untuk artikel Cara Membuat Fitur Double Click to Copy semoga bermanfaat jika ada yang ingin ditanyakan silahkan berkomentar terima kasih.

Referensiku: fineshopdesign.com

Rate this article

Getting Info...
Hey there! My name is Wilson aka Dev, a professional Web Designer, Graphic Designer, UI / UX Designer as well as Content Creator. I love to Code and create interesting things while playing with it.

1 komentar

  1. Mantapp
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details