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.
Tutorial Memasang Double Click to Select All dan Copy Pre Content
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.
- Buka akun blog di Blogger.com
- Lalu pilih menu Tema
- Klik ikon panah ke bawah di sebelah tombol 'Sesuaikan'
- Tekan Edit HTML, otomatis diarahkan ke halaman kode XML.
- Selanjutnya tekan CTRL F dan temukan Kode tag ]]></b:skin> atau </style> dan tambahkan kode CSS berikut tepat diatasnya.
-
Selanjutnya tambahkan kode tag pemanggil HTML berikut tepat dibawah kode <body> atau <body>.
-
Lalu tambahkan kode JavaScript berikut tepat diatas kode </body> atau jika tidak ketemu cari kode body yang sudah diparse seperti ini </body>.
-
Terakhir klik Save/Simpan perubahan selesai dan cek hasilnya.
/* 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)}
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'}<!--[ Copied Notification by Guntur ]--> <div id='toastNotif' class='tNtf'></div>
<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>
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